Media-Recorder : Record Canvas/Video

media-recorder-snippet.js

(function() {
    window.blobURL = null;

    function blobToFile(blob, filename) {
        if(window.blobURL  != null) {
            URL.revokeObjectURL(window.blobURL)
        }
        window.blobURL  = URL.createObjectURL(blob);
        if(window.link == null) {
            window.link = document.createElement("a");
            window.link.text = "Download "+filename
            document.body.appendChild(window.link);
        }
        window.link.href = window.blobURL;
        window.link.download = filename;
        window.link.style.position = 'absolute'
        window.link.style.left = 10
        window.link.style.top = 10
        window.link.style.zIndex = 1000
        console.log(window.blobURL);
    }


    var recorderStream = null
    var chunks = null
    var options;
    if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
      options = {mimeType: 'video/webm; codecs=vp9'};
    } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
      options = {mimeType: 'video/webm; codecs=vp8'};
    } else if (MediaRecorder.isTypeSupported('video/mp4')) {
      options = {mimeType: 'video/mp4'};
    }
    window.captureVideo = function (element) {
        var stream = element.captureStream(25)
        recorderStream = new MediaRecorder(stream, options);
        chunks = []
        recorderStream.ondataavailable = function(e) {
          chunks.push(e.data);
        }
        recorderStream.start();
    }
    window.stopRecording = function(name) {
        recorderStream.onstop = function(e) {
            var blob = new Blob(chunks, { 'type' : options.mimeType });
            blobToFile(blob, name+".mp4")
        }
        recorderStream.stop();
    }
})()