React中使用simple-peer无法在Chrome显示远端流问题求助

可能原因 #

Chrome的媒体自动播放策略比Firefox更严格，默认阻止无用户交互触发的媒体播放；另外视频元素缺少必要属性也会导致无法渲染流内容。

具体解决步骤 #

1. 给视频元素添加必要属性 #

在JSX的视频标签中添加autoPlay、playsInline属性，这是Chrome兼容媒体播放的基础配置：

<video 
  ref={partnerVideo} 
  autoPlay 
  playsInline 
  controls={false} // 根据需求决定是否显示播放控件
></video>

注：playsInline用于避免视频自动进入全屏模式，同时适配移动端和桌面端的播放规范。

2. 手动触发播放并处理错误 #

Chrome要求媒体播放必须由用户手势（如点击按钮）触发，即使设置了autoPlay，也需要在获取流后手动调用play()，同时捕获可能的自动播放阻止错误：
修改on('stream')回调逻辑：

peer.on("stream",  (stream: any) => {
  if (partnerVideo.current) {
    partnerVideo.current.srcObject = stream;
    // 手动触发播放，适配Chrome的自动播放限制
    partnerVideo.current.play().catch(err => {
      console.error("视频播放失败:", err);
      // 若自动播放被阻止，可提示用户点击视频进行播放
    });
  }
});

3. 确保Peer实例的生命周期稳定 #

当前代码中callPeer和acceptCall里的peer是局部变量，在React组件重渲染时可能被垃圾回收，导致后续流处理异常。可以用useRef保存Peer实例：

const peerInstance = useRef<any>(null);

// 在callPeer函数中：
peerInstance.current = initializePeerInstance({ initiator: true, stream: stream! });
peerInstance.current.on("signal", (data: any) => {
  socket.current.emit("callUser", {
    userToCall: id,
    signalData: data,
    from: yourID,
  });
});
// 其他事件监听逻辑...

// 在acceptCall函数中：
peerInstance.current = initializePeerInstance({ initiator: false, stream: stream! });
peerInstance.current.on("signal", (data: any) => {
  socket.current.emit("acceptCall", { signal: data, to: caller });
});
// 其他事件监听逻辑...

4. 验证流的有效性 #

在on('stream')回调中打印流的轨道信息，确认视频轨道存在：

peer.on("stream",  (stream: any) => {
  console.log("收到的媒体轨道:", stream.getTracks());
  // 后续设置srcObject和播放逻辑
});

如果输出中包含video类型的轨道，说明流本身无问题；若没有，需检查发送端的媒体捕获逻辑。

额外排查点 #

• 打开Chrome开发者工具的Media面板，查看视频流的加载状态，是否有报错信息；
• 确认用户已授予摄像头/麦克风权限（Chrome地址栏左侧可查看权限状态）。

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