Screen recorder in JS

canvasrecord.js

canvasrecord.js

(function() {

  let canvas = document.querySelector('canvas');

  // Optional frames per second argument.

  let stream = canvas.captureStream(25);

  let recorder = new MediaRecorder(stream, options);

  let blobs = [];

  function download(blob) {

    var url = window.URL.createObjectURL(blob);

    var a = document.createElement('a');

    a.style.display = 'none';

    a.href = url;

    a.download = 'test.webm';

    document.body.appendChild(a);

    a.click();

    setTimeout(function() {

      document.body.removeChild(a);

      window.URL.revokeObjectURL(url);

    }, 100);

  }

  recorder.ondataavailable = e => { console.log(e.data); if (e.data && e.data.size > 0) blobs.push(e.data)};

  recorder.onstop = (e) => download(new Blob(blobs, , {type: 'video/webm'}));

  recorder.start(10); // collect 10ms of data

  setTimeout(()=> recorder.stop(), 10000);

})();