En mi aplicación, estoy usando MediaRecorder para grabar un video corto (hasta 30 s) de un usuario y luego enviarlo al backend. Para detectar que la grabación se ha detenido, uso el evento "onstop" de MediaRecorder y en su devolución de llamada construyo un archivo de video e invoco el proceso de carga. En Chrome y Edge funciona bien. El evento se invoca solo una vez, pero en Safari veo un comportamiento diferente, los eventos "onstop" y "ondatadisponible" se invocan dos veces. Por lo tanto, mi lógica está rota, el backend recibe dos archivos de video, el primero generalmente está roto, el segundo está bien.
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');¿Es esto un error de Safari o un comportamiento normal?
Tal vez pueda crear un reproductor propio con un botón de parada propio y un evento onclick. p.ej.:
<video id=recoder></video> <button onclick='document.getElementByID('recoder').pause()'>Stop/Pause</button>