如何在两台不同电脑上运行WebRTC Demo及教程推荐咨询

阿华AIGC实验室

2026-5-19

跨设备运行WebRTC Google Codelabs Demo的方法

先给你理清楚核心原因：本地同一台电脑能正常跑，是因为Demo默认用了仅限本地的信令机制（比如页面间postMessage、localStorage，甚至直接内存通信），而且浏览器对localhost的安全限制非常宽松。跨设备运行的话，必须解决三个核心问题：信令服务器、网络可达性、安全上下文。下面是具体操作步骤：

一、替换本地信令为网络信令服务器

绝大多数Codelabs的Demo为了简化本地测试，用的是仅限同一机器的信令方式，跨设备必须换成网络信令服务器来交换SDP和ICE候选（这是WebRTC建立连接的核心数据）。

如果你不想自己搭建，很多Demo里其实已经预留了切换到公共信令服务器的选项（比如有些Demo里有输入框让你填写信令服务器地址），找一下相关配置项即可。

想自己动手的话，用Node.js搭个简易WebSocket信令服务器超简单：

初始化项目：npm init -y，然后安装ws模块：npm install ws

编写server.js文件：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
  ws.on('message', (data) => {
    // 把收到的消息转发给所有其他连接的客户端
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
});

启动服务器：node server.js，然后把Demo里的信令代码改成连接到ws://你的局域网IP:8080。

二、让Demo服务在局域网内可访问

原来的服务器默认绑定127.0.0.1（仅限本地访问），得改成绑定所有网卡：

如果用Python的HTTP服务器：python -m http.server 8887 --bind 0.0.0.0
如果用http-server工具：http-server -p 8887 -a 0.0.0.0
找到你的电脑的局域网IP（Windows用ipconfig，macOS/Linux用ip addr），另一台设备直接访问http://你的局域网IP:8887即可。

三、搞定安全上下文限制

现代浏览器要求WebRTC必须在安全上下文（HTTPS或localhost）下运行：

局域网内用HTTP的话，Chrome等浏览器可能会允许，但Firefox可能直接禁用WebRTC功能，所以最好配置HTTPS服务：
1. 用openssl生成自签名证书：
```
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
```
2. 用支持HTTPS的服务器启动，比如Node.js的https模块，或者http-server加--ssl --cert cert.pem --key key.pem参数。
3. 另一台设备访问时会提示证书不安全，手动信任即可。

四、检查防火墙和网络

确保你的电脑防火墙允许8887端口（以及信令服务器的端口，比如8080）的入站连接，不然另一台设备连不上。
如果两台设备不在同一局域网，还需要在路由器上做端口映射，把路由器的公网端口转发到你电脑的8887和信令服务器端口，然后用公网IP访问（这个步骤比较复杂，建议先在同一局域网测试成功后再尝试）。