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: true, audio: true };
navigator.getUserMedia(mediaConstraint, function(stream) {
    var vendorURL = window.URL || window.webkitURL;
    _video = document.querySelector('#recordingCamera');
    _video.src = vendorURL.createObjectURL(stream);
    _video.play();

    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(3000);
    mediaRecorder.ondataavailable = function(e) {
        var replay = document.querySelector('#replay');
        replay.src = window.URL.createObjectURL(e.data);
        replay.play();
    }
}, function(error){

});

I expect that after 3 secs since the #recordingCamera element display the content from my camera, I will see the content replay in #replay element.
But the #replay element just play only frist 3 seconds. After that the #recordingCamera element still display the camera content but nothing else for the #replay element.
When checking the console I found these messages:

Media resource blob:http://localhost:8081/634f6237-17a9-475d-89bb-2c6ca0b48eb6 could not be decoded.
Media resource blob:http://localhost:8081/d0b95463-f9bc-4b0f-bd0d-40ae3152181f could not be decoded.
Media resource blob:http://localhost:8081/535ab990-0ee2-4ec0-adac-2d5d6917f6f3 could not be decoded.

The ondataavailable still fired but something wrong happen with the data.

My question:

Is this a bug of Firefox?
If not, what is the correct way to use MediaRecorder with a time slice argument specified with start?

Does this answer your question? [Record 5 seconds segments of audio using MediaRecorder and then upload to the server](https://stackoverflow.com/questions/51325136/record-5-seconds-segments-of-audio-using-mediarecorder-and-then-upload-to-the-se) — Kaiido, Feb 10 '21 at 23:30

score 3 · Accepted Answer · answered Jan 07 '15 at 14:25

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.

Do you have a full working example? I've modified the MediaRecorder WebRTC sample to use MediaSource as per your code above, but it's not working. In firefox addSourceBuffer gives the error "operation not supported" (because WebM media sources aren't supported by default). In chrome it just displays one frame of video. — CpnCrunch, Mar 08 '16 at 22:35
This looks like a bug in chrome. Works from time to time and unstable. Here is my question: http://stackoverflow.com/questions/37667075/play-mediarecorder-chunks-in-mediasource-html5-video-frozen — Stepan Yakovenko, Jun 08 '16 at 23:55

score 0 · Answer 2 · answered Jan 20 '16 at 21:38

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);

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

2 Answers2

Linked