Working demo at https://vujson.com/screenrecorder/
we can grab audio stream
audioStream = await navigator.mediaDevices.getUserMedia( {audio: true} );
and user screen
videoStream = await navigator.mediaDevices.getDisplayMedia( {video: true, audio: false} );
mix them together
let mixedStream = new MediaStream([ videoStream.getTracks()[0], audioStream.getTracks()[0] ]);
record it in webm format to blob
var options = { mimeType: "video/webm; codecs=vp9" };
mediaRecorder = new MediaRecorder(mixedStream, options);
and force download using ugly hack
var blob = new Blob(recordedChunks, {
type: "video/webm"
});
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "Record.webm";
a.click();
setTimeout(() => {
window.URL.revokeObjectURL(url);
recordedChunks = []
document.body.removeChild(a);
}, 0)
Link to GitHub