ReactJs下WebRTC远程流无法播放，如何排查其有效性？

一、确认远程流是否已传输 #

• 查看WebRTC内部统计：打开chrome://webrtcinternals，找到对应PeerConnection的统计项：
  • 检查bytesReceived（媒体接收字节数）是否持续增长，若一直为0说明未收到流
  • 确认iceConnectionState为connected或completed，表示ICE连接成功
  • 查看SDP交换记录，确认offer和answer都正确生成并传递
• 控制台打印流信息：拿到远程流后执行console.log(remoteStream.getTracks())，检查每个track的readyState是否为live，enabled是否为true，状态异常则说明传输存在问题
• 信令日志排查：在Socket.io的发送/接收事件中添加日志，确认ICE候选、offer、answer都完整传递，无丢包或格式错误

二、解决远程流无法播放的具体步骤 #

• 改用useRef存远程流，直接操作原生video标签
  React状态不适用于存储MediaStream这类可变对象，用useRef绑定video元素直接赋值：

  import { useRef, useEffect, useState } from 'react';
  
  function VideoCall() {
    const remoteVideoRef = useRef(null);
    const [remoteStream, setRemoteStream] = useState(null);
  
    useEffect(() => {
      if (remoteStream && remoteVideoRef.current) {
        remoteVideoRef.current.srcObject = remoteStream;
      }
    }, [remoteStream]);
  
    return (
      <video 
        ref={remoteVideoRef} 
        autoPlay 
        playsInline 
        style={{ width: '300px', height: 'auto' }}
      />
    );
  }
  

• 正确处理ontrack事件
  不要手动调用addTrack，直接通过peerConnection的ontrack事件获取远程流：

  peerConnection.ontrack = (event) => {
    // event.streams中已包含完整的远程流，直接使用即可
    setRemoteStream(event.streams[0]);
  };
  

• 检查video标签关键属性
  必须添加autoPlay（自动播放）和playsInline（避免移动端全屏播放），不要设置src属性（会覆盖srcObject），远程流无需添加muted（除非需要静音音频）
• 排查媒体权限与安全上下文
  确保页面运行在HTTPS或localhost环境（WebRTC要求安全上下文），检查浏览器是否允许媒体播放，无插件拦截流
• 剥离复杂逻辑测试
  先编写纯HTML+JS的最简WebRTC Demo，跳过React和Socket.io，确认基础流程能正常接收远程流后，再逐步整合到项目中，排除框架或信令层的干扰

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