Trim the beginning of a video Blob (webm) in javascript

user_103131 0
Viewed 2594

I have a video Blob array in Javascript; the array is segmented into 1 second intervals. I want to trim from the beginning and end of the video.

I found this post (how-to-edit-trim-a-video-in-the-browser) describing how to trim my blob, but it only works for the end of the video.

I suspect that removing the beginning of the blob removes the header information and makes the webm invalid.

This works:
// remove 2 seconds from the end of the video const trimmedVideo = blobArray.slice(0, blobArray.length - 2);

This does not work:
// remove 1 second from the start of the video const trimmedVideo = blobArray.slice(1, blobArray.length);

How can I trim from the beginning of my video blob?

webm javascript
2 Answers

A hacky and sub-optimal solution, you could set your blob as the source of a video element, then seek to the timestamp where you want to start trimming (could even do this through the uri using #t=[starttime][,endtime] syntax), stream that video element to a new recorder, and play it until the timestamp you want to trim.

You can simplify this a bit by trimming the end by discarding blob chunks, but as @Nuthinking said, you'd lose precision (even the video player won't be 100% precise though, I believe firefox works with 2ms precision).

While I believe this would work, and the video doesn't need to be in the DOM, you'd be encoding at 1:1 time.

I'm not aware of any other answers to this that would involve just HTML5. This question is tricky because the MediaRecorder API explicitly says blob chunks produced need not be playable by themselves.

user_9387820

The mediarecorder object that the original solution uses has a method called requestData(), which apparently continues recording in a new Blob after it is called.

Maybe you can use this to continue to record in a new Blob after you find the start point of your edited footage.

user_94700270
Related