Correct way to use MediaRecorder with a time slice argument specified with start

Question

After reading this page https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder.start , I have write my own code:

var mediaConstraint = { video: tru         


        

Answer 1

Ok, I found the solution, that MediaSource API

var mediaSource = new MediaSource();
var replay = document.querySelector('#replay');
replay.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function(e) {
    console.log('sourceopen')
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
});

var mediaConstraint = { video: true, audio: true };
navigator.getUserMedia(mediaConstraint, function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(3000);
    mediaRecorder.ondataavailable = function(e) {
        var fileReader = new FileReader();
        fileReader.onload = function() {
            sourceBuffer.appendBuffer(fileReader.result);
        };
        fileReader.readAsArrayBuffer(e.data);
    }
}, function(error){});

Note that in Firefox you need set the enable-media-source flag to true.

Answer 2

This does seem to be a bug in Firefox. If you call mediaRecorder.start with a smaller timeslice interval, the blob will playback fine without using a MediaSource. Note that MediaSource was not generally available until Firefox 42, so you can't rely on it being available.

mediaRecorder.start(1000);