当第二次创建对等连接WebRTC时出现问题(轨道已经存在发送器.)，我应该处理任何想法

Question

我使用的是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;
};

Answer 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.
});