WebRTC onTrack未触发求助：ICE已连接但无法接收媒体流

ICE连接成功但onTrack事件未触发，核心问题大概率出在媒体轨道添加流程、事件绑定时机或SDP媒体描述完整性上，以下是针对性排查和修复步骤：

一、检查发送端媒体轨道是否正确注入PeerConnection #

1. 确认发送端已成功获取有效媒体流：
   • 在发送端控制台打印stream.getTracks()，确保返回的轨道数组非空，且track.readyState为live
   • 必须使用addTrack而非过时的addStream（部分浏览器对addStream的媒体事件触发逻辑存在兼容性问题）：

     // 正确写法
     const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
     stream.getTracks().forEach(track => {
       pc.addTrack(track, stream);
     });
     

2. 验证Offer SDP包含媒体描述：
   • 打印Offer的SDP内容，确认存在m=video和m=audio行，且状态不为inactive：

     const offer = await pc.createOffer();
     console.log('Offer SDP:', offer.sdp);
     

二、确认接收端onTrack事件绑定时机 #

1. 必须在设置远程SDP之前绑定onTrack事件，否则会错过触发时机：
   • 在React中用useRef保存PeerConnection实例，避免组件重渲染导致实例重建，同时在useEffect中尽早绑定事件：

     const pcRef = useRef(new RTCPeerConnection(iceConfig));
     const remoteStreamRef = useRef(new MediaStream());
     const videoRef = useRef(null);
     
     useEffect(() => {
       const pc = pcRef.current;
       // 先绑定onTrack，再处理信令交换
       pc.ontrack = (event) => {
         console.log('收到远端轨道:', event.track);
         event.streams[0].getTracks().forEach(track => {
           remoteStreamRef.current.addTrack(track);
         });
         // 更新视频元素流
         if (videoRef.current) {
           videoRef.current.srcObject = remoteStreamRef.current;
         }
       };
     
       // 绑定ICE候选事件等其他逻辑...
     
       return () => {
         pc.close();
       };
     }, []); // 空依赖确保只执行一次
     

2. 禁止在组件渲染过程中重复创建PeerConnection，否则之前绑定的事件会直接失效。

三、验证ICE Candidate交换完整性 #

虽然ICE状态显示connected，但如果部分关键Candidate未完成交换，可能导致媒体流无法传输：

• 在发送端和接收端分别打印onicecandidate事件返回的Candidate，确保所有非null的Candidate都通过信令发送并添加到对方的PeerConnection：

  pc.onicecandidate = (event) => {
    if (event.candidate) {
      console.log('发送ICE Candidate:', event.candidate);
      // 通过WebSocket发送给远端
      sendSignalingData({ type: 'ice-candidate', candidate: event.candidate });
    }
  };
  

四、额外排查点 #

1. 检查浏览器控制台是否有媒体相关错误（如权限被拒、设备不可用）
2. 确认接收端的视频元素已正确挂载（React中用useRef获取DOM元素，避免未挂载时设置srcObject）
3. 如果使用RTCRtpTransceiver，确认发送端的transceiver方向设置为sendrecv或sendonly：

   pc.addTransceiver('video', { direction: 'sendonly' });
   

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