WebRTC与3个用户连接

Question

我现在使用WebRTC Samples实现源代码，通过使用网状拓扑成为3个用户连接。

但是，我的代码不工作，因为我认为它会。我想我被卡在调用函数iceCallBack#（＃引用数字1,2,3），因为输出结果与原始数据相同。它只能连接2个用户。

我不知道如何以适当的方式解决它。

下面是我的一些JavaScript代码，我一直在努力：

var audio2 = document.querySelector('audio#audio2'); 
 
    var audio3 = document.querySelector('audio#audio3'); 
 
    var pc1; 
 
    var pc2; 
 
    var pc3; 
 

 
    function call() { 
 
     callButton.disabled = true; 
 
     codecSelector.disabled = true; 
 
     trace('Starting call'); 
 
     var servers = null; 
 
     var pcConstraints = { 
 
     'optional': [] 
 
     }; 
 
     pc1 = new RTCPeerConnection(servers, pcConstraints); 
 
     trace('Created local peer connection object pc1'); 
 
     pc1.onicecandidate = iceCallback1; 
 

 
     pc2 = new RTCPeerConnection(servers, pcConstraints); 
 
     trace('Created remote peer connection object pc2'); 
 
     pc2.onicecandidate = iceCallback2; 
 
     pc2.onaddstream = gotRemoteStream; 
 
     trace('Requesting local stream'); 
 

 
     pc3 = new RTCPeerConnection(servers, pcConstraints); 
 
     trace('Created remote peer connection object pc2'); 
 
     pc3.onicecandidate = iceCallback3; 
 
     pc3.onaddstream = gotRemoteStream2; 
 
     trace('Requesting local stream'); 
 

 
     navigator.mediaDevices.getUserMedia({ 
 
     audio: true, 
 
     video: false 
 
     }) 
 
     .then(gotStream) 
 
     .catch(function(e) { 
 
     alert('getUserMedia() error: ' + e.name); 
 
     }); 
 
    } 
 

 

 
    //Description of pc1 creating offer to pc2 
 
    function gotDescription1(desc) { 
 
     desc.sdp = forceChosenAudioCodec(desc.sdp); 
 
     trace('Offer from pc1 \n' + desc.sdp); 
 
     pc1.setLocalDescription(desc, function() { 
 
     pc2.setRemoteDescription(desc, function() { 
 
      pc2.createAnswer(gotDescription2, onCreateSessionDescriptionError); 
 
     }, onSetSessionDescriptionError); 
 
     }, onSetSessionDescriptionError); 
 
    } 
 

 
    //Description of pc1 creating offer to pc3 
 
    function gotDescription3(desc) { 
 
     desc.sdp = forceChosenAudioCodec(desc.sdp); 
 
     trace('Offer from pc1 \n' + desc.sdp); 
 
     pc1.setLocalDescription(desc, function() { 
 
     pc3.setRemoteDescription(desc, function() { 
 
      pc3.createAnswer(gotDescription4, onCreateSessionDescriptionError); //Must edit gotDescription4 
 
     }, onSetSessionDescriptionError); 
 
     }, onSetSessionDescriptionError); 
 
    } 
 

 
    //Creating answer from pc2 
 
    function gotDescription2(desc) { 
 
     desc.sdp = forceChosenAudioCodec(desc.sdp); 
 
     pc2.setLocalDescription(desc, function() { 
 
     trace('Answer from pc2 \n' + desc.sdp); 
 
     pc1.setRemoteDescription(desc, function() { 
 
     }, onSetSessionDescriptionError); 
 
     }, onSetSessionDescriptionError); 
 
    } 
 

 
    //Creating answer from pc3 
 
    function gotDescription4(desc) { 
 
     desc.sdp = forceChosenAudioCodec(desc.sdp); 
 
     pc3.setLocalDescription(desc, function() { 
 
     trace('Answer from pc2 \n' + desc.sdp); 
 
     pc1.setRemoteDescription(desc, function() { 
 
     }, onSetSessionDescriptionError); 
 
     }, onSetSessionDescriptionError); 
 
    } 
 

 
    function iceCallback1(event) { 
 
     if (event.candidate) { 
 
     pc2.addIceCandidate(new RTCIceCandidate(event.candidate), 
 
      onAddIceCandidateSuccess, onAddIceCandidateError); 
 
     pc3.addIceCandidate(new RTCIceCandidate(event.candidate), 
 
      onAddIceCandidateSuccess, onAddIceCandidateError); 
 
     trace('Local ICE candidate: \n' + event.candidate.candidate); 
 
     } 
 
    } 
 

 
    function iceCallback2(event) { 
 
     if (event.candidate) { 
 
     pc1.addIceCandidate(new RTCIceCandidate(event.candidate), 
 
      onAddIceCandidateSuccess, onAddIceCandidateError); 
 
     pc3.addIceCandidate(new RTCIceCandidate(event.candidate), 
 
      onAddIceCandidateSuccess, onAddIceCandidateError); 
 
     trace('Remote ICE candidate: \n ' + event.candidate.candidate); 
 
     } 
 
    } 
 

 
    function iceCallback3(event) { 
 
     if (event.candidate) { 
 
     pc1.addIceCandidate(new RTCIceCandidate(event.candidate), 
 
      onAddIceCandidateSuccess, onAddIceCandidateError); 
 
     pc2.addIceCandidate(new RTCIceCandidate(event.candidate), 
 
      onAddIceCandidateSuccess, onAddIceCandidateError); 
 
     trace('Remote ICE candidate: \n ' + event.candidate.candidate); 
 
     } 
 
    }

<div id="audio"> 
 
     <div> 
 
     <div class="label">Local audio:</div><audio id="audio1" autoplay controls muted></audio> 
 
     </div> 
 
     <div> 
 
     <div class="label">Remote audio2:</div><audio id="audio2" autoplay controls></audio> 
 
     </div> 
 
     <div> 
 
     <div class="label">Remote audio3:</div><audio id="audio3" autoplay controls></audio> 
 
     </div> 
 
</div>

注：我是新支持WebRTC。我可能会以某种方式愚蠢，请原谅我。

非常感谢。

Answer 1

3个用户的网格意味着每个用户建立两个连接，其中一个连接到另外两个用户。在每个客户端，这些是两个完全不同的RTCPeerConnections，并且不能在它们之间重用候选对象，因为每个候选对象都包含专门为媒体分配的端口号以及要发送到的目标。

如果你知道如何建立一个连接，你知道如何设置两个。把事情分开。