WebRTC 제안을 추상화하는 방법은 무엇입니까?

Question

WebRTC의 오퍼 생성 프로세스의 추상화에 이상한 문제가 발생했습니다. 들어오는 얼음 후보자가 널 후보에 결코 도달하지 않는 것처럼 보입니다. 필자는 거의 동일한 코드를 사용하기 전에 제안을 성공적으로 생성했지만 내 추상 버전은 원래 20 개 정규 20 개에 비해 12 개의 후보에 불과합니다. 이것은 매우 이상합니다. 코드는 거의 같지만 추상화 된 브라우저는 동일한 브라우저에서도 작동하지 않습니다.

원래 작업 코드 : 당신은 아마 당신의 createOffer 기능과 initStream 사이에 경쟁이

//general rtc vars 
var localConn = new webkitRTCPeerConnection({'iceServers':[{'url':'stun:stun.1.google.com:19302'}]}); 
var remoteConn = new webkitRTCPeerConnection({'iceServers':[{'url':'stun:stun.1.google.com:19302'}]}); 
//var mediaStream; 
var channel; 

//creates a stream from webcam 
//@params function streamHandle(stream) 
function initStream(streamHandle){ 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 
    var constraints = {audio:true,video:true}; 
    navigator.getUserMedia(constraints, successStream, errorStream); 
    //onSuccess and Error functions 
    function successStream(stream){ 
     window.stream = stream; 
     console.log('TreRTC: Local Stream-'+ stream.id); 
     //mediaStream = stream; 
     localConn.addStream(stream); //not sure if these need to be added before 
     remoteConn.addStream(stream); //or if they can be added in the creatOffer(stream) function 
     streamHandle(stream); //gets inserted into createOffer function 
    } 
    function errorStream(error){ 
     console.log('navigator.getUserMedia error: ', error); 
    } 
} 

//creates an offer to be sent 
//@params Stream stream (from getusermedia) 
//@return string offer 
function createOffer(stream){ 
    console.log('TreRTC: Creating Offer'); 
    //localConn.addStream(stream); //tried both ways from top and from internal 
    //remoteConn.addStream(stream); 

    localConn.createOffer(function (sessionDescription){ 
     localConn.setLocalDescription(sessionDescription); 
    }, function(error){ 
     console.log('Error setting local description: '+error); 
    }); 

    localConn.onicecandidate = function(iceEvt){ 
     console.log('TreRTC: ICE in');   //ice events firing (12 total) 
     if(iceEvt.candidate === null){ 
      console.log('TreRTC: ICE gathered'); //never reaches to this point... 
      var offer = {'type': localConn.localDescription.type, 
         'sdp': localConn.localDescription.sdp}; 
      offer = JSON.stringify(offer); 
      console.log('TreRTC: Offer initialized'); 
      return offer; //returns offer as a string 
     } //could also specify a callback 
    } 
} 

Answer 1

streamHandle(stream); //gets inserted into createOffer function 

추상화 기능을

var localConn = new webkitRTCPeerConnection({'iceServers':[{...}]}); 
    var remoteConn = new webkitRTCPeerConnection({'iceServers':[{...}]}); 

    function initMedia(localView, callback){ 
     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 
     var constraints = {audio:true,video:true}; 
     navigator.getUserMedia(constraints, successStream, errorStream); 
     //onSuccess and Error functions 
     function successStream(stream){ 
      window.stream = stream; 
      if(window.URL){ 
       $('#'+localView).attr('src',window.URL.createObjectURL(stream)); 
      } else { 
       $('#'+localView).attr('src',stream); 
      } 
      localConn.addStream(stream); 
      remoteConn.addStream(stream); 
      console.log('local Stream: '+ stream.id); 
      callback();  //-> goes on to create new offer 
     } 
     function errorStream(error){ 
      console.log('navigator.getUserMedia error: ', error); 
     } 
    } 

    //function that generates offer and sends it out to a callback 
    function newOffer(callback){ 
     console.log('creating new offer'); 

     localConn.createOffer(function (sessionDescription){ 
      localConn.setLocalDescription(sessionDescription); 
     }, function(error){ 
      console.log('Error setting local description: '+error); 
     }); 
     createOffer(); 
     //gather ICE with a callback to handle/send generated offer 
     function createOffer(){ 
      localConn.onicecandidate = function(iceEvent){ 
       console.log('gathering local ice');  //ice events fired (20 total) 
       //upon gathering all local ice 
       if(iceEvent.candidate === null){ 
        console.log('local ice gathered'); //success 
        var offer = {'type': localConn.localDescription.type, 
           'sdp': localConn.localDescription.sdp}; 
        offer = JSON.stringify(offer); 
        console.log('offer created'); 
        callback(offer); 
       } 
      } 
     } 
    } 

새로운 버전 (못하고 널 얼음 후보) 기능이 완료되었습니다. 두 개는 실제로 동작 할 때 설정 한 모든 항목을 계산할 때 효과적으로 비동기식이므로 표시하지 않으므로 확실하게 알 수 없습니다 그 코드).

WebRTC를 추상화하려면 이전 레거시 API를 제거하고 대신 RTCPeerConnection의 modern promise-methods을 사용해야합니다. 약속은 콜백에 대한 우월한 추상화입니다. 정확하게 이와 같은 레이스를 다룰 때입니다.

또한 협상을 트리거하기 위해 onnegotiationneeded 콜백을 사용하여이 문제를 해결하는 방법을 고려해보십시오 (단, bug in Chrome은주의해야 함).

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection(); 
 

 
navigator.mediaDevices.getUserMedia({video: true, audio: true}) 
 
    .then(stream => pc1.addStream(video1.srcObject = stream)) 
 
    .catch(e => console.log(e)); 
 

 
pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate); 
 
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate); 
 

 
pc2.ontrack = e => video2.srcObject = e.streams[0]; 
 
pc1.oniceconnectionstatechange = e => console.log(pc1.iceConnectionState); 
 
pc1.onnegotiationneeded = e => 
 
    pc1.createOffer().then(d => pc1.setLocalDescription(d)) 
 
    .then(() => pc2.setRemoteDescription(pc1.localDescription)) 
 
    .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d)) 
 
    .then(() => pc1.setRemoteDescription(pc2.localDescription)) 
 
    .catch(e => console.log(e));

<video id="video1" width="160" height="120" autoplay muted></video> 
 
<video id="video2" width="160" height="120" autoplay></video> 
 
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>