WebRTC视频无法显示求助：添加轨道后远端无画面

看起来你遇到了WebRTC通话中添加视频轨道后远端无法播放的问题——本地视频显示正常，远端也能拿到包含视频轨道的流，但视频就是无法渲染播放。结合你的代码和WebRTC的常见坑，我整理了几个可能的原因和对应的解决方案：

1. 确保SDP协商正确包含视频媒体描述 #

当你添加视频轨道后，重新发送的Offer需要明确包含视频的收发能力，否则远端的PeerConnection不会正确识别并处理新的视频轨道。

问题点：你的sendOffer函数可能没有设置正确的Offer选项，导致生成的SDP中缺少m=video的媒体行，远端无法感知视频媒体的存在。

解决方案：生成Offer时，显式设置offerToReceiveVideo: true（即使你是呼叫方，这个参数能确保Offer包含视频相关的SDP描述）：

async sendOffer(type) {
  const offerOptions = {
    offerToReceiveAudio: true,
    offerToReceiveVideo: true // 关键：确保Offer包含视频媒体协商信息
  };
  try {
    const offer = await this.rtc.peerConnection.createOffer(offerOptions);
    await this.rtc.peerConnection.setLocalDescription(offer);
    // 通过Laravel-echo-server发送Offer给远端
  } catch (err) {
    console.error("生成Offer失败:", err);
  }
}

你可以在发送Offer前打印this.rtc.peerConnection.localDescription.sdp，确认其中包含m=video的行，这说明视频媒体已经被纳入协商。

2. 远端视频元素需要手动触发播放并设置必要属性 #

即使你给video元素设置了srcObject，浏览器可能因为自动播放策略（尤其是移动端）而不自动播放视频，或者缺少必要的属性导致无法渲染。

问题点：你的远端视频元素可能没有设置autoplay、playsinline属性，或者没有手动调用play()方法。

解决方案：
首先，确保视频元素的HTML属性正确：

<video ref="remoteVideo" autoplay playsinline muted></video>

• autoplay：允许视频自动播放（配合muted符合现代浏览器的自动播放策略）
• playsinline：避免移动端视频自动全屏，确保在页面内播放
• muted：满足自动播放的静音要求

然后，在ontrack事件中手动触发播放，并处理可能的错误：

this.rtc.peerConnection.ontrack = e => {
  if (e.track.kind === 'video') {
    const videoStream = e.streams[0];
    this.$refs.remoteVideo.srcObject = videoStream;
    // 手动触发播放，捕获可能的播放错误
    this.$refs.remoteVideo.play().catch(err => {
      console.error("远端视频播放失败:", err);
    });
    // 检查视频轨道状态，确认是活跃的
    console.log("远端视频轨道状态:", e.track.readyState);
  } else {
    this.$refs.remoteAudio.srcObject = e.streams[0];
  }
};

3. 确保ICE候选重新收集并传递 #

添加新的媒体轨道后，WebRTC会生成新的ICE候选，用于建立视频流的网络传输路径。如果这些新的候选没有传递给远端，视频流的数据包无法到达对方。

问题点：你可能没有持续监听onicecandidate事件，或者在重新协商时没有发送新生成的ICE候选。

解决方案：确保你的PeerConnection始终监听onicecandidate事件，并且所有候选（包括添加视频后生成的）都通过Laravel-echo-server发送给远端：

this.rtc.peerConnection.onicecandidate = e => {
  if (e.candidate) {
    // 发送ICE候选给远端
    this.sendIceCandidate(e.candidate);
  }
};

远端收到候选后，要调用peerConnection.addIceCandidate(candidate)来添加到自己的PeerConnection中。

4. 简化本地轨道添加逻辑 #

你的代码中同时执行了this.stream.addTrack(stream.getVideoTracks()[0])和this.rtc.peerConnection.addTrack(stream.getVideoTracks()[0], stream)，虽然这本身没问题，但可以简化逻辑避免流的混乱：

handleEnableCamera(isCaller) { 
  navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
    const videoTrack = stream.getVideoTracks()[0];
    // 将视频轨道添加到现有本地流
    this.stream.addTrack(videoTrack);
    // 更新本地视频显示
    this.$refs.localVideo.srcObject = this.stream;
    // 告诉PeerConnection添加新轨道
    this.rtc.peerConnection.addTrack(videoTrack, this.stream);
    this.sendOffer('video'); 
  }).catch(err => {
    console.error("获取摄像头失败:", err);
  });
}

额外排查步骤 #

如果以上方案都没解决，你可以通过以下方式进一步定位问题：

• 打开浏览器控制台，查看是否有媒体权限、播放错误或WebRTC相关的报错信息
• 使用Chrome的chrome://webrtc-internals/工具，查看视频流的接收统计（比如是否有字节数增长、解码是否正常）
• 在远端的ontrack事件中，打印e.streams[0].getVideoTracks()，确认视频轨道存在且readyState为live

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