WebRTC使用pc.ontrack添加远程流失败：音视频无法播放

问题根源 #

你当前的ontrack回调逻辑存在问题：每次触发ontrack事件时，都会遍历event.streams[0]的所有轨道并重复添加到目标MediaStream中。因为4条轨道会触发4次ontrack事件，最终MediaStream里会存在大量重复的轨道实例，导致video元素无法正确解析音视频流。

修正方案 #

方案1：直接绑定事件中的stream（推荐，适用于单stream场景） #

如果所有远程轨道都属于同一个MediaStream，直接将该stream赋值给video的srcObject即可，无需手动添加轨道：

RemoteVideoRef.current.srcObject = new MediaStream();

peerconnection.ontrack = (event) => {
  // 直接使用事件返回的stream，避免重复添加
  RemoteVideoRef.current.srcObject = event.streams[0];
};

方案2：仅添加当前触发事件的轨道（适用于多轨道分批触发场景） #

如果需要保留手动管理轨道的逻辑，只添加当前事件对应的单条轨道，避免重复：

// 初始化或复用已存在的MediaStream
const remoteStream = RemoteVideoRef.current.srcObject || new MediaStream();
RemoteVideoRef.current.srcObject = remoteStream;

peerconnection.ontrack = (event) => {
  // 仅添加当前事件触发的轨道，而非遍历整个stream的所有轨道
  remoteStream.addTrack(event.track);
};

额外检查项 #

1. video元素属性配置：浏览器有严格的自动播放策略，需确保video标签包含必要属性：

<video ref={RemoteVideoRef} autoplay playsinline muted></video>

• autoplay：开启自动播放
• playsinline：移动端避免强制全屏播放
• muted：无用户交互时，音频轨道需静音才能触发自动播放（若需播放音频，可在用户点击操作后移除该属性）

2. 轨道状态验证：可在回调中打印轨道状态，确认轨道处于启用状态：

peerconnection.ontrack = (event) => {
  console.log('轨道启用状态:', event.track.enabled);
  // ...其他逻辑
};

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