Skip to content

Instantly share code, notes, and snippets.

@anirudh-munipalli

anirudh-munipalli/index.html

Created June 27, 2023 10:57
Show Gist options
  • Save anirudh-munipalli/4061a0ecd68fae2545d45ae14e58302d to your computer and use it in GitHub Desktop.
Save anirudh-munipalli/4061a0ecd68fae2545d45ae14e58302d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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>
@MartinaFSA
Copy link

This is a great resource, thanks for sharing!
I noticed an error on line 30
deviceRecorder = new deviceRecorder (stream, {mimeType: "video/webm"});
It should create a "new MediaRecorder" instead of deviceRecorder

@dhyanivj
Copy link

dhyanivj commented May 29, 2024 •
edited
Loading

This is the working code :

` <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, mediaRecorder = null;
    var chunks = [];

    async function startRecording(){
        var stream = await navigator.mediaDevices.getDisplayMedia({video: {mediaSource: "screen"}, audio: true});

        mediaRecorder = new MediaRecorder(stream, {mimeType: "video/webm"});
        mediaRecorder.ondataavailable = (e) => {
            if(e.data.size > 0){
                chunks.push(e.data);
            }
        };
        mediaRecorder.onstop = () => {
            var filename = window.prompt("File name", "video"); // Ask the file name

            blob = new Blob(chunks, {type: "video/webm"});
            chunks = []; // Resetting the data chunks
            var dataDownloadUrl = URL.createObjectURL(blob);

            // Download it onto the user's device
            let a = document.createElement('a');
            a.href = dataDownloadUrl;
            a.download = `${filename}.webm`;
            a.click();

            URL.revokeObjectURL(dataDownloadUrl);
        };
        mediaRecorder.start(250);
    }

    function stopRecording(){
        mediaRecorder.stop(); // Stopping the recording
    }
</script>`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment