如何使 webrtc 应用程序在互联网上运行

Question

大家！我正在尝试使用 nodejs 学习 javascript 和 webrtc。我在此链接https://codelabs.developers.google.com/codelabs/webrtc-web/#6 中遵循谷歌代码实验室的教程。源代码在这里https://github.com/googlecodelabs/webrtc-web/tree/master/step-05。一切都很好，但现在我想尝试看看它是否可以在互联网上运行。我学会了在 Heroku 上部署网络。 https://simple-videochat-test.herokuapp.com/。但是我收到了这个错误：

Access to XMLHttpRequest at 'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913' from origin 'https://simple-videochat-test.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

我检查了一下，发现服务器不再工作了。因此，我尝试将此代码中当前为 apprtc 工作的另一个转向服务器添加到 main.js 文件中：

var pcConfig = {
      'iceServers': [
    {
      'urls': 'stun:stun.l.google.com:19302'
    },
    {
      'urls': 'turn:192.158.29.39:3478?transport=udp',
      'credential': 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
      'username': '28224511:1379330808'
  },
  {
      'urls': 'turn:192.158.29.39:3478?transport=tcp',
      'credential': 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
      'username': '28224511:1379330808'
   }
  ]
};

nodejs 的 package.json 如下：

{
    "name": "webrtc-codelab",
    "version": "0.0.1",
    "description": "WebRTC codelab",
    "scripts": {
    "start": "node index.js"
    },
    "dependencies": {
       "node-static": "^0.7.10",
       "socket.io": "^2.0.4"
    }
}

我可以看到客户端收到来自对方的消息，但没有视频显示。有人能帮我一下吗？对不起，如果我的英语不好。我不是母语人士。谢谢

Answer 1

检查您的 html 文件中是否有类似 <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-eval' 'unsafe-inline' 'self' data: gap: ws: 'https://simple-videochat-test.herokuapp.com'> 的 Content-Security-Policy 标记，并在其中添加“https://simple-videochat-test.herokuapp.com”，如上所示。

Answer 2

环顾四周后，我设法让它工作了！我把它放在这里，这样以后任何像我这样的新手都可以运行它。 首先是package.json。原来我忘了添加 os 包。

{
    "name": "webrtc-codelab",
    "version": "0.0.1",
    "description": "WebRTC codelab",
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "node-static": "^0.7.10",
        "socket.io": "^2.0.4",
        "os": "0.1.1"
    }
}

2。在 index.js 文件中设置服务器的端口，不要像示例中那样只使用端口：8080。

var PORT = process.env.PORT || 8080;
var fileServer = new(nodeStatic.Server)();
var app = http.createServer(function(req, res) {
    fileServer.serve(req, res);
}).listen(PORT);

这个文件的其他一切都是一样的。 3. 在文件 main.js 中，添加我的问题中的 iceservers。接下来将这一行从

    pc = new RTCPeerConnection(null);

到

    pc = new RTCPeerConnection(pcConfig);

就是这样。谢谢大家帮助我。大家可以去app链接测试一下。它仍然需要一些调整，但对于像我这样的新手来说至少是一个开始。

更新：像上面那样设置 RTCPeerConnection 会导致连接到同一个 wifi 的 2 台电脑无法相互连接。所以我把它改成

if (location.hostname !== 'localhost') {
  pc = new RTCPeerConnection(pcConfig);
} else {
  pc = new RTCPeerConnection(null);
}