第二次创建peerconeection WebRTC时出现问题（轨道已经存在一个发件人。），我应该处理任何想法

Posted 2023-04-18

【中文标题】第二次创建peerconeection WebRTC时出现问题（轨道已经存在一个发件人。），我应该处理任何想法

【英文标题】：Problem when the second time create peerconeection WebRTC ( A sender already exists for the track.), any idea should I handle

【发布时间】：2022-01-07 05:04:37

【问题描述】：

我正在使用 react、socket.io 和 webRTC。第一次连接很好，但下次有问题我认为 SDP 上的这个问题没有刷新。我已经调用了 close() 对等连接。

错误代码：

InvalidAccessError: 无法在“RTCPeerConnection”上执行“addTrack”：轨道的发送方已经存在。

我的 initCall 函数在 useEffect 中被调用。

let configRTC =  iceServers: [ urls: 'stun:stun.l.google.com:19302' ] ;

let localConnection = new RTCPeerConnection(configRTC);
let remoteConnection = new RTCPeerConnection(configRTC);
const initCall(stream,loca)=>
socket.on('other-users', (socketId) => 
    console.log('other user');
    conn = localConnection;
    stream.getTracks().forEach((track) => localConnection.addTrack(track, stream));
    localConnection.onicecandidate = ( candidate ) => 
      candidate && socket.emit('candidate',  socketId, candidate );
    ;

    // Receive stream from remote client and add to remote video area
    localConnection.ontrack = ( streams: [stream] ) => 
      if (!remoteVideo.current) return;
      remoteVideo.current.srcObject = stream;
    ;
    
      localConnection
        .createOffer( offerToReceiveAudio: 1, offerToReceiveVideo: 1, iceRestart: true )
        .then((offer) => localConnection.setLocalDescription(offer))
        .then(() => 
          socket.emit('offer',  socketId, description: localConnection.localDescription);
        );
   
socket.on('offer', (data) => 
    // Ininit peer connection
    console.log('offer', data.socketId);
    console.log('des', data.description);
    // remoteConnection = new RTCPeerConnection(configRTC);
    conn = remoteConnection;
    console.log('remote', remoteConnection.signalingState);
    console.log('remoteTRICKLE', remoteConnection.iceGatheringState);
    remoteConnection.onnegotiationneeded = (event) => 
      try 
        console.log(remoteConnection.signalingState);
        console.log(this.remoteConnection.signalingState);
       catch (e) 
        console.log(e);
      
    ;

    conn = remoteConnection;
    remoteConnection.restartIce();

    stream.getTracks().forEach((track) => remoteConnection.addTrack(track, stream));

    remoteConnection.onicecandidate = ( candidate ) => 
      candidate && socket.emit('candidate',  socketId: data.socketId, candidate );
    ;

    // Receive stream from remote client and add to remote video area
    remoteConnection.ontrack = ( streams: [stream] ) => 
      remoteVideo.current.srcObject = stream;
    ;
      remoteConnection
        .setRemoteDescription(data.description)
        .then(async () => await remoteConnection.createAnswer())
        .then(async (answer) => await remoteConnection.setLocalDescription(answer))

        .then(() => 
          console.log('answer', data.socketId);
          console.log('answerDes', remoteConnection.localDescription);

          socket.emit('answer',  socketId: data.socketId, description: remoteConnection.localDescription );
        );
   
    
  );

  socket.on('answer', (data) => 
      let description = new RTCSessionDescription(data.description);
      localConnection.setRemoteDescription(description);
  );


  socket.on('candidate', (candidate) => 
    let can = new RTCIceCandidate(candidate);
    conn.addIceCandidate(can);
  );
  return;
;
   

【问题讨论】：

这个问题是因为我在卸载组件时忘记关闭（取消订阅）套接字socket.off('candidate') socket.off('offer') ...。谢谢大家。

【参考方案1】：

您只需重新尝试将相同的 MediaStreamTrack 添加到已拥有它的同一个 Peerconnection。 例如：

var medias = null;
var rc = null;
var p = new RTCPeerConnection();
      navigator.mediaDevices.getUserMedia(audio: true).then((res)=> 
          medias = res;
          p.addTrack(medias.getTracks()[0])
          p.addTrack(medias.getTracks()[0]) // throw Uncaught DOMException: Failed to execute 'addTrack' on 'RTCPeerConnection': A sender already exists for the track.
      );