React PeerJs 构建视频聊天时出现问题：未捕获（承诺中）DOMException：play() 请求被新的加载请求中断

Question

我正在使用 PeerJs 库构建一个 React.Js 视频聊天应用程序。 当我尝试视频通话和接听电话时，我在 chrome 上收到此错误： 未捕获（承诺中）DOMException：play() 请求被新的加载请求中断。 我在网上查了一下，有人说不要使用 navigator.mediaDevices.getUserMedia({audio:true, video,true},(stream))，而是使用 then.(stream)。 但它并没有解决问题。有谁知道错误的真正含义是什么以及造成此错误的原因是什么以及如何解决它？ 视频通话和接收功能的代码片段：

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();
            });
            })
        }
    }

我尝试使用 getElementById 而不是 useRef 来获取元素，并尝试在 Promise 中调用流。

Answer 1

经过一段时间的调试，我找到了解决方案。 在您的代码片段中，首先您调用 play() 函数并存储在变量中以避免我认为的承诺拒绝。这就是解决这个问题的秘诀。但在承诺处理中，您尝试再次调用相同的 video.play() 函数，这会引发上述错误。相反，根据您的喜好对视频自动播放或任何自定义不执行任何操作，但至少不调用 play() 函数。

这是代码片段的更新后的更清晰版本（选择退出注释）。 peer.on('呼叫', (呼叫) => { 如果（navigator.mediaDevices.getUserMedia）{ navigator.mediaDevices.getUserMedia({ 音频: true, 视频: { 宽度: 1280, 高度: 720 } }) .then((流)=> { document.getElementById('myVideo').srcObject = 流; var myVideoPromise = document.getElementById('myVideo').play(); 如果（myVideoPromise！==未定义）{ 我的视频承诺 .then(_ => { // 对自动播放不执行任何操作 }) .catch（错误=> { 控制台.log(错误); }); } 呼叫.answer(流); 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);
                    });
            }
            })
        })
    }
});
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);
                           });
                   }
        });
    })
}

}