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

Question

我正在试验 WebRTC，只是在 数据通道 上建立聊天。我有一个问题，即当两个对等方都连接到同一本地网络时，聊天才能正常进行。同行尝试从不同网络连接的地方(我一直在用两台电脑测试这个，一台连接到我的家庭互联网网络，另一台通过我的手机 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 ？

这是包含发送和接收数据的示例控制台日志

同行提供连接:

sent: CONNECT Object {type: "CONNECT", caller: Object, callee: null, room: Object, data: null}

recieved: CONNECT Object {type: "CONNECT", caller: Object, callee: null, room: Object, data: null}

sent: OFFER Object {type: "OFFER", caller: Object, callee: Object, room: Object, data: Object}

sent: CANDIDATE Object {type: "CANDIDATE", caller: Object, callee: Object, room: Object, data: Object}

sent: CANDIDATE Object {type: "CANDIDATE", caller: Object, callee: Object, room: Object, data: Object}

recieved: ANSWER Object {type: "ANSWER", caller: Object, callee: Object, room: Object, data: Object}

recieved: CANDIDATE Object {type: "CANDIDATE", caller: Object, callee: Object, room: Object, data: Object}

同行创建答案:

sent: CONNECT Object {type: "CONNECT", caller: Object, callee: null, room: Object, data: null}

recieved: OFFER Object {type: "OFFER", caller: Object, callee: Object, room: Object, data: Object}

recieved: CANDIDATE Object {type: "CANDIDATE", caller: Object, callee: Object, room: Object, data: Object}

recieved: CANDIDATE Object {type: "CANDIDATE", caller: Object, callee: Object, room: Object, data: Object}

sent: ANSWER Object {type: "ANSWER", caller: Object, callee: Object, room: Object, data: Object}

sent: CANDIDATE Object {type: "CANDIDATE", caller: Object, callee: Object, room: Object, data: Object}

Answer 1

您需要使用 STUN用于连接外部本地网络的服务器:

A STUN (Session Traversal of User Datagram Protocol [UDP] Through Network Address Translators [NATs]) server allows NAT clients (i.e. IP Phones behind a firewall) to setup phone calls to a VoIP provider hosted outside of the local network.

例如 Google 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); 

可以看看my code .

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