Updated(reproducible) - Gaps when recording using MediaRecorder API(audio/webm opus)

Question

----- UPDATE HAS BEEN ADDED BELOW -----

I have an issue with MediaRecorder API (https://www.w3.org/TR/mediastream-recording/#mediarecorder-api).

I'm using it to record the speech from the web page(Chrome was used in this case) and save it as chunks. I need to be able to play it while and after it is recorded, so it's important to keep those chunks.

Here is the code which is recording data:

navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function(stream) { recorder = new MediaRecorder(stream, { mimeType: 'audio/webm; codecs="opus"' }) recorder.ondataavailable = function(e) { // Read blob from `e.data`, decode64 and send to sever; } recorder.start(1000) })

The issue is that the WebM file which I get when I concatenate all the parts is corrupted(rarely)!. I can play it as WebM, but when I try to convert it(ffmpeg) to something else, it gives me a file with shifted timings.

For example. I'm trying to convert a file which has duration 00:36:27.78 to wav, but I get a file with duration 00:36:26.04, which is 1.74s less.

At the beginning of file - the audio is the same, but after about 10min WebM file plays with a small delay.

After some research, I found out that it also does not play correctly with the browser's MediaSource API, which I use for playing the chunks. I tried 2 ways of playing those chunks:

In a case when I just merge all the parts into a single blob - it works fine. In case when I add them via the sourceBuffer object, it has some gaps (i can see them by inspecting buffered property). 697.196 - 697.528 (~330ms) 996.198 - 996.754 (~550ms) 1597.16 - 1597.531 (~370ms) 1896.893 - 1897.183 (~290ms)

Those gaps are 1.55s in total and they are exactly in the places where the desync between wav & webm files start. Unfortunately, the file where it is reproducible cannot be shared because it's customer's private data and I was not able to reproduce such issue on different media yet.

What can be the cause for such an issue?

----- UPDATE ----- I was able to reproduce the issue on https://jsfiddle.net/96uj34nf/4/

In order to see the problem, click on the "Print buffer zones" button and it will display time ranges. You can see that there are two gaps: 0 - 136.349, 141.388 - 195.439, 197.57 - 198.589

1. 136.349 - 141.388
2. 195.439 - 197.57

So, as you can see there are 5 and 2 second gaps. Would be happy if someone could shed some light on why it is happening or how to avoid this issue.

Thank you

Answer 1

It's 7 months later so I guess you resolved this, but in case not...

When we started working with the MediaRecorder we were having a few issues, including recordings disappearing (Maybe going over a RAM quota and then the arrays were deallocated or something like that)

What solved all our issues was to immediately put each chunk into an indexdb objectStore so it is saved to disk, and at the end of the recording, build all those chunks into a blob and download. No further working with the chunks, only the complete file.

I know this doesn't answer your question but maybe it helps.