Simple Peer视频流在proximity视频通话Web应用中无法播放问题排查

问题根因 #

• 最直接的故障触发点：当两个用户距离超出阈值时，你的渲染逻辑直接卸载了对应peer的<Video>组件，原本绑定在该组件video元素上的媒体流关联会直接失效。当用户重新靠近、组件重新挂载后，新增的video元素没有重新关联peer实例里已有的媒体流，因此显示空白。
• 额外排查点：如果你的业务逻辑中存在「距离超出阈值主动销毁peer连接/关闭媒体轨道」的逻辑，重新靠近时没有重新走WebRTC信令协商、重建连接的流程，也会导致空白流问题。

修复方案 #

方案1（最简易，优先尝试）：不卸载Video组件，仅控制显隐 #

不要在超出阈值时渲染空div，改为给Video外层加CSS控制显隐，DOM元素不销毁，媒体流绑定关系会一直保留：

{ peers.map((peer) => {
  return (
    <div style={{ display: proximity(peer) ? 'block' : 'none' }} key={peer.peerID}>
      <Video peer={ peer.peer } />
    </div>
  );
})}

方案2：如果必须卸载组件，需保证

确保你封装的<Video>组件在挂载时，会主动从传入的peer实例中获取媒体流，绑定到自身的video元素上，组件内部逻辑参考：

// Video组件内部逻辑示例
useEffect(() => {
  if (props.peer && videoRef.current) {
    // 先取peer已有的媒体流绑定
    const existStream = props.peer.stream || null
    if (existStream) {
      videoRef.current.srcObject = existStream
    }
    // 监听后续新的流事件
    const handleStream = (stream) => {
      videoRef.current.srcObject = stream
    }
    props.peer.on('stream', handleStream)
    return () => {
      props.peer.off('stream', handleStream)
    }
  }
}, [props.peer])

额外优化建议 #

你当前的proximity函数可以优化减少遍历次数，性能更好，不影响原有功能：

const proximity = (peer) => {
  if (peer.peerID === socket.id) return false;
  const currentUser = users.find(u => u.id === socket.id);
  const targetPeer = users.find(u => u.id === peer.peerID);
  if (!currentUser || !targetPeer) return false;
  return Math.abs(targetPeer.x - currentUser.x) < 100 && Math.abs(targetPeer.y - currentUser.y) < 100;
}

另外不建议在距离超出阈值时主动销毁peer实例，用户频繁移动的场景下反复重建连接会产生很高的性能开销和延迟，仅控制视频显隐是最优方案。

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