Troubleshooting video duration discrepancy in MediaRecorder API

Other Questions API
1

Hey folks, I’m struggling with a weird problem in my Vue JS2 app. I’m using the MediaRecorder API to make video recordings. Here’s what’s happening:

  1. Record 3 seconds, pause
  2. Resume, record 5 seconds, pause
  3. Delete the last 5-second chunk
  4. Record another 3 seconds
  5. Stop recording

The final video should be 6 seconds (3 + 3), but it’s coming out as 11 seconds! It’s fine if I just record, resume, delete, and stop. The issue only pops up when I record again after deleting a chunk.

I’ve got a recordcore.js file handling the MediaRecorder stuff. It has methods for starting, resuming, pausing, and stopping the recording, plus a function to delete the last session.

I’ve checked the allChunks constant in the stopRecordVideo method, and it looks correct. Anyone know what might be causing this? I’m totally stumped!

Here’s a simplified version of my code:

class VideoRecorder {
  constructor() {
    this.chunks = [];
    this.sessions = [];
  }

  startRecording() {
    this.currentChunks = [];
    this.recorder.start(100);
  }

  pauseRecording() {
    this.sessions.push(this.currentChunks);
    this.currentChunks = [];
    this.recorder.pause();
  }

  deleteLastSession() {
    this.sessions.pop();
  }

  stopRecording() {
    const allChunks = this.sessions.flat();
    return new Blob(allChunks, {type: 'video/webm'});
  }
}

Any ideas?

2

I’ve run into this exact problem before, and it’s a tricky one. The issue lies in how MediaRecorder handles timestamps internally. Even when you delete chunks, the recorder’s internal clock keeps ticking.

Here’s what worked for me: instead of deleting chunks, I kept all of them but maintained a separate array of ‘valid’ chunk indices. When stopping the recording, I only used the chunks corresponding to these indices to create the final Blob.

It’s a bit more complex, but it solved the duration discrepancy for me. You’ll need to modify your code to track start and end times for each chunk, and then only use the chunks you want in the final video.

This approach gives you more precise control over which parts of the recording make it into the final product. It’s not perfect, but it’s the best workaround I’ve found so far for this MediaRecorder quirk.

3

yo, i had this problem too. it’s a pain in the butt. what worked for me was using the timeSlice option when starting the recorder. like this:

this.recorder.start(1000); // 1 second chunks

then u can keep track of chunk durations urself. when u delete a chunk, subtract its duration from ur total. it’s not perfect, but it helped me get closer to the right duration.

4

I’ve encountered a similar issue when working with MediaRecorder. The problem might be related to how the API handles timestamps internally. Even after deleting chunks, the MediaRecorder could be maintaining its internal timer, leading to unexpected durations.

One potential solution is to create a new MediaRecorder instance after deleting chunks. This ensures a fresh start for the timing mechanism. Alternatively, you could try manually adjusting the timestamps of the remaining chunks before creating the final Blob.

If those don’t work, consider implementing your own timing system. Keep track of the actual recording duration for each chunk and use this information when assembling the final video. This approach gives you more control over the output duration.

Remember to thoroughly test any changes, as MediaRecorder behavior can vary across browsers and devices.