Tengo una aplicación en la que estamos usando la cámara web del usuario para grabar un video. Para eso solo uso lo siguiente

 const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) video.srcObject = stream

Ahora grabo el video usando MediaRecorder API y cuando dejo de grabar, simplemente configuro el srcObject para que sea nulo y uso la grabación como una URL almacenada en el estado simplemente usando el siguiente código.

 video.srcObject = null const url = URL.createObjectURL(recording) setState({ url })

Entonces, lo que sucede es que, hasta que tenga algo en srcObject, por ejemplo, mientras se transmite o graba, funciona bien. Pero cuando detengo la grabación y configuro el srcObject para que sea nulo, no se reproduce automáticamente el video. Aunque el video ha recibido el src del estado. Revisé las herramientas de desarrollo de Safari, el src se actualizó correctamente en el DOM.

Otra depuración que ya he hecho es. Si no configuro el video.srcObject = stream mientras enciendo la cámara, entonces todo funciona bien, puedo grabar, detener la grabación y luego reproducir automáticamente el video con audio (sin olvidar, si no configuro el srcObject entonces, a menos que deje de grabar, no puedo ver nada).

Cualquier idea o sugerencia es bienvenida