-
-
Save randPharoah/18e09e26dcdf3b24cfe37259c284e5ed to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Screen recorder</title> | |
| </head> | |
| <body> | |
| <button id="recording-toggle">Start recording</button> | |
| <script defer> | |
| var RECORDING_ONGOING = false; | |
| var recordingToggle = document.getElementById("recording-toggle"); // The button | |
| recordingToggle.addEventListener("click", function(){ | |
| RECORDING_ONGOING = !RECORDING_ONGOING; // Start / Stop recording | |
| if(RECORDING_ONGOING){ | |
| recordingToggle.innerHTML = "Stop Recording"; | |
| startRecording(); // Start the recording | |
| } else { | |
| recordingToggle.innerHTML = "Start Recording"; | |
| stopRecording(); // Stop screen recording | |
| } | |
| }); | |
| var blob, deviceRecorder = null; | |
| var chunks = []; | |
| async function startRecording(){ | |
| var stream = await navigator.mediaDevices.getDisplayMedia({video: {mediaSource: "screen"}, audio: true}) | |
| deviceRecorder = new deviceRecorder(stream, {mimeType: "video/webm"}); | |
| deviceRecorder.ondataavailable = (e) => { | |
| if(e.data.size > 0){ | |
| chunks.push(e.data); | |
| } | |
| } | |
| deviceRecorder.onstop = () => { | |
| chunks = []; | |
| } | |
| deviceRecorder.start(250) | |
| } | |
| console.log(deviceRecorder.isTypeSupported("video/webm")) | |
| console.log(deviceRecorder.isTypeSupported("video/mp4")) | |
| console.log(deviceRecorder.isTypeSupported("video/mp4;codecs=avc1")) | |
| function stopRecording(){ | |
| var filename = window.prompt("File name", "video"); // Ask the file name | |
| deviceRecorder.stop(); // Stopping the recording | |
| blob = new Blob(chunks, {type: "video/webm"}) | |
| chunks = [] // Resetting the data chunks | |
| var dataDownloadUrl = URL.createObjectURL(blob); | |
| // Downloadin it onto the user's device | |
| let a = document.createElement('a') | |
| a.href = dataDownloadUrl; | |
| a.download = `${filename}.webm` | |
| a.click() | |
| URL.revokeObjectURL(dataDownloadUrl) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment