Angular p2p視頻聊天 - 遠程流是黑色視頻

Question

我想在呼叫者和被叫之間建立一個簡單的p2p視頻聊天。

這是代碼：

var OnBroadcast 
    , i 
    , isCaller = true 
    //just for testing pourpose 
    , URLparams = $location.search() 
    , iceServers = { 
     'iceServers':[{ 
     'url':'stun:stun.l.google.com:19302' 
     }] 
    } 
    , connOpt = { 
     'optional':[{ 
     'DtlsSrtpKeyAgreement': true 
     }] 
    } 
    , sdpConstraints = { 
     'mandatory': { 
     'OfferToReceiveAudio': true, 
     'OfferToReceiveVideo': true 
     } 
    } 
    , localVideo = $window.document.getElementById('localVideo') 
    , remoteVideo = $window.document.getElementById('remoteVideo') 
    , peerConnection = new RTCPeerConnection(iceServers, connOpt); 

if (URLparams && URLparams.stranger) { 

    isCaller = false; 
} 
peerConnection.onaddstream = function (stream) { 
    if (!isCaller) { 
    $log.info('Caller Stream is', stream); 
    peerConnection.addStream(stream.stream); 
    remoteVideo.src = $window.URL.createObjectURL(stream.stream); 
    } 
}; 

peerConnection.onicecandidate = function (ices) { 
    if (isCaller) { 

     ws.broadcast({ 
     'scope': 'callerICES', 
     'message': ices 
     }); 
    } else { 

     ws.broadcast({ 
     'scope': 'calleeICES', 
     'message': ices 
     }); 
    } 
}; 

navigator.getUserMedia({ 
    'audio': true, 
    'video': true 
    }, function (stream) { 

    localVideo.src = $window.URL.createObjectURL(stream); 

    if (isCaller) { 
    /* VIDEO CHAT P2P---------- 
    * create CALLER Peer 
    * CALLER addStream to peer 
    * create CALLER Offer and CALLER setLocalDescription 

    * send CALLER Offer to CALLEE and set CALLEE remoteDescription 

    * create Answer from CALLEE and CALLEE setLocalDescription 

    * send Answer to CALLER and set CALLER setRemoteDescription 

    * CALLER icecandidate and send it to CALLEE and CALLEE addIceCandidate 

    * CALLEE icecandidate and send it to CALLER and CALLER addIceCandidate 

    * CALLEE addStream 
    */ 
    peerConnection.addStream(stream); 

    peerConnection.createOffer(function (offer) { 

     peerConnection.setLocalDescription(offer, function() { 

      ws.broadcast({ 
      'scope': 'callerOFFER', 
      'message': offer 
      }); 
     }); 
    }, function (err) { 
     $log.error('Unable to create Offer from Caller', err); 
    }); 
    } 
}, function (err) { 
    $log.error('Unable to getUserMedia', err); 
}); 

OnBroadcast = $rootScope.$on('comunicator:toAll', function (eventInfo, message) { 

    if (message.what.scope === 'callerOFFER') { 

    if (!isCaller) { 

     peerConnection.setRemoteDescription(new RTCSessionDescription(message.what.message), function() { 
     peerConnection.createAnswer(function (answer) { 

      $log.info('Setup localDesc Callee'); 
      peerConnection.setLocalDescription(new RTCSessionDescription(answer), function() { 

       ws.broadcast({ 
       'scope':'calleeANSWER', 
       'message': answer 
       }); 
      }, function (err) { 
      $log.info('Unable to set localDesc for Callee', err); 
      }, 
      sdpConstraints); 
     }, function (err) { 
      $log.error('Unable to create Answer from Callee', err); 
     }); 
     }); 
    } 
    } 

    if (message.what.scope === 'calleeANSWER') { 

    if (isCaller) { 

     peerConnection.setRemoteDescription(new RTCSessionDescription(message.what.message), function() { 

     $log.info('Setup remoteDesc Callee'); 
     }); 
    } 
    } 

    if (message.what.scope === 'callerICES') { 

    if (!isCaller) { 

     for (i = 0; i < message.what.length; i += 1) { 

     peerConnection.addIceCandidate(new RTCIceCandidate(message.what[i])); 
     } 
     $log.info('Setup CALLEE ices', message.what); 
    } 
    } 

    if (message.what.scope === 'calleeICES') { 

    if (isCaller) { 

     for (i = 0; i < message.what.length; i += 1) { 

     peerConnection.addIceCandidate(new RTCIceCandidate(message.what[i])); 
     } 
     $log.info('Setup CALLER ices', message.what); 
    } 
    } 
}); 

一切似乎工作，但是當我將遠程視頻<video id="remoteVideo"></video>我看到一個黑色的視頻而已，我在同一個網址和同一Wi-Fi測試此：

來電者：本地主機：8000

被叫：本地主機：8000陌生人=真

有人能解釋我這是問題嗎？

Answer 1

應該注意的是，我們shold不加ICECandidate到PeerConnection它的前remoteDescription設置，假設這是不是你目前的問題，它可能是：

peerConnection.onaddstream = function (stream) { 
    if (!isCaller) { 
    $log.info('Caller Stream is', stream); 
    peerConnection.addStream(stream.stream);  // ---> specially this line. 
    remoteVideo.src = $window.URL.createObjectURL(stream.stream); 
    } 
}; 

我不知道爲什麼被調用者發回遠程流，因爲它是本地流，除了使用此代碼的情況外，調用者在接收到被調用者的流時不會執行任何操作。 peerConnection.addStream用於與遠程用戶共享您的本地流。並且通常被叫方不需要等待主叫方的流以其流的方式進行響應。所以更改上面的代碼到...

peerConnection.onaddstream = function (event) { 
    $log.info('add stream event:', event); 
    remoteVideo.src = $window.URL.createObjectURL(event.stream); 
}; 

...  // also add the retrieved stream to peerConnection for both caller and callee. 

navigator.getUserMedia({ 
    'audio': true, 
    'video': true 
    }, function (stream) { 

     peerConnection.addStream(stream);  // before if (isCaller) check 
     localVideo.src = $window.URL.createObjectURL(stream); 
     if (isCaller) { 
... 

比我希望你寫的代碼只是用於測試的原型，如果工作的WebRTC，它已經得到了一些設計問題等，少數人可能是：

• 冰候選人處理可以是杵狀，在主叫方或被叫方iceCandidate之間沒有區別。
• 不喜歡顯式指定調用者和被調用者的方式。
• 當前系統不支持每個房間多個對等點。