Emitted blobs do not always exactly adhere to the timeslice value

fritjofbuettner commented 2 years ago

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/dataavailable_event

What specific section or headline is this issue about?

First section, fourth bullet point about the timeslice parameter

What information was incorrect, unhelpful, or incomplete?

The documentation currently says this:

If a timeslice property was passed into the MediaRecorder.start() method that started media capture, a dataavailable event is fired every timeslice milliseconds.

However, I used to record videos with a MediaRecorder like this (in vuejs):

startRecording: function () {
    this.recorder = new MediaRecorder(this.streamSrc, {mimeType: "video/webm;codecs:vp8"});
    this.recorder.ondataavailable = this.onData;
    this.recorder.start(500);
},
onData: function (event) {
    // append the latest chunk of video data to an array
    this.chunks.push(event.data);
    this.duration = this.chunks.length * 500 / 1000;
}

and expected each blob emitted to the onData handler to contain exactly 500 ms of video. Hence, I simply used the length of the array to show the total recorded video duration to the user.

As it turns out, the computed duration would accumulate a substantial drift from the real duration as the video got longer. After around 10 minutes of video, the displayed duration value would differ from the actual video duration by multiple seconds. I ended up implementing my own "stopwatch" to keep track of the recorded duration, which works much more accurately.

From my understanding of how video codecs work, I imagine it's hard to make a sensible "cut" precisely after a given timeslice value and that's perhaps why we cannot rely on emitted blobs to have exactly the specified duration.

What did you expect to see?

If my usage of the timeslice option and the assumption about video codecs is correct, I would suggest to adapt the documentation in a way to reflect this.

From reading the current description, I thought the blob duration was reliable and had to spend effort debugging it when it wasn't.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

I observed the described behaviour in Firefox and Chrome and suspect other browsers to behave the same way.

MDN metadata

Page report details

* Folder: `en-us/web/api/mediarecorder/dataavailable_event` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/dataavailable_event * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/mediarecorder/dataavailable_event/index.md * Last commit: https://github.com/mdn/content/commit/542ec1e002ae3c340f0925adfd1f0d870c14ff32 * Document last modified: 2022-08-09T12:24:48.000Z

skyclouds2001 commented 9 months ago

This relates to the browser event queue, just like setTimeout() and setInterval(), the time callback is invoked is always later than the time set.

But I agree it is a good idea to add information of the delay.

octavn commented 16 hours ago

Neither the length nor the size of a chunk/blob produced through dataavailable can be relied upon.

https://blog.addpipe.com/dealing-with-huge-mediarecorder-slices/

mdn / content