如何在Chrome中为WebRTC调用者设置远程描述而不会出现错误？

Question

我希望逻辑上没有缺陷。

步骤1：呼叫者创建报价

步骤2：呼叫者设置localDescription

步骤3：呼叫者将描述发送给被呼叫者

// ------------------------------------------------ ------ //

步骤4：被叫方收到要约集的远程描述

步骤5：被叫方创建答案

步骤6：被叫方设置本地描述

步骤7：被呼叫者将说明发送给呼叫者

// ------------------------------------------------ ------ //

步骤8：呼叫者收到答案并设置远程描述

这是上面的代码

const socket = io();
const constraints = {
  audio: true,
  video: true
};
const configuration = {
  iceServers: [{
    "url": "stun:23.21.150.121"
  }, {
    "url": "stun:stun.l.google.com:19302"
  }]
};

const selfView = $('#selfView')[0];
const remoteView = $('#remoteView')[0];

var pc = new RTCPeerConnection(configuration);

pc.onicecandidate = ({
  candidate
}) => {
  socket.emit('message', {
    to: $('#remote').val(),
    candidate: candidate
  });
};

pc.onnegotiationneeded = async () => {
  try {
    await pc.setLocalDescription(await pc.createOffer());
    socket.emit('message', {
      to: $('#remote').val(),
      desc: pc.localDescription
    });
  } catch (err) {
    console.error(err);
  }
};

pc.ontrack = (event) => {
  // don't set srcObject again if it is already set.
  if (remoteView.srcObject) return;
  remoteView.srcObject = event.streams[0];
};

socket.on('message', async ({
  from,
  desc,
  candidate
}) => {
  $('#remote').val(from);
  try {
    if (desc) {
      // if we get an offer, we need to reply with an answer
      if (desc.type === 'offer') {
        await pc.setRemoteDescription(desc);
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        stream.getTracks().forEach((track) => pc.addTrack(track, stream));
        selfView.srcObject = stream;
        await pc.setLocalDescription(await pc.createAnswer());
        console.log(pc.localDescription);
        socket.emit({
          to: from,
          desc: pc.localDescription
        });
      } else if (desc.type === 'answer') {
        await pc.setRemoteDescription(desc).catch(err => console.log(err));
      } else {
        console.log('Unsupported SDP type.');
      }
    } else if (candidate) {
      await pc.addIceCandidate(new RTCIceCandidate(candidate)).catch(err => console.log(err));
    }
  } catch (err) {
    console.error(err);
  }
});


async function start() {
  try {
    // get local stream, show it in self-view and add it to be sent
    const stream = await requestUserMedia(constraints);
    stream.getTracks().forEach((track) => pc.addTrack(track, stream));
    attachMediaStream(selfView, stream);
  } catch (err) {
    console.error(err);
  }
}

socket.on('id', (data) => {
  $('#myid').text(data.id);
});


// this function is called once the caller hits connect after inserting the unique id of the callee
async function connect() {
  try {
    await pc.setLocalDescription(await pc.createOffer());
    socket.emit('message', {
      to: $('#remote').val(),
      desc: pc.localDescription
    });
  } catch (err) {
    console.error(err);
  }
}

socket.on('error', data => {
  console.log(data);
});

现在，此代码在执行步骤8时引发错误

DOMException：无法在'RTCPeerConnection'上执行'setRemoteDescription'：无法设置远程商品sdp：处于错误状态：kHaveLocalOffer

DOMException：无法在“ RTCPeerConnection”上执行“ addIceCandidate”：处理ICE候选者时出错

尝试调试，但未发现逻辑或代码中的任何缺陷。注意到一个奇怪的事情是，该pc对象有localDescription和currentLocalDescription，我想谁创造了答案必须同时说明类型为被叫answer，而是显示了localDescription要offer和currentLocalDescription类型answer。

我不知道它是否应该像我开始时那样表现。

提前致谢。

Answer 1

您的代码是正确的。这是Chrome中带有的长期错误negotiationneeded。

我已经在一个小提琴中对其进行了检测（右键单击并在两个相邻的窗口中打开，然后单击“其中一个”）。

在Firefox中，它可以工作。要约人协商一次，因为您一次添加了两个轨道（视频/音频）：

negotiating in stable
onmessage answer

并且，在'stable'答录器端，您在状态之外添加的曲目将添加到答案中：

onmessage offer
adding audio track
adding video track

但是在Chrome浏览器中，它坏了，negotiationneeded在要约上触发两次，每添加一条轨道一次：

negotiating in stable
negotiating in stable
onmessage offer
DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection':
  Failed to set remote offer sdp: Called in wrong state: kHaveLocalOffer
onmessage offer
DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection':
  Failed to set remote offer sdp: Called in wrong state: kHaveLocalOffer
onmessage offer
DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection':
  Failed to set remote offer sdp: Called in wrong state: kHaveLocalOffer

然后negotiationneeded在答录器端开两次，这甚至没有进入'stable'状态：

onmessage offer
adding audio track
adding video track
negotiating in have-remote-offer
negotiating in have-remote-offer
onmessage offer
DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection':
  Failed to set remote offer sdp: Called in wrong state: kHaveLocalOffer

这些额外的事件导致在此处两端都看到的相互状态错误的破坏。

具体来说，Chrome违反了规范的两个部分：

1. “排队任务”以触​​发此事件。“在通常要同时对连接进行多次修改的常见情况下，排队可以防止需要协商的情况过早触发。”

2. 如果连接的信令状态不是"stable"，请中止这些步骤[以触发事件]。

解决方法

解决这两个 Chrome错误需要（为了简短起见，请使用async/ await）：

let negotiating = false;
pc.onnegotiationneeded = async e => {
  try {
    if (negotiating || pc.signalingState != "stable") return;
    negotiating = true;
    /* Your async/await-using code goes here */
  } finally {
    negotiating = false;
  }
}