无法在 \'RTCPeerConnection\' 上执行 \'setLocalDescription\'：无法设置本地报价 sdp：在错误状态下调用：have-remote-offer答案

【问题标题】：Failed to execute 'setLocalDescription' on 'RTCPeerConnection': Failed to set local offer sdp: Called in wrong state: have-remote-offer无法在 \'RTCPeerConnection\' 上执行 \'setLocalDescription\'：无法设置本地报价 sdp：在错误状态下调用：have-remote-offer
【发布时间】：2022-08-21 19:49:39
【问题描述】：

在调用另一个用户时收到此错误 \“未捕获（承诺中）DOMException：无法在 \'RTCPeerConnection\' 上执行 \'setLocalDescription\'：无法设置本地报价 sdp：在错误状态下调用：have-remote-offer\”。

接收者能够看到本地和远程流，但调用者看不到远程流。

                  switch(type){
                    case \'client-candidate\':
                        if(pc.localDescription){
                            await pc.addIceCandidate(new RTCIceCandidate(data));
                        }
                    break;

                    case \'is-client-ready\':
                        if(!pc){
                            await getConn();
                        }
                        if(!localStream){
                            await getCam();
                        }

                        if(pc.iceConnectionState === \'connected\'){
                            send(\'clent-already-oncall\', null, presentUserId, null);
                        }else{
                            displayCall(incomingData);

                            $(document).on(\'click\', \'#declineBtn\', function(){
                                send(\'client-rejected\', sendTo, currentUserName, presentUserId, null);
                                $(\'#incomingCallModel\').modal(\'toggle\');
                            });

                            $(document).on(\'click\', \'#answerBtn\', function(){
                                
                                send(\'client-is-ready\', sendTo, currentUserName, presentUserId, null);
                                $(\'#incomingCallModel\').modal(\'toggle\');
                                createOffer(sendTo, presentUserId);
                            });
                        }
                    break;

                    case \'client-answer\':
                        if(pc.localDescription){
                            await pc.setRemoteDescription(data);
                        }
                    break;

                    case \'client-offer\':
                        createAnswer(sendTo, presentUserId, data);
                    break;

                    case \'client-is-ready\':
                        createOffer(sendTo, presentUserId);
                    break;

                    case \'client-rejected\':
                        alert(\'Client has rejected your call\');
                    break;

                    case \'clent-already-oncall\':
                        setTimeout(() => {
                            alert(\'client is on other call\');
                            window.location.reload(true);
                        }, 2000);
                    break;
                }

让电脑；

        function getConn(){
            if(!pc){
                pc = new RTCPeerConnection();
            }
        }

        async function getCam(){
            try{
                if(!pc){
                    await getConn();
                }
                mediaStream = await window.navigator.mediaDevices.getUserMedia(mediaConst);
                localVideo.srcObject = mediaStream;
                localStream = mediaStream;
                localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
            }catch(error){
                // alert(\'Camera not found\')
                console.log(error);
            }
        }

        function displayCall(incomingData){
            $(\'.incoming-call-user-name\').text(incomingData.callingUserName);

            let calligUserProfile = $(\"#allUserList\").find(\"[data-id=\'\" + incomingData.callingUserId + \"\']\").data(\"profile\");
            $(\'.calling-user-pic\').attr(\'src\', calligUserProfile);
            $(\'#incomingCallModel\').modal(\'show\');
        }

        function send(type, sendTo, callingUserName, callingUserId, data){
            socket.emit(\'sendChatRequest\', JSON.stringify({
                type: type,
                receiverId: sendTo,
                callingUserName: callingUserName,
                callingUserId: callingUserId,
                data: data,
            }));
        }

        async function createOffer(sendTo, calledById){
            if(!pc){
                await getConn(); 
            }
            if(!localStream){
                await getCam();
            }
            await pc.createOffer(options);
            await sendIceCandidate(sendTo,calledById);
            await pc.setLocalDescription(pc.localDescription);
            send(\'client-offer\', sendTo, currentUserName, calledById, pc.localDescription);
        }

        async function sendIceCandidate(sendTo, calledById){
            pc.onicecandidate = event => {
                if(event.candidate !== null){
                    send(\'client-candidate\', sendTo, currentUserName, calledById, event.candidate);
                }
            }
            
            pc.ontrack = event => { 
                console.log(event)
                $(\'#video\').removeClass(\'hide\');
                $(\'#video\').addClass(\'show\');
                $(\'#videoCall\').addClass(\'hide\');

                if (remoteVideo.srcObject) return;

                remoteVideo.srcObject = event.streams[0];
            }
        }

        async function createAnswer(sendTo, presentUserId, data){
            if(!pc){
                await getConn(); 
            }
            if(!localStream){
                await getCam();
            }
            
            await sendIceCandidate(sendTo, presentUserId);
            await pc.setRemoteDescription(data);
            await pc.createAnswer();
            await pc.setLocalDescription(pc.localDescription);
            send(\'client-answer\', sendTo, currentUserName, presentUserId, pc.localDescription);
        }

标签： socket.io webrtc videocall

【解决方案1】：

可能的原因。

第一次设置远程应答后，请检查您是否尝试再次设置远程应答。
检查您的onTrack 事件是否在调用方触发。

onTrack 未触发的可能原因

在创建报价或答案之前检查您是否将本地曲目添加到您的同行。
在offer、answer、candidate发生交换之前，确保您的addTrack在内存中。

【讨论】：