After reading this page .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?

After reading this page https://developer.mozilla/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?

• javascript
• webrtc
• getusermedia
• mediastream
• web-mediarecorder

• Does this answer your question? Record 5 seconds segments of audio using MediaRecorder and then upload to the server – Kaiido Commented Feb 10, 2021 at 23:30

2 Answers 2

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.

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