React中WebRTC多用户视频聊天应用MediaStream元数据未加载且远程流无法播放问题

看起来你在WebRTC多用户视频流播放上碰到了棘手的问题，我仔细梳理了你的PeerService代码，发现几个可能导致远程流无法播放的核心问题，咱们一步步来排查修复：

1. 远程Track处理逻辑存在覆盖风险 #

你当前的ontrack事件处理直接取event.streams[0]并覆盖存储的远程流，但实际场景中，远程端可能分批次发送音频、视频Track，直接替换流会导致部分Track丢失。可以改成追加Track到已有流的逻辑：

private setupTrackHandlers(pc: RTCPeerConnection, peerID: string) {
  // Handle incoming remote tracks
  pc.ontrack = (event: RTCTrackEvent) => {
    console.log(`收到${event.track.kind} Track`);
    let remoteStream = this.remoteStreams.get(peerID);
    
    // 如果没有对应流，创建新流并触发事件
    if (!remoteStream) {
      remoteStream = new MediaStream();
      this.remoteStreams.set(peerID, remoteStream);
      window.dispatchEvent(
        new CustomEvent("remoteStreamAdded", {
          detail: { peerID, stream: remoteStream },
        })
      );
    }
    
    // 避免重复添加相同Track
    if (!remoteStream.getTracks().includes(event.track)) {
      remoteStream.addTrack(event.track);
    }
  };

  // 本地流添加逻辑保留
  if (this.localStream) {
    this.localStream.getTracks().forEach((track) => {
      pc.addTrack(track, this.localStream!);
    });
  }
}

2. 缺少STUN/TURN服务器配置 #

WebRTC需要STUN服务器来穿透NAT，没有配置的话，跨网络的Peer根本无法建立连接。创建RTCPeerConnection时一定要加上ICE服务器配置：

// 创建Peer连接时替换成这个
const pc = new RTCPeerConnection({
  iceServers: [
    { urls: "stun:stun.l.google.com:19302" }, // 公共STUN服务器
    // 如果需要跨运营商/复杂网络，这里添加你的TURN服务器配置
  ],
});

3. 视频元素绑定与播放权限问题 #

即使流正确接收了，React组件里的视频元素也可能没正确绑定，或者浏览器阻止了自动播放（现在浏览器要求自动播放必须有用户交互触发）。确保组件里的处理逻辑正确：

// 示例React组件中的流处理
useEffect(() => {
  const handleRemoteStream = (e: CustomEvent) => {
    const { peerID, stream } = e.detail;
    const videoEl = document.getElementById(`remote-video-${peerID}`);
    
    if (videoEl instanceof HTMLVideoElement) {
      videoEl.srcObject = stream;
      // 必须通过用户交互（比如点击按钮）触发play，否则会被浏览器拦截
      videoEl.addEventListener("loadedmetadata", () => {
        // 可以在这里提示用户点击播放，或者绑定到某个按钮的点击事件
        console.log(`远程流${peerID}已加载，等待用户播放`);
      });
    }
  };

  window.addEventListener("remoteStreamAdded", handleRemoteStream);
  return () => window.removeEventListener("remoteStreamAdded", handleRemoteStream);
}, []);

4. Peer连接的清理逻辑不完整 #

你的closePeer方法代码没写完，需要确保彻底清理连接和流资源，避免内存泄漏：

closePeer(peerID: string) {
  const pc = this.peerList.get(peerID);
  if (pc) {
    // 停止所有Track并关闭连接
    pc.getSenders().forEach(sender => sender.track?.stop());
    pc.close();
    this.peerList.delete(peerID);
  }
  // 移除存储的远程流并通知组件
  this.remoteStreams.delete(peerID);
  window.dispatchEvent(
    new CustomEvent("remoteStreamRemoved", { detail: { peerID } })
  );
}

这些修改主要解决了流的完整性处理、网络穿透配置、浏览器播放权限三个核心问题，调整后应该能正常播放远程流了。

内容来源于stack exchange