Mac版Safari中Simple Peer(WebRTC)+ReactJS视频通话单视频播放问题求助

这问题我之前帮好几个开发者排查过，Safari对WebRTC的媒体流处理确实有不少和Chrome/Firefox不一样的细节，尤其是多视频标签的场景。结合你的描述，我整理了几个针对性的解决方案，你可以逐一尝试：

1. 确保视频标签添加关键属性 #

Safari对视频自动播放和内嵌播放的限制比其他浏览器严格，必须给两个视频标签加上playsInline（React中用驼峰式playsInline），同时给本地视频设置muted={true}——既避免回声，也符合Safari的自动播放规则（静音视频更容易触发自动播放）。

示例代码：

<video
  ref={remoteVideoRef}
  playsInline
  autoPlay
  muted={false}
  style={{ width: '45%', margin: '0 2.5%' }}
/>
<video
  ref={localVideoRef}
  playsInline
  autoPlay
  muted={true}
  style={{ width: '45%', margin: '0 2.5%' }}
/>

2. 手动触发视频播放并处理轨道激活 #

Safari不会像Chrome那样自动处理媒体流的播放和轨道激活，你需要在设置srcObject后手动调用play()，并显式启用所有媒体轨道：

// 处理本地流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(localStream => {
    // 启用所有轨道
    localStream.getTracks().forEach(track => track.enabled = true);
    
    if (localVideoRef.current) {
      localVideoRef.current.srcObject = localStream;
      // 手动触发播放，捕获可能的错误
      localVideoRef.current.play().catch(err => {
        console.error("本地视频播放失败:", err);
        // 如果是自动播放限制，可以引导用户点击页面触发
      });
    }

    // 初始化Simple Peer...
  });

// 处理远程流
peerRef.current.on('stream', remoteStream => {
  // 启用远程流所有轨道
  remoteStream.getTracks().forEach(track => track.enabled = true);
  
  if (remoteVideoRef.current) {
    remoteVideoRef.current.srcObject = remoteStream;
    remoteVideoRef.current.play().catch(err => {
      console.error("远程视频播放失败:", err);
    });
  }
});

3. 避免同时设置两个视频的srcObject #

Safari在处理多个MediaStream时可能存在资源竞争，你可以尝试给本地视频的设置延迟一小段时间，或者确保远程流加载完成后再处理本地流（不过通常本地流应该先获取）：

// 获取本地流后延迟设置
setTimeout(() => {
  if (localVideoRef.current) {
    localVideoRef.current.srcObject = localStream;
    localVideoRef.current.play();
  }
}, 500);

4. 升级Safari到最新版本 #

旧版本的Safari（比如14及以下）对WebRTC的支持有不少bug，尤其是多流处理的场景。建议用户升级到最新的Safari版本（15+），很多这类兼容性问题在新版本中已经修复。

5. 检查React渲染时机与ref引用 #

确保你用useRef正确获取了视频元素的DOM引用，并且在useEffect中处理流的设置——不要直接在JSX中绑定srcObject，因为React的状态更新可能不会及时触发视频元素的重新渲染：

const localVideoRef = useRef(null);

useEffect(() => {
  // 这里处理流的设置，确保ref.current存在
  if (localVideoRef.current && localStream) {
    localVideoRef.current.srcObject = localStream;
  }
}, [localStream]);

这些方法应该能解决你遇到的问题，我之前用类似的方案帮开发者解决过相同的Safari兼容性问题。

内容的提问来源于stack exchange，提问作者Abhijeet-AR