6

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?

jj.
  • 2,210
  • 3
  • 21
  • 22
  • It would also be nice to have a solution which can trim precisely. Even setting the chunks size to 1 seconds doesn't guarantee they will be exactly that. – Nuthinking May 23 '18 at 14:16
  • @jj. Are you able to solve this? – rbansal Aug 25 '21 at 03:39
  • 1
    Hi @rbansal - this was for a (javascript) chromeos app, so I was able to solve it by incorporating ffmpeg into the app build. It was many years ago now, so maybe there is a js-only solution that exists that did not back then? – jj. Aug 25 '21 at 15:26

2 Answers2

0

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.

roim
  • 4,780
  • 2
  • 27
  • 35
0

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.

SherylHohman
  • 16,580
  • 17
  • 88
  • 94
Jordan Epstein
  • 11
  • 2