WebRTC第二次创建RTCPeerConnection提示track已有sender错误如何处理

问题根源 #

你遇到的报错本质是同一个媒体轨道被重复添加到了未重新初始化的RTCPeerConnection实例中，和你猜测的SDP未刷新没有直接关系，具体问题出在以下几处逻辑：

InvalidAccessError: Failed to execute 'addTrack' on 'RTCPeerConnection': A sender already exists for the track.

• localConnection、remoteConnection两个RTCPeerConnection实例仅在代码初始化时创建了一次，即使你调用了close()方法，也只是关闭了当前连接，不会清空实例中已存储的track sender记录，第二次调用addTrack就会触发冲突
• 所有socket.on事件监听都写在initCall函数内部，每次useEffect触发调用initCall都会重复注册相同的socket监听，导致同一事件触发多次，重复执行addTrack逻辑
• 你注释掉了remoteConnection = new RTCPeerConnection(configRTC)的新建逻辑，没有在每次发起/接收通话时创建新的PeerConnection实例

修复方案 #

1. 调整PeerConnection实例的创建逻辑 #

每次发起新通话时都创建新的RTCPeerConnection实例，不要复用全局的旧实例：

let configRTC = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
// 不要在全局初始化实例，放到initCall内部每次新建
let localConnection, remoteConnection, conn;
const initCall = (stream, loca) => {
  // 每次调用initCall先销毁旧实例
  if (localConnection) {
    localConnection.close();
    localConnection = null;
  }
  if (remoteConnection) {
    remoteConnection.close();
    remoteConnection = null;
  }
  // 新建全新实例
  localConnection = new RTCPeerConnection(configRTC);
  remoteConnection = new RTCPeerConnection(configRTC);
  // 后续原有逻辑保持不变，删掉被注释的remoteConnection新建代码即可

2. 移除重复的socket事件监听 #

把socket事件监听的注册逻辑放到useEffect的初始化阶段，不要放在initCall内部，同时在useEffect的清理函数中移除监听，避免重复触发：

useEffect(() => {
  // 统一注册所有socket监听
  const otherUsersHandler = (socketId) => {
    // 原other-users事件执行逻辑
  };
  const offerHandler = (data) => {
    // 原offer事件执行逻辑
  };
  const answerHandler = (data) => {
    // 原answer事件执行逻辑
  };
  const candidateHandler = (candidate) => {
    // 原candidate事件执行逻辑
  };
  socket.on('other-users', otherUsersHandler);
  socket.on('offer', offerHandler);
  socket.on('answer', answerHandler);
  socket.on('candidate', candidateHandler);
  // 组件卸载/依赖更新时的清理函数
  return () => {
    // 移除所有socket监听
    socket.off('other-users', otherUsersHandler);
    socket.off('offer', offerHandler);
    socket.off('answer', answerHandler);
    socket.off('candidate', candidateHandler);
    // 销毁未关闭的PeerConnection实例
    if (localConnection) localConnection.close();
    if (remoteConnection) remoteConnection.close();
  };
}, [stream]); // 依赖项根据你的实际业务调整

3. 可选：如果业务需要复用PeerConnection实例，添加track存在性判断 #

如果场景要求不能每次新建实例，调用addTrack前先判断对应轨道是否已经被添加过：

stream.getTracks().forEach((track) => {
  const existSender = localConnection.getSenders().find(s => s.track?.id === track.id);
  if (!existSender) {
    localConnection.addTrack(track, stream);
  }
});

内容的提问来源于stack exchange，提问作者Tài Hồ