Safari - A MediaStreamTrack ended due to a capture failure

user_11233305 0
Viewed 2304

Today I upgraded to macOS Big Sur 11.0.1 and Safari 14, and my website (one-to-one video chat based on WebRTC) stopped working on Safari. After 10 seconds of a video call, the following console error appears: "A MediaStreamTrack ended due to a capture failure" and the other person can no longer see the video.

My code looks like this:

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

if (userMedia != null) {
    userMedia.getTracks().forEach((track) => {
      otherRtcPeer.addTrack(track, userMedia);
    });
}

Is it a Safari bug or an implementation issue? And how to solve it?

getusermedia webrtc safari javascript
2 Answers

After going through this guide, I have made changes and resolved the issue.

  1. Have stream object in react state
  2. when video element render/re-render the stream object is cloned and assigned to video element srcObject
  3. After capture of the picture, stop all media tracks in the stream.

This way error mentioned above has been overcome.

user_27007570

I was able to fix the issue on my end by styling a video element I'm using as a webGL texture as display:block, opacity:0 (instead of display: none).

Perhaps they removed the ability to play offscreen video textures on ios14/big sur.

user_141548750
Related