How to concatenate Blobs of recordings into single file capable of playback?

[guest271314]

When recording for example each 1 second of a 60 second video using HTMLMediaElement.captureStream() and MediaRecorder, when we concatenate the discrete Blobs to a single Blob the resulting Blob URL created with URL.createObjectURL() only plays 1 second of media.

How to concatenate Blob objects having MIME type set to video/webm into a single Blob capable of playback of all of the Blobs at HTMLMediaElement?

[legokichi]

const webm = blobs.reduce((a, b)=> new Blob([a, b], {type: "video/webm"}));

[guest271314]

@legokichi That concatenates the Blob objects, though does not render playback of concatenated Blobs beyond 1 second

[yellowdoge]

Can you post some example code plz? Are you trying to merge individual 1s files?

[guest271314]

@yellowdoge Current code http://plnkr.co/edit/dNznvxe504JX7RWY658T?p=preview version 1 using Blob URL, version 2 using MediaSource evolved from https://github.com/guest271314/OfflineMediaContext, see also whatwg/html#2824.

In the interim tried mkvmerge -o output.webm -w file1.webm + file2.webm at terminal following Joining webm videos under Linux though error was logged

No append mapping was given for the file no. 1 ('file1.webm'). A default mapping of 1:0:0:0 will be used instead. Please keep that in mind if mkvmerge aborts with an error message regarding invalid '--append-to' options.
Error: The track number 0 from the file 'file2.webm' cannot be appended to the track number 0 from the file 'file1.webm'. The track parameters do not match.

Both file1.webm and file2.wemb were created using MediaRecorder.

[guest271314]

@yellowdoge The basic concept is to be able to 1) create discrete files from media fragments, for example, 1 second of a video file, capable of independent playback; whether the implementation be MediaRecorder or other methods available at modern browsers; 2) the capability to concatenate or mix the independent media fragments into a single media file, where the media fragments may or may not be derived from the same original media resource

[guest271314]

@yellowdoge Yes, trying to merge 60 1 second files into a single file.

[yellowdoge]

I'm afraid that from the POV of Media Recorder there's not much that can be done since every one of these individual 1-second files would have a file header, several video frame headers and possibly a trailer; merging them would not be trivial at all.

You could try wrapping e.g. mkvmerge to in js using emscriptem or WebAssembly, or perhaps cast each file in succession into a <video>/<canvas> and record a MediaStream out of it (see e.g. captureStream()).

[guest271314]

@legokichi @yellowdoge See #132

[guest271314]

@legokichi Your solution at legokichi/ts-ebml#2 (comment) appears to be a possible solution for w3c/media-source#191. Have no experience using TypeScript. How to use code at https://jsfiddle.net/ub2jej7c/ to pass Blob or MediaStream to get seekable media?

[legokichi]

@guest271314
legokichi/ts-ebml#14 (comment)

[jtheisen]

@yellowdoge Bizarre. Seems like a significant design flaw to me.

[guest271314]

I'm afraid that from the POV of Media Recorder there's not much that can be done since every one of these individual 1-second files would have a file header, several video frame headers and possibly a trailer; merging them would not be trivial at all.

@yellowdoge Given that all of the input files were created by MediaRecorder cannot the raw data (audio and video content without headers) be extracted from the .webm files and written to a new .webm file?

[shallfer7]

Is this issue solved ? I've been facing this same problem.

[LucaGianni]

I had this exact issue and was able to resolve it by using RecordRTC

It uses MediaRecorder and has pretty much the same syntax, however the blob returned by ondataavailable is different. With MediaRecorder, each blob contained header information (as discussed in previous comments here) which prevented concatenation, meaning the final video would stop playing after 1-2 seconds.

However, each blob returned by RecordRTC after the first one seems to have these headers filtered out, meaning concatenation is very simple, e.g.

let blobs = [];
ondataavailable: (blob) => {
    blobs = [...blobs, blob];
}
// Concatenate blobs
let fullVideoBlob = new Blob(blobs, {'video/mp4'})

Hope this helps anyone looking for a solution to this issue!