MediaRecorder webm -> mp4

const mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
let mediaRecorder, recordedBlobs, sourceBuffer;
let recordButton, recording = false;
const playButton = document.querySelector('button#play');
const downloadButton = document.querySelector('button#download');
let canvas, video, stream;
var types = [
    "video/webm",
    "audio/webm",
    "video/webm\;codecs=vp8",
    "video/webm\;codecs=daala",
    "video/webm\;codecs=h264",
    "audio/webm\;codecs=opus",
    "video/mpeg"
];

for (var i in types) {
    console.log( types[i] + " - " + (MediaRecorder.isTypeSupported(types[i]) ? "√" : "X"));
}

function prepRecorder(){
    recordButton = document.querySelector('button#record');
    recordButton.onclick = toggleRecording;
    canvas = document.querySelector('canvas');
    video = document.querySelector('video');
    stream = canvas.captureStream(); // frames per second
}

playButton.onclick = play;
downloadButton.onclick = download;

function handleSourceOpen(event) {
    console.log('MediaSource opened');
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="h264"');
    console.log('Source buffer: ', sourceBuffer);
}

function handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}

function handleStop(event) {
    console.log('Recorder stopped: ', event);
    const superBuffer = new Blob(recordedBlobs, {type: 'video/mp4'}); // video/webm
    video.src = window.URL.createObjectURL(superBuffer);
}

function toggleRecording() {
    if (!recording) {
        recording = true;
        startRecording();
    } else {
        stopRecording();
        recording = false;
        recordButton.innerHTML = iconVideo;
        playButton.disabled = false;
        downloadButton.disabled = false;
    }
}

// The nested try blocks will be simplified when Chrome 47 moves to Stable
function startRecording() {
    let options = {mimeType: 'video/webm;codecs=h264'};
    recordedBlobs = [];
    try {
        mediaRecorder = new MediaRecorder(stream, options);
    } catch (e0) {
            console.log('Unable to create MediaRecorder with options Object: ', e0);
            try {
                options = {mimeType: 'video/webm,codecs=vp9'};
                mediaRecorder = new MediaRecorder(stream, options);
            } catch (e1) {
                console.log('Unable to create MediaRecorder with options Object: ', e1);
                try {
                    options = 'video/vp8'; // Chrome 47
                    mediaRecorder = new MediaRecorder(stream, options);
                } catch (e2) {
                    alert('MediaRecorder is not supported by this browser.\n\n' +
                    'Try Firefox 29 or later, or Chrome 47 or later, ' +
                    'with Enable experimental Web Platform features enabled from chrome://flags.');
                    console.error('Exception while creating MediaRecorder:', e2);
                    return;
            }
        }
    }
    console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
    toggleVideo(false);
    recordButton.innerHTML = iconStop;
    playButton.disabled = true;
    downloadButton.disabled = true;
    mediaRecorder.onstop = handleStop;
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start(100); // collect 100ms of data
    console.log('MediaRecorder started', mediaRecorder);
}

function stopRecording() {
    mediaRecorder.stop();
    toggleVideo(true);
    console.log('Recorded Blobs: ', recordedBlobs);
    video.controls = true;
}

function play() {
    video.play();
}

function download() {
    const blob = new Blob(recordedBlobs, {type: 'video/mp4'}); // video/webm
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'test.mp4'; // .webm
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 100);
}