In Chrome, I'm using a MediaRecorder to record video from the user's webcam. I find that if I call MediaRecorder.pause() followed by MediaRecorder.stop(), then the call to MediaRecorder.stop() can sometimes trigger two immediate dataavailable events. This is problematic because for both of those events the MediaRecorder is in the inactive state, which means that my dataavailable event handler can't tell if the most recent dataavailable event is actually the end of the recording or if it should wait for another such event.
I believe this is partly caused by my use of the timeslice argument to MediaRecorder.start(). I have it set to 5000ms and notice that if I stop the recording less than 5000ms after the last dataavailable event, the issue doesn't occur.
In Firefox, I couldn't reproduce the issue. Perhaps it's a Chrome bug?
Minimal repro (just load the page and click the "start" button):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing MediaRecorder</title>
</head>
<body>
<script>
const recordButton = document.createElement('button');
document.body.appendChild(recordButton);
recordButton.innerHTML = 'start';
recordButton.onclick = async function () {
const cameraStream = await navigator.mediaDevices.getUserMedia({'audio': true, 'video': true});
const mediaRecorder = new MediaRecorder(cameraStream);
console.log('Starting media recording')
mediaRecorder.ondataavailable = async (event) => {
console.log(`Event size ${event.data.size}, recorder state: ${mediaRecorder.state}`);
};
mediaRecorder.start(5000);
window.startTime = new Date().getTime();
setTimeout(() => {
console.log('Pausing');
mediaRecorder.pause();
setTimeout(() => {
console.log('Stopping');
mediaRecorder.stop();
}, 4000);
}, 7000);
};
</script>
</body>
</html>
My questions:
- Is it possible to stop the dataavailable event handler from being triggered twice at once by the call to mediaRecorder.stop() (without removing the timeslice argument)?
- If not, is there a way for my dataavailable event handler to tell whether the most recent event blob is the final chunk of the recording?
