React PeerJs Issue when building Video-Chat: Uncaught (in promise) DOMException: The play() request was interrupted by a new load request

Question

I am building a React.Js video chat application using PeerJs library. when I tried to video call and receive call, I receive this error on chrome: Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. I looked up online and someone said instead of having navigator.mediaDevices.getUserMedia({audio:true, video,true},(stream)), use then.(stream). But it did not solve the issue. Does anybody know what's the error real mean and what is the cause of this and how can I fix it? Code snippets for videocall and receive function:

peer.on('call', (call) => {
        // navigator.getUserMedia =
        //   navigator.getUserMedia ||
        //   navigator.webkitGetUserMedia ||
        //   navigator.mozGetUserMedia;
        if (navigator.mediaDevices.getUserMedia){
            navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 1280, height: 720 } })
            .then((stream)=>{
                document.getElementById('myVideo').srcObject = stream;
                // Show loading animation.
                var myVideoPromise = document.getElementById('myVideo').play();
                if (myVideoPromise!==undefined){
                myVideoPromise.then(_=>{
                    document.getElementById('myVideo').play();    
                }).catch(error => {
                    // Auto-play was prevented
                    // Show paused UI.
                    console.log(error);
                });
                }
                // myVideoRef.current.srcObject = stream;
                // setMyVideoPlaying(true);
                // myVideoRef.current.play()
                call.answer(stream);
                call.on('stream', (remoteStream) => {
                
                document.getElementById('remoteVideo').srcObject = remoteStream;
                var remoteVideoPromise=document.getElementById('remoteVideo').play(); 
                if (remoteVideoPromise!==undefined){
                    remoteVideoPromise.then(_=>{
                    document.getElementById('Video').play();    
                    }).catch(error => {
                    // Auto-play was prevented
                    // Show paused UI.
                    console.log(error);
                    });
                }
                })
            })
        }
    });
    const videoCall = () => {
        // navigator.getUserMedia =
        //   navigator.getUserMedia ||
        //   navigator.webkitGetUserMedia ||
        //   navigator.mozGetUserMedia;
        if (navigator.mediaDevices.getUserMedia){
        navigator.mediaDevices.getUserMedia({audio: true, video:{width: 1280, height: 720}})
            .then((stream)=>{
            // myVideoRef.current.srcObject = stream;
            document.getElementById('myVideo').srcObject=stream;
            document.getElementById('myVideo').play();
            // myVideoRef.current.play();
            const call = peer.call(myconnection.friendId, stream);
            // call a peer, providing our MediaStream
            call.on('stream', (remoteStream) => {
                // remoteVideoRef.current.srcObject = remoteStream;
                // remoteVideoRef.current.play();
                document.getElementById('remoteVideo').srcObject=remoteStream;
                document.getElementById('remoteVideo').play();
            });
            })
        }
    }

I tried to fetch the element using getElementById instead of useRef and I tried to call stream inside Promise.

Answer 1

After debugging for sometimes, I found a solution. In your code snippet, first you are calling the play() function and storing in a variable to avoid the promise rejection I believe. That's the magic trick for this issue. But in the promise handling, you are trying to call the same video.play() function again which raises the error above. Instead do nothing for video autoplay or any customization according to your preference but at least not calling the play() function. Here's the updated cleaner version of your code snippet (opting out the comments).

peer.on('call', (call) => {
    if (navigator.mediaDevices.getUserMedia){
        navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 1280, height: 720 } })
            .then((stream)=>{
                document.getElementById('myVideo').srcObject = stream;
                var myVideoPromise = document.getElementById('myVideo').play();
                if (myVideoPromise!==undefined){
                    myVideoPromise
                        .then(_=>{
                            // do nothing here for autoplay    
                        }).catch(error => {
                            console.log(error);
                        });
                }
                call.answer(stream);
                call.on('stream', (remoteStream) => {
                document.getElementById('remoteVideo').srcObject = remoteStream;
                var remoteVideoPromise=document.getElementById('remoteVideo').play(); 
                if (remoteVideoPromise!==undefined){
                    remoteVideoPromise
                        .then(_=>{
                            // do nothing here for autoplay   
                        }).catch(error => {
                            console.log(error);
                        });
                }
            })
        })
    }
});
const videoCall = () => {
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({audio: true, video:{width: 1280, height: 720}})
            .then((stream) => {
                document.getElementById('myVideo').srcObject=stream;
                var myVideoPromise = document.getElementById('myVideo').play();
                if (myVideoPromise!==undefined) {
                    myVideoPromise
                        .then(_ => {
                            // do nothing for autoplay 
                        })
                        .catch(error => {
                             console.log(error);
                        });
                }
                const call = peer.call(myconnection.friendId, stream);            
                call.on('stream', (remoteStream) => {
                   document.getElementById('remoteVideo').srcObject = remoteStream;
                   var remoteVideoPromise = document.getElementById('remoteVideo').play();
                   if (remoteVideoPromise!==undefined){
                       remoteVideoPromise
                           .then(_ => {
                               // do nothing for autoplay    
                           }).catch(error => {
                               console.log(error);
                           });
                   }
        });
    })
}