3人のユーザが接続しているWebRTC

Question

メッシュトポロジを使用して、WebRTC Samplesのソースコードを3人のユーザにするように実装しました。私はそれが可能だろうと思ったよう

しかし、私のコードは動作しません。出力結果が元のものと同じなので、私は関数iceCallBack#（＃は番号1,2,3）を呼び出すことに固執していると思います。 2人のユーザーしか接続できません。

私は適切な方法でそれを修正する方法がわかりません。

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との新たなんだ。ここ

は、私が働いてきた私のJavaScriptコードの一部です。私は何らかの方法で愚かであるかもしれない、私を許してください。

ありがとうございました。

Answer 1

3人のメッシュのメッシュは、各ユーザーが2つの接続を設定することを意味します。各クライアント側では、これらは完全に異なる2つのRTCPeerConnectionsであり、各候補には、メディアとそのターゲットに割り当てられたポート番号が含まれているため、それらの間で候補を再利用することはできません。

接続を1つ設定する方法がわかっている場合は、2つの接続を設定する方法が分かります。ちょっと物事を分けてください。