0

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!

Kiwanax
  • 1,265
  • 1
  • 22
  • 41
  • Could you produce a functional example incl. pause? The code fragment shown now doesn't give much, however it's likely a reference problem. –  Sep 08 '17 at 20:08
  • 1
    Possible duplicate of [Is it possible to merge multiple webm blobs/clips into one sequential video clientside?](https://stackoverflow.com/questions/44687026/is-it-possible-to-merge-multiple-webm-blobs-clips-into-one-sequential-video-clie) – Kaiido Sep 10 '17 at 11:37
  • 1
    Basically, no you can't merge multiple records just like that, **but** the MediaRecorder API has a `pause` method which sounds to be just what you need. A little bit less related but maybe of some interest too: https://stackoverflow.com/questions/45217962/how-to-use-blob-url-mediasource-or-other-methods-to-play-concatenated-blobs-of – Kaiido Sep 10 '17 at 11:42

1 Answers1

0

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.

guest271314
  • 1
  • 15
  • 104
  • 177