WebRTC添加Track后lc.ontrack事件未触发问题求助

1. 验证媒体轨道添加逻辑 #

先确认getUserMedia获取的流包含有效轨道，且addTrack调用正确：

// 检查媒体流有效性
const stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
console.log('可用媒体轨道:', stream.getTracks());

// 明确添加每个轨道到PeerConnection
stream.getTracks().forEach(track => {
  pc.addTrack(track, stream);
  console.log('已添加轨道ID:', track.id);
});

避免直接传入整个流（虽语法允许，但明确传轨道更易排查问题）。

2. 检查SDP交换是否包含媒体描述 #

在信令流程中打印本地/远端SDP，确认存在m=video或m=audio媒体行：

// 创建Offer后打印本地SDP
pc.createOffer().then(offer => {
  console.log('本地SDP:', offer.sdp);
  pc.setLocalDescription(offer);
  // 发送Offer到远端
});

// 接收远端Answer后打印
pc.setRemoteDescription(new RTCSessionDescription(answer)).then(() => {
  console.log('远端SDP:', answer.sdp);
});

若SDP无媒体行，说明轨道未被正确加入PeerConnection，或媒体权限获取失败。

3. 确认ontrack事件绑定时机 #

必须在设置远端SDP之前绑定事件，否则会错过触发：

// 正确顺序：先绑定事件，再处理远端SDP
pc.ontrack = (event) => {
  console.log('收到远端轨道:', event.track);
  const remoteVideo = document.getElementById('remote-video');
  remoteVideo.srcObject = event.streams[0];
};

// 后续再执行setRemoteDescription
pc.setRemoteDescription(remoteDesc);

4. 检查ICE连接状态 #

确认ICE连接处于connected或completed状态：

pc.oniceconnectionstatechange = () => {
  console.log('ICE连接状态:', pc.iceConnectionState);
};

ICE未建立成功时，媒体数据无法传输，ontrack不会触发。

5. 排查环境与权限问题 #

• 确保页面运行在localhost或HTTPS安全上下文（WebRTC强制要求）
• 确认浏览器已授予摄像头/麦克风权限（地址栏图标可查看）
• 避免使用已废弃的addStream API，统一使用标准addTrack

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