-
-
Save parag60288/d37789d7583a19f97af9aa986b073348 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