如何在持久化WebRTC连接中维护精简SDP并处理音视频轨增删？

针对你在持久化类Skype WebRTC应用中遇到的SDP膨胀、收发器冗余、复用收发器时replaceTrack不触发onTrack等问题，2023年末的标准实践方案如下：

1. 放弃动态addTrack，预先创建固定收发器复用 #

每次调用addTrack会自动生成新的收发器，这是导致SDP持续膨胀的核心原因。正确的做法是在连接初始化阶段就创建好固定数量的音视频收发器，后续通过切换收发器状态和Track来实现通话的启停：

// 连接初始化时创建收发器，初始设为inactive状态
const pc = new RTCPeerConnection(config);
const audioTransceiver = pc.addTransceiver('audio', { direction: 'inactive' });
const videoTransceiver = pc.addTransceiver('video', { direction: 'inactive' });

// 维护全局引用，用于后续操作
window.webrtcTransceivers = { audio: audioTransceiver, video: videoTransceiver };

2. 通话启停时切换收发器状态与Track #

发起/接受通话 #

• 发送端：将收发器方向改为sendrecv，用replaceTrack绑定本地音视频Track，触发重协商：

  const { audio, video } = window.webrtcTransceivers;
  // 绑定本地Track
  audio.sender.replaceTrack(localAudioTrack);
  video.sender.replaceTrack(localVideoTrack);
  // 更新收发器方向
  audio.direction = 'sendrecv';
  video.direction = 'sendrecv';
  // 触发重协商
  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);
  // 通过DataChannel将Offer发送给对方
  

• 接收端：收到Offer后设置远端描述，同步更新本地收发器状态，绑定本地Track后回复Answer：

  await pc.setRemoteDescription(remoteOffer);
  const { audio, video } = window.webrtcTransceivers;
  audio.direction = 'sendrecv';
  video.direction = 'sendrecv';
  audio.sender.replaceTrack(localAudioTrack);
  video.sender.replaceTrack(localVideoTrack);
  
  const answer = await pc.createAnswer();
  await pc.setLocalDescription(answer);
  // 通过DataChannel发送Answer给对方
  

结束通话 #

将收发器改回inactive状态，清空Track，触发重协商：

const { audio, video } = window.webrtcTransceivers;
audio.sender.replaceTrack(null);
video.sender.replaceTrack(null);
audio.direction = 'inactive';
video.direction = 'inactive';

const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// 通过DataChannel发送更新后的Offer

这种方式下，SDP始终只包含固定的2条m-line（音视频各一条），不会因反复启停通话而膨胀。

3. 解决replaceTrack不触发onTrack的问题 #

onTrack事件仅在收发器首次接收Track时触发，后续replaceTrack替换Track时，接收端的Track对象会自动更新，无需再次触发onTrack。你只需在首次触发onTrack时，将Track绑定到对应的MediaStream并渲染：

pc.ontrack = (event) => {
  // 首次接收Track时绑定到MediaStream
  if (event.track.kind === 'audio') {
    const audioStream = new MediaStream([event.track]);
    audioElement.srcObject = audioStream;
  } else if (event.track.kind === 'video') {
    const videoStream = new MediaStream([event.track]);
    videoElement.srcObject = videoStream;
  }
};

后续replaceTrack替换Track时，MediaStream会自动同步更新，UI层面无需额外操作；若需感知Track切换，可通过DataChannel主动发送状态通知。

4. Firefox兼容处理 #

Firefox中调用transceiver.stop()后，收发器仍会保留在SDP中，若你因特殊场景需要彻底移除收发器而非复用，需在stop后调用removeTransceiver：

// 彻底移除收发器（仅在无需复用时使用）
audioTransceiver.stop();
pc.removeTransceiver(audioTransceiver);
// 触发重协商更新SDP

5. 重协商优化 #

避免因频繁操作触发多次重协商，可对negotiationneeded事件做防抖处理：

let negotiationTimeout;
pc.onnegotiationneeded = async () => {
  clearTimeout(negotiationTimeout);
  negotiationTimeout = setTimeout(async () => {
    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);
    // 发送Offer给对方
  }, 500); // 延迟500ms合并操作
};

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