部署Ubuntu服务器后mediasoup WebRTC远程视频流黑屏如何解决？

常见原因及对应解决方法 #

1. 服务器网络端口与NAT配置问题 #

• mediasoup依赖UDP端口传输RTP媒体流，默认你配置的rtcMinPort~rtcMaxPort范围端口如果没有被Ubuntu防火墙、云服务商安全组放行，会导致ICE连通失败，媒体流无法传输。
  解决方法：
  1. 确认你的mediasoup配置的RTP端口范围，比如配置的是10000-20000，执行命令放行UDP端口：ufw allow 10000:20000/udp，同时放行TCP信令端口（比如你的Node服务端口、HTTPS 443端口）
  2. 如果使用阿里云、腾讯云等云服务器，还要去服务商后台的安全组配置页面，放行同样的UDP端口范围和TCP端口
• 服务器有NAT网络转换时，mediasoup没有配置announcedIp，会把内网IP作为ICE候选返回给客户端，公网用户无法连通。
  解决方法：在Worker和WebRtcTransport配置中增加公网IP配置，示例代码：

  const worker = await mediasoup.createWorker({
    rtcMinPort: 10000,
    rtcMaxPort: 20000,
    announcedIp: '你的服务器公网IP'
  })
  

2. SSL与反向代理配置问题 #

• 线上环境使用HTTPS访问时，WebRTC要求信令必须走WSS协议，如果你用了自签名证书、证书过期/域名不匹配，或者Nginx反向代理没有正确配置WebSocket转发，都会导致信令交互失败，媒体流无法建立连接。
  解决方法：
  1. 用正规CA签发的SSL证书（比如Let's Encrypt免费证书），不要用自签名证书
  2. 配置Nginx反向代理时增加WebSocket支持，示例配置片段：

  location /ws {
    proxy_pass http://127.0.0.1:你的Node服务端口;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
  }
  

3. Pipe Transport配置错误 #

• 本地测试时Pipe Transport用本地IP即可正常传输，线上如果是多Worker部署、跨实例Pipe传输，没有配置正确的IP，或者对应端口没有放行，会导致媒体流在服务端内部传输中断。
  解决方法：
  • 创建Pipe Transport时也要配置对应announcedIp，同服务器多Worker用127.0.0.1即可，跨服务器部署要填对应实例的公网IP
  • 放行Pipe Transport用到的TCP/UDP端口，规则和RTP端口范围一致

4. 客户端播放策略限制 #

• 部分浏览器有自动播放限制，必须要有用户交互、视频标签配置了正确属性才能播放视频，本地测试时因为域名权限宽松可以正常播放，线上严格策略下会被拦截导致黑屏。
  解决方法：
  • Angular的远程视频标签加上必填属性：<video #remoteVideo autoplay playsinline muted></video>，不需要静音的话可以在用户点击交互后取消muted属性
  • 绑定媒体流后手动触发播放，捕获异常处理：

  remoteVideo.nativeElement.srcObject = remoteStream;
  try {
    await remoteVideo.nativeElement.play();
  } catch (err) {
    // 展示播放按钮，引导用户点击后再触发播放
  }
  

快速排查技巧：打开Chrome浏览器的chrome://webrtc-internals页面，可以查看ICE连接状态、媒体流收发包统计，快速定位是连通性问题还是媒体流传输问题。

内容的提问来源于stack exchange，提问作者Dev 1