WebRTC视频通话跨设备双向音视频异常问题求助

1. SDP与ICE候选交换验证 #

• 先查信令服务器日志，确认设备1的SDP Offer/Answer是否完整发送到设备2。如果信令丢包，得给WebSocket加消息确认机制，保证信令可靠传输。
• 在设备2的前端代码里，检查onicecandidate事件是否把本地ICE候选全发出去了，同时是否正确接收并调用addIceCandidate添加设备1的候选。ICE候选不全的话，NAT穿透失败，媒体流根本传不过来。

2. 媒体流收发逻辑检查 #

• 确认设备1的代码里，是否把音视频轨道通过addTrack添加到了RTCPeerConnection里。要是没加，设备2肯定收不到流。
• 设备2这边必须正确监听ontrack事件，把收到的流绑定到远程视频元素上，比如：

peerConnection.ontrack = (event) => {
  const remoteVideo = document.getElementById('remote-video');
  if (!remoteVideo.srcObject) {
    remoteVideo.srcObject = event.streams[0];
  }
};

• 检查设备2的媒体权限，尤其是麦克风权限有没有授予。权限没开的话，很容易出现回声——扬声器的声音被麦克风重新采集回来。

3. 回声消除处理 #

• 设备2的远程音频元素必须加muted和playsinline属性，不然扬声器输出会被麦克风拾到，形成回声：

<video id="remote-video" muted playsinline></video>

• 调用getUserMedia时，强制开启回声消除和降噪：

const constraints = {
  audio: { echoCancellation: true, noiseSuppression: true },
  video: true
};
navigator.mediaDevices.getUserMedia(constraints);

4. 移动端浏览器兼容适配 #

• 移动端浏览器（比如Safari、Chrome移动端）对WebRTC支持有差异，必须配置STUN/TURN服务器，强制NAT穿透：

const configuration = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    // 有TURN服务器的话加上，公网环境必须用
    // { urls: 'turn:your-turn-server.com', username: 'xxx', credential: 'xxx' }
  ]
};
const peerConnection = new RTCPeerConnection(configuration);

• 移动端视频元素必须加playsinline，否则远程视频可能无法正常渲染。

5. 信令时序问题排查 #

• 严格遵守信令流程：设备1创建Offer→发送给设备2→设备2接收Offer后创建Answer→发送回设备1→双方交换ICE候选。时序乱了（比如设备2没收到Offer就先创建Answer），连接直接失败。
• 检查代码里有没有重复创建RTCPeerConnection的情况，要是多次创建，旧连接会覆盖新的，媒体流绑定也会出错。

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