Old MSR to MSE

by juberti

HTML

<video autoplay id="video"></video>

CSS

#video {
  border: 1px solid black;
}

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    var mediaSource = new MediaSource();
    var constraints = {
        "audio": false,
        "video": {
            "mandatory": {
                "minWidth": 320, "maxWidth": 320,
                "minHeight": 240, "maxHeight": 240
            }, "optional": []
        }
    };
    var sourceBuffer;
    var video = document.querySelector('#video');
    video.onclick = function() { video.play(); }
    video.src = window.URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', function (e) {
        sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp9"');
    }, false);
    video.play();
    navigator.getUserMedia(constraints, function (stream) {
        console.log("stream",stream);
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.ondataavailable = function (e) {
            var reader = new FileReader();
            reader.addEventListener("loadend", function () {
                var arr = new Uint8Array(reader.result);
                sourceBuffer.appendBuffer(arr);
            });
            reader.readAsArrayBuffer(e.data);
        };
        mediaRecorder.start(3000);
    }, function (e) {
        console.log(e)
    });