Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[fix-webm-duration] Duration section is present

See original GitHub issue

I’m recording a webm from a video element with HTMLMediaElement.mozCaptureStream and, long story short, the resulting duration is N/A according to ffmpeg. File explorer (nautilus) reports the duration as 0 seconds as well.

As the title implies, I get the “Duration section is present” error anyway. Can I get around this? Maybe remove the duration section first, if that’s possible?

I also tried removing the return false from that part. ffmpeg gave a proper duration after that, but Nautilus still says 0 seconds, and firefox reports that the file is corrupt.

Issue Analytics

State:
Created 5 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

2reactions

yusitnikovcommented, Nov 17, 2018

@losnappas , issue fixed in the main branch. FF records a file with a “Duration” section, but the value there is 0. The new version of the script sets the right duration value in that case.

0reactions

losnappascommented, Nov 16, 2018

I made an example. Can’t run it on jsfiddle because the video needs to be 1st party.

I don’t know why your fiddle worked, but this example doesn’t…

Just pasting it. page.html:

<html>
    <body>
<video id="videoElement" src="YOURWEBMVIDEO.webm" autoplay width="120"></video>
<a href="" id="downloadButton" download="test.webm">wait for it to finish first</a>

<script src="https://cdn.jsdelivr.net/gh/yusitnikov/fix-webm-duration/fix-webm-duration.js"></script>
<script src="main.js"></script>
</body>
</html>

main.js

var log = console.log
let recordingTimeMS = 2000;
function wait(delayInMS) {
  return new Promise(resolve => setTimeout(resolve, delayInMS));
}
function startRecording(stream, lengthInMS) {
  let recorder = new MediaRecorder(stream);
  let data = [];
  recorder.ondataavailable = event => data.push(event.data);
  recorder.start();
  log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");
  let stopped = new Promise((resolve, reject) => {
    recorder.onstop = resolve;
    recorder.onerror = event => reject(event.name);
  });
  let recorded = wait(lengthInMS).then(
    () => recorder.state == "recording" && recorder.stop()
  );
  return Promise.all([
    stopped,
    recorded
  ])
  .then(() => data);
} 
let stream = videoElement.mozCaptureStream()
startRecording(stream, recordingTimeMS).then(data => {
    let recordedBlob = new Blob(data, {type: 'video/webm'})
    
    
    log('done', recordedBlob, ysFixWebmDuration)
    ysFixWebmDuration(recordedBlob, recordingTimeMS, function(fixedBlob) {
        log('done')
        downloadButton.href = URL.createObjectURL(fixedBlob);
        downloadButton.download = "RecordedVideo.webm";
        downloadButton.innerHTML = 'finished'
    })
})

Download it, then using ffmpeg to check the metadata: ffmpeg -i RecordedVideo.webm -f ffmetadata “Duration: N/A”