WebRTC：部分远端Peer流无法渲染且ICE连接断开后无法恢复

一、ICE连接变为disconnected且无法恢复 #

• 开启ICE重启机制，在PeerConnection的状态回调中触发自动重连，无需重建实例：

peer.oniceconnectionstatechange = () => {
  if(peer.iceConnectionState === 'disconnected') {
    // 携带iceRestart参数创建新offer
    peer.createOffer({ iceRestart: true })
      .then(offer => peer.setLocalDescription(offer))
      // 通过信令通道将新offer发送到对端
      .then(() => socket.emit('restartIce', { targetPeerId: userId, offer: peer.localDescription }))
      .catch(err => console.error('ICE重启失败', err))
  }
}

对端收到restartIce信令后，按标准offer/answer流程回传answer即可完成ICE重连。

• 确认STUN/TURN服务器配置完整，只配置STUN服务器无法穿透对称NAT，必须搭配TURN中继服务器才能覆盖所有网络场景，出问题的Peer可先切换手机热点、关闭本地防火墙验证是否为网络限制导致的连接断开。
• 增加信令通道心跳重连逻辑，避免信令中断导致ICE候选、会话描述交换不完整，最终引发连接断开。

二、远端流可获取但无法播放 #

• 修正视频元素属性兼容问题，playsInline属性不止iOS需要，安卓、桌面端部分浏览器也需要该属性才能正常触发内联自动播放，不要做系统判断全局配置即可，同时修正muted属性的赋值方式：

// 全局配置playsInline
videoElement.playsInline = true
videoElement.setAttribute('playsinline', '')
// 布尔属性不要用数字赋值
videoElement.muted = false

• 处理浏览器自动播放限制，若页面在没有任何用户交互行为的情况下播放带音频的视频，会被浏览器的安全策略拦截，哪怕开启autoplay也无法播放，可添加主动播放逻辑+异常兜底：

videoElement.autoplay = true
// 主动调用play做异常捕获
videoElement.play().catch(err => {
  console.warn('自动播放被拦截，降级为静音播放', err)
  videoElement.muted = true
  videoElement.play()
})

• 调整ontrack事件监听逻辑，部分场景下远端track不会触发unmute事件，无需等待事件触发即可直接挂载流：

peer.ontrack = e => {
  console.log('收到远端轨道', e.track)
  const mountStream = () => addVideoElement(userId, e.streams[0])
  // 轨道已可用直接挂载，否则等待unmute事件
  e.track.muted ? e.track.onunmute = mountStream : mountStream()
}

• 验证userId参数正确性，若ontrack触发时userId未和对端正确绑定，会导致视频元素ID重复、流挂载到错误元素上，可在addVideoElement中添加日志验证流有效性：

console.log('流是否激活：', stream.active, '流包含轨道：', stream.getTracks())

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