WebRTC实现语音通话时无法正常播放MediaStream音频问题求助

1. 缺失ICE候选交换流程（最常见原因） #

WebRTC仅交换SDP（offer/answer）无法完成点对点连接，必须额外交换ICE候选才能完成网络路径协商，现有代码完全缺失这部分逻辑。

• 两端都需监听pc.onicecandidate事件，收集到候选后通过WebSocket发送给对方：

pc.onicecandidate = (event) => {
  if (event.candidate) {
    socket.send(JSON.stringify({
      type: "signaling_ice_candidate",
      candidate: event.candidate,
      connectionId: connectionId
    }))
  }
}

• 两端收到对方发送的ICE候选消息后，添加到本地RTCPeerConnection实例：

// 收到信令类型为signaling_ice_candidate的消息时调用
function handleIceCandidate(candidate) {
  pc.addIceCandidate(new RTCIceCandidate(candidate))
}

2. 浏览器音频自动播放限制 #

现代浏览器禁止未经用户交互的音频自动播放，可通过两种方式解决：

• 给audio元素添加autoplay + playsinline属性：

<audio id="remoteAudio" autoplay playsinline></audio>

• 绑定用户交互事件（如按钮点击）手动触发播放：

document.querySelector('#playAudioBtn').addEventListener('click', async () => {
  const remoteAudio = document.getElementById('remoteAudio')
  await remoteAudio.play()
})

3. 确认RTCPeerConnection连接状态 #

添加状态监听逻辑，确认点对点连接是否真正建立：

pc.onconnectionstatechange = () => {
  console.log("连接状态：", pc.connectionState)
  // 正常连接完成状态为connected，若为failed/disconnected说明网络协商失败
}

pc.oniceconnectionstatechange = () => {
  console.log("ICE连接状态：", pc.iceConnectionState)
}

如果状态一直停留在checking，检查configuration参数是否配置了可用的STUN/TURN服务器，示例配置如下：

const configuration = {
  iceServers: [
    { urls: "stun:stun.l.google.com:19302" }
  ]
}

4. 验证音轨接收逻辑 #

• 首先确认被叫端也执行了setupRtc逻辑，正确将本地音轨添加到了RTCPeerConnection实例，否则对端不会收到任何音轨数据。
• 检查ontrack事件是否触发，如果event.streams[0]为空，可直接将收到的track添加到remoteStream，无需依赖流对象：

pc.ontrack = (event) => {
  remoteStream.addTrack(event.track)
}

5. 检查DOM元素加载时机 #

确认调用document.getElementById('remoteAudio')时，对应的audio元素已经渲染完成，不要在DOM未加载完成时执行这段逻辑，可将remoteAudio.srcObject的赋值逻辑移到ontrack回调中执行。

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