WebRTC 视频在本地工作，但不能在远程工作

Question

涉及到相当多的代码，所以我把我拥有的东西扔到了一个临时的 github 仓库中：

https://github.com/stevendesu/webrtc-failure

我正在学习 WebRTC，并且长期想做一些花哨的事情，但现在我从简单的开始：将视频从一台计算机发送到另一台计算机。不幸的是，这失败了。这是我到目前为止设置的内容...

1. 在我拥有的开发服务器上，我安装了coturn 作为 STUN/TURN 服务器
2. 我创建了两个页面：broadcast.html 和 watch.html。前者创建媒体流并（使用 Socket.IO）将连接详细信息发送到信令服务器。后者从信令服务器获取连接详细信息并尝试观看流

运行npm install 后，您可以npm start 运行服务器并通过localhost:2017 访问它。

这就是工作原理：

• 打开broadcast.html 后，系统会提示您输入广播ID。您可以在此处输入任何内容，但我通常只输入一个递增的数字 - 所以我以“1”开头
• 输入广播 ID 并稍作延迟后，您会在屏幕上看到网络摄像头源。查看控制台，您可以看到已与 Socket.IO 服务器交换了几条消息
• 如果您在新选项卡中打开 watch.html，系统会提示您输入广播 ID。输入与之前相同的 ID
• 输入 ID 并稍作延迟后，您将在新选项卡上看到您的网络摄像头源。查看控制台，您可以看到早期的 ICE 候选人和报价详细信息是由 Socket.IO 服务器发送的，并且观察者回复了答案
• 返回到广播选项卡，您可以验证是否收到并处理了答案。现已建立连接
• 对于奖励积分，pc 变量在全局范围内 (PeerConnection)，因此您可以在控制台中建立 RTCDataChannel 并直接在选项卡之间发送消息（绕过 Socket.IO 服务器）

以下是不起作用：

• 目前（我知道为什么会这样，所以不用担心）只有第一个在watch.html 页面中输入 ID 的人才能真正看到广播。它不是“广播”，它只是点对点，一旦建立了一个连接，以后的连接就会失败
• 我的问题：如果我从不同的计算机或设备（在同一网络或不同的网络上）打开 watch.html，则视频永远不会播放

在后一种情况下，如果您查看控制台，您会看到要约和候选冰块被传送给观察者，观察者生成答案，答案被发送回广播公司，观察者看到媒体流添加到 PeerConnection。此媒体流被转换为 blob URL 并指定为视频元素的来源。

我正处于不知道如何进步的地步。我不知道为什么视频没有显示。

Answer 1

您的 watch.js 不会发出候选冰。这是可能的原因之一。如果这没有帮助，您可以使用 chrome://webrtc-internals 找出发生了什么——请参阅 here 了解如何解释发生了什么。

您可能还想研究对代码进行现代化改造。 https://webrtc.github.io/samples/src/content/peerconnection/pc1/ 是一个相当简单的现代 WebRTC 代码示例，它使用了 Promise 和其他东西，例如使用 srcObject 而不是已弃用的 URL.createObjectURL。