WebRTC是否需在PeerConnection建立前添加媒体轨道？事后添加可行吗？

核心结论 #

不是必须在PeerConnection启动前添加媒体轨道，连接建立后完全可以动态添加，但需要通过SDP重新协商同步两端状态，否则远端不会触发ontrack事件。

问题原因 #

WebRTC的媒体会话状态是通过SDP（会话描述协议）同步的。当你在已建立的连接上调用addTrack()时，本地PeerConnection会更新自身的媒体配置，但远端PeerConnection并不知道这个变化——必须重新生成并交换SDP，让两端确认新的媒体轨道信息，远端才会触发ontrack事件。

解决步骤 #

在本地添加轨道后，执行以下SDP协商流程：

1. 调用peerConnection.createOffer()生成包含新轨道信息的offer SDP
2. 调用peerConnection.setLocalDescription()设置本地SDP
3. 通过信令通道（如WebSocket）将新offer发送给远端
4. 远端调用setRemoteDescription()接收offer，再调用createAnswer()生成answer SDP发回本地
5. 本地调用setRemoteDescription()接收answer，完成协商

自动化协商优化 #

可以监听PeerConnection的negotiationneeded事件，当媒体配置变更（比如添加轨道）时自动触发协商流程，无需手动调用：

// 本地PeerConnection监听协商需求
localPeer.addEventListener('negotiationneeded', async () => {
  try {
    const offer = await localPeer.createOffer();
    await localPeer.setLocalDescription(offer);
    // 发送offer到远端（信令逻辑自行实现）
    sendToRemote({ type: 'offer', sdp: localPeer.localDescription });
  } catch (err) {
    console.error('协商失败:', err);
  }
});

// 远端处理offer并回复answer
async function handleRemoteOffer(offer) {
  await remotePeer.setRemoteDescription(offer);
  const answer = await remotePeer.createAnswer();
  await remotePeer.setLocalDescription(answer);
  sendToRemote({ type: 'answer', sdp: remotePeer.localDescription });
}

// 远端监听ontrack事件
remotePeer.ontrack = (event) => {
  // 将新轨道绑定到媒体元素
  document.querySelector('#remote-video').srcObject = event.streams[0];
};

注意事项 #

• 无论哪一端添加轨道，都需要完成完整的SDP协商流程，另一端才能感知到新轨道
• 如果使用addTransceiver()替代addTrack()，同样需要执行协商流程
• 确保信令通道稳定，能正确传递更新后的SDP信息

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