I have an application where we are using the user's webcam for recording a video. For that i just use the following

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

Now I record the video using MediaRecorder API and when I stop recording, i simply set the srcObject to be null and use the recording as a url stored in the state simply using the below code.

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

So what happens is, until I have something in srcObject for example while it is streaming or recording, it works fine. But when I stop the recording and set the srcObject to be null it does not autoplay the video. Although the video has received the src from the state. I have checked in the Safari dev-tools, the src is updated in the DOM properly.

Another debugging that I have already done is. If I do not set the video.srcObject = stream while starting the camera then everything works fine, like I can record, stop recording and then boom it autoplays the video that too with audio(not to forget, if I do not set the srcObject then unless I stop recording I am not able to see anything).

Any ideas or suggestions are welcome