设置srcObject后远程视频元素显示空白（本地视频正常）

看起来你遇到了WebRTC远程视频显示的棘手问题——本地播放一切正常，但其他用户在Chrome里看到的却是空白div，而且已经确认MediaStream是有效的，卡了一周确实够闹心的！我结合你贴的代码，梳理几个最可能的排查方向，你可以逐一试试：

1. 检查ICE候选的处理逻辑 #

WebRTC光交换SDP还不够，必须要处理ICE候选才能建立真实的媒体传输路径。我看你当前的代码里只处理了SDP的交换，完全没提到ICE候选的监听和传递，这大概率是远程流无法到达对方的核心原因！

你需要在创建RTCPeerConnection后，立即监听icecandidate事件，把候选发送给对方：

// 示例：创建连接时添加ICE候选监听
connections[id] = new RTCPeerConnection(/* 你的配置 */);
connections[id].onicecandidate = (event) => {
  if (event.candidate) {
    socket.emit('signal', id, JSON.stringify({ 'ice': event.candidate }));
  }
};

同时，在收到服务器转发的消息时，要处理ICE候选：

gotMessageFromServer = (fromId, message) => {
  var signal = JSON.parse(message);
  if (fromId !== socketId) {
    if (signal.sdp) {
      // 你的现有SDP处理逻辑...
    } 
    // 新增：处理ICE候选
    else if (signal.ice) {
      connections[fromId].addIceCandidate(new RTCIceCandidate(signal.ice))
        .catch(e => console.error('添加ICE候选失败:', e));
    }
  }
}

2. 确认远程流的ontrack事件监听是否正确 #

当对方的媒体流到达时，WebRTC会触发ontrack事件，你需要在这里正确创建/更新视频元素。你当前的代码里好像没看到这部分逻辑，这会导致远程流就算到了，也没有绑定到视频元素上，自然显示空白。

可以在创建RTCPeerConnection时添加这个监听：

connections[id].ontrack = (event) => {
  // 确保远程视频容器已经挂载到DOM
  if (!this.remoteStreamsRef.current) return;
  
  // 可以选择创建新的video元素，或者更新现有元素
  const videoElem = document.createElement('video');
  videoElem.srcObject = event.stream;
  videoElem.autoplay = true;
  videoElem.playsInline = true; // 这个属性很重要，Chrome移动端必须加，桌面端也建议加
  videoElem.className = 'remote-video'; // 对应你的CSS样式
  
  this.remoteStreamsRef.current.appendChild(videoElem);
  
  // 也可以更新React状态，让框架帮你渲染
  this.setState(prev => ({
    remoteStreams: [...prev.remoteStreams, event.stream]
  }));
};

3. 检查视频元素的渲染时机和状态更新 #

React是基于状态驱动渲染的，如果你的远程视频元素是通过state数组渲染的，要确保每次新增远程流时都正确更新remoteStreams状态。另外，你设置了forceRenderKey，可以在添加新流时更新这个key，强制React重新渲染视频组件，避免因为引用不变导致的渲染不更新：

this.setState(prev => ({
  remoteStreams: [...prev.remoteStreams, event.stream],
  forceRenderKey: prev.forceRenderKey + 1
}));

同时，要确保在设置srcObject时，视频元素已经存在于DOM中——就像你给本地视频加了setTimeout延迟一样，远程视频也需要等元素挂载后再赋值，不然会因为元素不存在导致赋值无效。

4. 验证浏览器自动播放策略 #

Chrome对媒体自动播放有严格限制，必须确保视频元素设置了autoplay和playsInline属性，而且最好是用户有交互动作（比如点击加入会议按钮）后再加载媒体流。如果没有这些设置，视频就算有流也会被浏览器阻止播放，看起来就是空白。

5. 调试建议 #

让出现问题的用户打开Chrome开发者工具：

• 切换到「Media」面板，查看远程流的轨道状态，确认是否有视频/音频轨道，帧率、码率是否正常；
• 查看「Console」面板，有没有权限错误、DOM元素找不到、WebRTC连接失败之类的报错信息，这些能帮你快速定位问题。

备注：内容来源于stack exchange，提问作者psssvst