Video has no duration

[reogueone]

When I record a video and save it to disk as a webm or mp4 file under chrome or firefox it has no duration attribute.

This makes it difficult to play under VLC or similar media players. You cannot seek a video properly.

What can be done so that the file has a duration. To demonstrate this a video can be taken using this and saved (https://www.webrtc-experiment.com/RecordRTC/)

[CarpeNecopinum]

I think this is related to #145 and (if so) is probably caused by a browser bug.
As a (time consuming) workaround you can run it through FFMPEG to repair the files.
At https://www.webrtc-experiment.com/#ffmpeg there are some examples of how to do this inside the Browser even.

[reogueone]

Does this happen non your computer with this one: https://www.webrtc-experiment.com/RecordRTC/?

I'm on the latest version of Chrome (v52) and Firefox and its present on both. I figured perhaps it is an issue with the library.

If its isolated to my computer perhaps there's not much to worry about.

[CarpeNecopinum]

Unfortunately it appears to be a general issue with both, Firefox and Chrome right now and it occurs on all machines I can test it on.

[CarpeNecopinum]

According to @ignl this should now be solved with on Firefox 48, you might want to try it there again.

[thijstriemstra]

Some more discussion here: collab-project/videojs-record#31

Duration: N/A, start: 0.000000, bitrate: N/A

👎

[nicolasxu]

There is no duration as of today.

[thijstriemstra]

As of today?

[nicolasxu]

yes, I am using 57.0.3 (64-bit), and it is the same on Chrome. { nb_streams: 2,
nb_programs: 0,
format_name: 'matroska,webm',
format_long_name: 'Matroska / WebM',
start_time: '-0.001000',
duration: 'N/A',
size: 981330,
bit_rate: 'N/A',
probe_score: 100 },

[vladpoltorin]

@nicolasxu can you provide part of code you get it?

[linhe3120]

how to fix it ?

[thijstriemstra]

@linhe3120

As a (time consuming) workaround you can run it through FFMPEG to repair the files.

[imanubhardwaj]

@nicolasxu This might help.

[codeKonami]

Thanks @imanubhardwaj for your link

I've done some research and found a snippet from @thijstriemstra to make the webm blob seekable.

I've changed the code a little. Source : legokichi/ts-ebml#14 (comment)

import { Decoder, Encoder, tools, Reader } from 'ts-ebml';

const readAsArrayBuffer = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(blob);
    reader.onloadend = () => { resolve(reader.result); };
    reader.onerror = (ev) => { reject(ev.error); };
  });
}

const injectMetadata = blob => {
  const decoder = new Decoder();
  const reader = new Reader();
  reader.logging = false;
  reader.drop_default_duration = false;

  return readAsArrayBuffer(blob)
    .then(buffer => {
      const elms = decoder.decode(buffer);
      elms.forEach((elm) => { reader.read(elm); });
      reader.stop();

      const refinedMetadataBuf =
        tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
      const body = buffer.slice(reader.metadataSize);

      return new Blob([ refinedMetadataBuf, body ], { type: blob.type });
    });
}


// Can be used like this

injectMetadata(blob)
  .then(seekableBlob => {
    // 
  })

[muaz-khan]

RecordRTC now exports getSeekableBlob : https://recordrtc.org/global.html#getSeekableBlob

Relevant demo: https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/seeking-workaround.html

E.g.

recorder.stopRecording(function() {
    getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
        video.src = URL.createObjectURL(seekableBlob);
    });
});

[CoreyCole]

If you are getting the error when using getSeekableBlob():

https://www.webrtc-experiment.com/RecordRTC.js 1905:14 Uncaught Error: Please link: https://www.webrtc-experiment.com/EBML.js

Make sure to include EBML.js CDN:

<script src="https://www.webrtc-experiment.com/EBML.js"></script>

[diveshchakrayat]

RecordRTC now exports getSeekableBlob : https://recordrtc.org/global.html#getSeekableBlob

Relevant demo: https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/seeking-workaround.html

E.g.

recorder.stopRecording(function() {
    getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
        video.src = URL.createObjectURL(seekableBlob);
    });
});

[shamseerahammedm]

@muaz-khan how to add this in react project getting --->
Uncaught Error: Please link: https://www.webrtc-experiment.com/EBML.js error

[JimNewaz]

I'm facing a problem with audio duration length, I have a chrome extension, which works properly but when I download the recorded file it shows 00.00 duration. is there anyone who can solve the bug? Please
https://github.com/JimNewaz/Record-audio-chrome-extension-

[buynao]

RecordRTC now exports getSeekableBlob : https://recordrtc.org/global.html#getSeekableBlob

Relevant demo: https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/seeking-workaround.html

E.g.

recorder.stopRecording(function() {
    getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
        video.src = URL.createObjectURL(seekableBlob);
    });
});

This solution has some problems if the video file is larger than 2GB, because it uses arrayBuffer internally, which has a size limit. Based on this, I wrapped webm-duration-fix, which uses blob.stream to solve the problem of fixing large files and memory usage.

[MarconLP]

Here is an example using fix-webm-duration

fixWebmDuration(
    recorder.getBlob(),
    duration * 1000,
    (seekableBlob) => {
        console.log(seekableBlob);
    }
);