Posted on 2020-01-19

Screen recorder

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