Blob video duration metadata [duplicate]

Question

I am writing a software that manipulates camera stream video in firefox.

I am generating a Blob with video type recorded with MediaRecorder API.

What i am doing to save the blob as video in local storage is using FileSaver library :

    FileSaver.saveAs(BlobVideo,"video.mp4");

It seems the video doesnt have any max duration, so i cannot navigate in timeline in my newly generated video in VLC, for example.

Is there a way to set duration metadatas on a blob video?

Banebrudge

I'm having a similar problem for viewing blob videos from MediaRecorder on Firefox specifically. – Sparid

Answer 1

This question is an almost duplicate of this other one. _{(But since there is a bounty on it, we can't vote to close)}

This is a known chrome bug.

You can have this duration from the browser itself by loading the video, setting its currentTime to some extra-value, then reading the duration, but you won't have it attached to the file itself, at least not until the bug has been fixed.

Gratuitous

The chrome bug mentioned here has been marked as WontFix by the chromium team, so it looks looks like we need to rely on a library like ts-ebml if we want to edit the actual file. – Fortier

Answer 2

Until the chrome bug that Kaiido mentioned gets fixed, this worked for me:

while(video.duration === Infinity) {
  await new Promise(r => setTimeout(r, 1000));
  video.currentTime = 10000000*Math.random();
}
let duration = video.duration;

It would probably be a better idea to listen for the "durationchange" event though, rather than having the arbitrary 1 second pauses.

Israelitish

It's simple code snippet that worked for me mate, no big deal! :) – Israelitish