使用 PeerConnection 时处理 ICE 候选的过程？

Question

我已经用尽了所有可能来获得稳定的 WebRTC 实施，并希望获得一些建议。

已考虑处理跨浏览器工作连接的所有可能解决方案，例如：

• 等到所有候选人都收集完毕后再在 Chrome 浏览器上发送 SDP
• 收集候选人后立即发送他们，并在设置本地 sdp 后将他们添加到远程连接
• 在设置本地和远程描述后添加候选对象（远程和本地）
• 在收到候选人时添加报价候选人并将答案发回给候选人
• ice 失败时重置对等连接
• 其他（匆忙中）

基本上，我要求有人帮助提供图表或逐步处理冰的过程，以便为 chrome 和 firefox 跨浏览器提供有效的解决方案（两者都是最新的当前发布时间）。

在这一点上，我已经耗尽了对任何其他可能性的思考，如果能提供任何帮助，我将不胜感激。

谢谢， 十二月:)

Answer 1

我很同情你的挫败感。

对于 RTCPeerConnection，调用 createOffer() 和 setLocalDescription() 后，ICE 代理将开始收集 ICE 候选者。此时你可以决定是否使用 Trickle ICE，候选者一可用就被发送到远程对等点，或者你可以等待所有候选者被收集（大部分教程我来cross 似乎采用了涓涓细流的方法，但错过了一些有关正确处理此问题的细节）。

涓流方法：

当触发 RTCPeerConnectionIceEvent 时有一个新的候选者可用：

peerConnection.onicecandidate = function(newRTCPeerConnectionIceEvent) {

    var newCandidate = newRTCPeerConnectionIceEvent.candidate;
    // send candidate to remote via signalling channel
}

在远端，候选人可以被添加到他们的对等连接中：

peerConnection.addIceCandidate(RTCIceCandidate);

如果您还没有在远程对等连接上调用 setRemoteDescription，我相信过早添加候选人会产生错误，因为这会在尚未设置时尝试将其添加到 remoteDescription。看到这个Errors when ICE Candidates are received before answer is sent。

非涓流方法：

您可以等待所有候选人聚集如下：

peerConnection.onicecandidate = function(newRTCPeerConnectionIceEvent) {

    if (newRTCPeerConnectionIceEvent.candidate === null) {

       // send the offer (generated previously) to the remote peer
       // the offer sdp should contain all the gathered candidates
    }
}

有关此技术的更多讨论，请参阅此链接：http://muaz-khan.blogspot.co.uk/2015/01/disable-ice-trickling.html（请参阅页面底部关于在报价已包含所有候选人时生成答案 sdp 的评论）。

请注意，信令机制可能会影响您的方法，即您的信令中是否存在任何明显的延迟。我认为涓流方法假设您使用的是低延迟信令，因为它旨在减少呼叫建立时间。

Answer 2

我发现这个功能在你的情况下很有用:)

function waitForAllICE(pc) {
  return new Promise((fufill, reject) => {
    pc.onicecandidate = (iceEvent) => {
      if (iceEvent.candidate === null) fufill()
    }
      setTimeout(() => reject("Waited a long time for ice candidates..."), 10000)
  }) 
} 

然后你可以做一些类似的事情

pc.createOffer()
  .then(offer => pc.setLocalDescription(offer))
  .then(  ()  => waitForAllICE(pc))
  .then(  ()  => signallingWire.send(pc.localDescription))
  .catch(  e  => smartErrorHandling(e))