WebRTC 卡在连接状态

Question

我已经成功地将 WebRTC 连接的提议、答案和候选冰从 A 传递到 B。此时，连接卡在 "connecting" 状态。启动器（A）似乎超时或一段时间后切换到"failed"状态，而其远程（B）永久保持在"connecting"状态。

任何帮助将不胜感激。

创建对等点（A 和 B）：

let peer = new RTCPeerConnection({
    iceServers: [
        {
            urls: [
                "stun:stun1.l.google.com:19302",
                "stun:stun2.l.google.com:19302",
            ],
        },
        {
            urls: [
                "stun:global.stun.twilio.com:3478?transport=udp",
            ],
        },
    ],
    iceCandidatePoolSize: 10,
});

创建报价 (A)：

peer.onnegotiationneeded = async () => {
    offer = await peer.createOffer();
    await peer.setLocalDescription(offer);
};

收集冰候选人（A）：

peer.onicecandidate = (evt) => {
    if (evt.candidate) {
        iceCandidates.push(evt.candidate);
    } else {
        // send offer and iceCandidates to B through signaling server
        // this part is working perfectly
    }
};

创建答案并填充候选冰 (B)：

await peer.setRemoteDescription(offer);

let answer = await this._peer.createAnswer();
await peer.setLocalDescription(answer);

// send answer back to A through signaling server

for (let candidate of sigData.iceCandidates) {
    await peer.addIceCandidate(candidate);
}

通过信令服务器 (A) 从 B 应答：

await peer.setRemoteDescription(answer);

检测连接状态变化（A和B）：

peer.onconnectionstatechange = () => {
    console.log("state changed")
    console.log(peer.connectionState);
}

另请注意，有两次成功连接，但我还没有看到它再次工作。

编辑：我忘了说我也在创建一个数据通道（没有这个onicecandidate 事件似乎不会调用）。在构造 RTCPeerConnection 并附加任何事件处理程序后立即调用它。

let channel = peer.createDataChannel("...", {
    id: ...,
    ordered: true,
});

编辑 2：正如@jib 建议的那样，我现在也在 B 收集候选冰并将它们送回 A 进行添加。但是，完全相同的问题仍然存在。

编辑 3：似乎在我第一次硬重新加载 A 的网页和 B 的网页时连接。连接停止工作，直到我再次硬重新加载。有谁知道为什么会这样？至少我应该能够暂时继续开发，直到我弄清楚这个问题。

编辑 4：我删除了我正在使用的 iceServers 并将 RTCPeerConnection 构造函数留空。不知何故，它现在更可靠了。但我还没有在 iOS Safari 上成功连接！

Answer 1

在两个浏览器窗口中打开this，然后点击其中一个窗口中的Connect 按钮。这是代码：

const pc = new RTCPeerConnection();

call.onclick = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({video:true,audio:true})
  video.srcObject = stream;
  for (const track of stream.getTracks()) {
    pc.addTrack(track, stream);
  }
};

pc.ontrack = ({streams}) => video.srcObject = streams[0];
pc.oniceconnectionstatechange = () => console.log(pc.iceConnectionState);
pc.onicecandidate = ({candidate}) => sc.send({candidate});
pc.onnegotiationneeded = async () => {
  await pc.setLocalDescription(await pc.createOffer());
  sc.send({sdp: pc.localDescription});
}

const sc = new localSocket(); // localStorage signaling hack
sc.onmessage = async ({data: {sdp, candidate}}) => {
  if (sdp) {
    await pc.setRemoteDescription(sdp);
    if (sdp.type == "offer") {
      await pc.setLocalDescription(await pc.createAnswer());
      sc.send({sdp: pc.localDescription});
    }
  } else if (candidate) await pc.addIceCandidate(candidate);
}

A 和 B 的来源相同。将 localSocket hack 替换为您喜欢的信号通道（例如 websocket）。

不要缓存 ICE 候选对象，因为这违背了 Trickle ICE 的目的。它可能在本地看起来很快，但在实际网络中，ICE 可能需要一些时间。

事实上，如果您延迟发送报价/答案，直到所有本地候选人都收集完毕，发送候选人是没有意义的，因为那时候选人已经嵌入报价/答案 (pc.localDescription)。

Answer 2

终于！几周后，我发现了这个问题，这在我的问题中包含的代码中并不明显，但对于遇到类似问题的任何人可能仍然有用。

我假设在onnegotiationneeded 事件触发并创建了提议/答案之后完成了冰收集。

由于这个不正确的假设，我在这个阶段与 ice 候选人一起发出了提议/答案，但非常频繁（根据我的经验，总是在 iOS Safari 中）此时尚未创建提议/答案。

我通过创建两个承诺来解决这个问题：a）完成 ice 候选人收集，b）创建提议/答案。我在两个 promise 上使用了Promise.all，当它们都完成时，我通过信令服务器一次性发送了 ice 候选和 offer/answer。

这行得通，但当然，将来我应该“涓涓”这些信息，通过发送零碎的信息，而不是等待一切完全完成。但是我以后会担心这个，因为目前我正在使用 HTTP 请求，这太麻烦了。

编辑：当包含iceServers 时，我的连接仍然总是卡住，所以我创建了一个new question。但是，当不包含 iceServers 时，本地连接现在是 100% 完全可靠的 :)