MediaRecorder "onstop" event is fired twice in Safari

Question

In my app, I'm using MediaRecorder to record a short video (up to 30s) from a user and then send it to the backend. To detect that recording has stopped, I use "onstop" event of MediaRecorder and in its callback I construct a video file and invoke uploading process. In Chrome and Edge it works fine. The event invokes only once, but in Safari I see different behavior, the "onstop" and "ondataavailable" events invoke twice. Therefore, my logic is broken, the backend receives two video files, the first one is broken usually, the second one is ok.

this.mediaRecorder = new MediaRecorder(stream, {
  mimeType,
  videoBitsPerSecond,
});

this.mediaRecorder.addEventListener('dataavailable', () => {
  console.debug('dataavailable');
});

this.mediaRecorder.addEventListener('stop', () => {
  console.debug('stop');
});

this.mediaRecorder.start();
console.debug('start');

Is this a bug of Safari or normal behavior?

Answer 1

Maybe you can create a own player with own stop-button and an onclick-event. eg.:

<video id=recoder></video>
<button onclick='document.getElementByID('recoder').pause()'>Stop/Pause</button>