WEBRTC教程:局域网怎么调试，http://172.19.18.101:8080 ,无法访问摄像头和麦克风，请检查权限

在局域网中使用 WebRTC 时，无法访问摄像头和麦克风通常是因为浏览器的安全策略限制了 getUserMedia API 的使用。如果你在非 localhost 或非 HTTPS 环境下访问网页，浏览器会阻止访问摄像头和麦克风。

解决方案

在局域网中调试 WebRTC 时，你有几个选项来解决这个问题：

1. 使用 localhost 访问

大多数浏览器允许在 localhost 上使用 getUserMedia，即使没有 HTTPS。所以你可以在服务器和客户端同一台机器上使用 localhost 进行测试。

示例：

• 访问 http://localhost:8080 进行调试。
• 如果在局域网的其他机器上访问，这种方法不起作用。

2. 配置 HTTPS 证书

如果你需要在局域网的 IP 地址上（如 http://172.19.18.101）进行访问，那么使用 HTTPS 是解决方案之一。通过配置 HTTPS，你可以避免浏览器的安全限制。

步骤 1: 生成自签名证书（适用于本地开发）

1. 使用 openssl 生成自签名证书：

   openssl req -nodes -new -x509 -keyout server.key -out server.cert
   

   • server.key：服务器的私钥。
   • server.cert：自签名的证书。

2. 你可以用这些证书在服务器上配置 HTTPS。

步骤 2: 启动 HTTPS 服务器

如果你使用的是 http-server，可以用生成的证书来启动 HTTPS 服务器：

http-server -S -C server.cert -K server.key -p 8080

这样，你可以在局域网中使用 https://172.19.18.101:8080 进行访问。

3. 使用 ngrok 进行调试

ngrok 是一个方便的工具，可以创建一个 HTTPS 隧道，即使你在局域网中，它也可以为你提供一个 HTTPS 地址。

步骤：

1. 安装 ngrok：

   npm install -g ngrok
   

2. 使用 ngrok 创建 HTTPS 隧道：

   ngrok http 8080
   

3. ngrok 会生成一个 HTTPS 的 URL，你可以使用这个 URL 在任何设备上访问你的服务器。

4. 使用 chrome://flags 调试

在 Chrome 浏览器中，有一种方法可以关闭 HTTPS 限制（仅用于调试）。

1. 在地址栏输入 chrome://flags。
2. 搜索 Insecure origins treated as secure。
3. 在 Insecure origins treated as secure 中添加你的局域网 IP 地址，例如：http://172.19.18.101。
4. 重启 Chrome 浏览器。

注意：这种方法只适用于调试环境，不能用于生产环境。

5. 使用 Firefox 进行调试

Firefox 通常对本地 IP 地址的安全限制要比 Chrome 宽松一些，可以尝试使用 Firefox 进行调试，看看是否可以绕过安全限制。

6. 调试模式 (仅适用于开发环境)

如果你只是做开发调试，可以启动浏览器的无安全模式来绕过摄像头和麦克风的限制。

在 Chrome 中启动无安全模式（不推荐长期使用）：

1. 关闭所有 Chrome 浏览器窗口。

2. 使用终端（Windows）或命令行（Linux/Mac），启动 Chrome：

   Windows：

   chrome.exe --disable-web-security --user-data-dir="C:\chrome-dev"
   

   Mac/Linux：

   google-chrome --disable-web-security --user-data-dir="/tmp/chrome-dev"
   

注意：这种方法仅限于开发调试环境，不能在生产环境使用。

总结

1. 最推荐的方法是使用 HTTPS 进行局域网调试，浏览器对 HTTPS 环境支持摄像头和麦克风访问。
2. 生成自签名证书 适用于开发调试，确保所有设备可以通过 HTTPS 访问。
3. 使用 ngrok 创建一个 HTTPS 隧道也是非常便捷的方法。
4. 在调试环境可以尝试关闭浏览器的安全限制，但仅限开发时使用。

如果你决定使用 HTTPS 而遇到问题，可以提供更多的错误信息或日志，我可以进一步帮助你。