为什么我的 WebRTC 连接只能在本地网络上工作？

Question

我正在试验WebRTC，只是在data channel. 我有一个问题，当两个对等方都连接在同一个本地网络上时，聊天工作正常。同行尝试从不同网络连接的地方（我一直在用 2 台计算机进行测试，一台连接到我的家庭互联网网络，另一台通过我的手机 wifi 路由器连接）。

聊天的行为似乎很好，offer并且answer通过信令服务器正确发送。并且使用相同的信令服务器ice candidate也发送。

peer.onicecandidate = (iceEvent: RTCPeerConnectionIceEvent) => {
  if (iceEvent.candidate) {
    const message: ConnectionEvent = {
      type: ConnectionEventType.CANDIDATE,
      caller: null,
      callee: event.caller,
      room: event.room,
      data: iceEvent.candidate,
    };

    ws.send(message);
  } else {
    // All ICE candidates have been sent
  }
};

所以创建的对等方offer只发送ONE ice candidate，我认为这是问题，因为创建的对等方answer发送了两个 ice candidates。

这里有什么问题？我应该addIceCandidate什么时候打电话？

这是实施例console log与发送和收到数据

对等产品连接：

发送：连接对象{类型：“连接”，调用者：对象，被调用者：空，房间：对象，数据：空}

收到：连接对象{类型：“连接”，调用者：对象，被调用者：空，房间：对象，数据：空}

发送：OFFER对象{类型：“OFFER”，调用者：对象，被调用者：对象，房间：对象，数据：对象}

发送：候选对象{类型：“候选对象”，调用者：对象，被调用者：对象，房间：对象，数据：对象}

发送：候选对象{类型：“候选对象”，调用者：对象，被调用者：对象，房间：对象，数据：对象}

收到：ANSWER Object {type: "ANSWER", caller: Object, callee: Object, room: Object, data: Object}

收到：候选对象{类型：“候选对象”，调用者：对象，被调用者：对象，房间：对象，数据：对象}

对等创建答案：

发送：连接对象{类型：“连接”，调用者：对象，被调用者：空，房间：对象，数据：空}

收到：OFFER Object {type: "OFFER", caller: Object, callee: Object, room: Object, data: Object}

收到：候选对象{类型：“候选对象”，调用者：对象，被调用者：对象，房间：对象，数据：对象}

收到：候选对象{类型：“候选对象”，调用者：对象，被调用者：对象，房间：对象，数据：对象}

发送：ANSWER对象{类型：“ANSWER”，调用者：对象，被调用者：对象，房间：对象，数据：对象}

发送：候选对象{类型：“候选对象”，调用者：对象，被调用者：对象，房间：对象，数据：对象}

Answer 1

您需要使用STUN服务器连接本地网络：

STUN（通过网络地址转换器 [NAT] 的用户数据报协议 [UDP] 会话遍历）服务器允许 NAT 客户端（即防火墙后面的 IP 电话）设置对本地网络外部托管的 VoIP 提供商的电话呼叫。

例如对于谷歌 STUN 服务器：

var servers = { 'iceServers': [{ 'urls': 'stun:74.125.142.127:19302' }] };
//var  _iceServers = [{ url: 'stun:74.125.142.127:19302' }], // stun.l.google.com - Firefox does not support DNS names.

connection = new RTCPeerConnection(servers); 

你可以看看我的代码。

和网络应用程序本身：https : //signalrtc.com/

Answer 2

我同意上面提供的答案，但是当遇到对称 natting 时 STUN 会失败。

为了使其无缝工作，您需要有 TURN 服务器，它也适用于对称 natting。

实现保持不变，但它工作在 TCP 协议上，这意味着它跟踪传输的每个数据包。实现如下：

var servers = { 'iceServers':[{ 'urls': 'turn:<turn-server-address>' }] };
connection = new RTCPeerConnection(servers);

这种植入的作用是发送 TCP 封装的转向请求，这些请求被进一步解析并发送给接收者。