StreamMediaRecorder - create and play a blob file with all saved parts

Question

I have an video recorder application using StreamMediaRecorder JS API that has a PAUSE function. Whenever the user pauses the recording, a new blob slice should be saved and a big blob file should be saved at the end.

let chunks = [];
let player = document.getElementById('player');

recorder.ondataavailable = (event) => chunks.push(event.data);
recoder.onstop = (event) => {

    var blob = new Blob([chunks], { type: 'octet/stream' });
    player.src = URL.createObjectURL(blob);
}

However, every blob file is saved is just playing the last piece, not the whole file. After create the blob variable, the size is equals to the sum of all blob chunks, but when playing, only the last piece is being played.

Anyone knows how to solve it? Thank y'all!

Answer 1

It is not a trivial task to concatenate recordings of media resources recorded using MediaRecorder.

The links posted by @Kaiido should provide a solution using .pause() and .resume() of MediaRecorder(), AudioContext() and HTMLCanvasElement.captureStream().

To fully realize requirement you can use ts-ebml to set to metadata of media files created using MediaRecorder.

It is possible to use MediaRecorder and MediaSource with ts-ebml ported to JavaScript for use in browser to achieve the requirement described at OP, see https://github.com/guest271314/recordMediaFragments/blob/master/demos/recordMediaFragments.html.

Full disclosure, am the author of https://github.com/guest271314/recordMediaFragments.