如何抽象WebRTC提供？

Question

我遇到了一個奇怪的問題，WebRTC的提供生成過程的抽象。看起來好像即將到來的冰候選人從未到達空候選人。在使用幾乎相同的代碼之前，我已經成功地生成了優惠，但無論出於何種原因，我的抽象版本只能達到12個候選人，而我原來的20個常規版本相比。這很奇怪，看起來代碼幾乎相同，但抽象的代碼即使在同一瀏覽器上也不起作用。

原工作代碼：

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

新版本的抽象函數（沒有得到空冰候選人）

//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 

你可能有你的createOffer功能，您initStream之間的競爭函數完成，因爲當你計算他們設置的所有動作時，這兩者實際上是異步的（很難確定，因爲你沒有顯示該代碼）。

如果你想抽象WebRTC，你應該考慮下車舊的傳統API，而不是使用RTCPeerConnection的modern promise-methods。當談到像這樣處理比賽時，諾言是優秀的回調抽象。

還可以考慮使用onnegotiationneeded回調觸發協商，以解決此問題（但要注意bug in Chrome）。

這裏有一個本地連接的例子（使用https fiddle在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>