WebRTC remoteVideo stream not working

Question

私は、自分自身にブラウザウィンドウを接続し、マイカメラからビデオデータをストリーミングする簡単なwebRTCアプリケーションを追加しました。最終的な目標は、ページから2つのビデオストリームを取得することです.1つはカメラから直接取得し、もう1つはブラウザがローカルで作成したWebRTC接続から取得します。

残念ながら、リモートビデオストリームは表示されません。どんな考え？

<video id="yours" autoplay></video> 
<video id="theirs" autoplay></video> 

そして、ここでは、私がのWebRTCのダンRisticの本を、次の、彼がコーディングでやったことを理解していjavascriptの

function hasUserMedia() { 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 
     navigator.msGetUserMedia; 

    return !!navigator.getUserMedia; 
    } 

    function hasRTCPeerConnection() { 
    window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection 
     || window.mozRTCPeerConnection; 

    return !!window.RTCPeerConnection; 
    } 

    var yourVideo = document.querySelector('#yours'), 
    theirVideo = document.querySelector('#theirs'), 
    yourConnection, theirConnection; 


    if (hasUserMedia()) { 
     navigator.getUserMedia({ video: true, audio: false }, function(stream) { 
     yourVideo.src = window.URL.createObjectURL(stream); 
     if (hasRTCPeerConnection()) { 
      startPeerConnection(stream); 
     } else { 
     alert("Sorry, your browser does not support WebRTC."); 
     } 
     }, function (error) { 
     console.log(error); 
     }); 
     }else{ 
      alert("Sorry, your browser does not support WebRTC."); 
     } 


    function startPeerConnection(stream){ 
     var configuration = { 
      "iceServers": [{ "url": "stun:stun.1.google.com:19302" 
      }] 
     }; 

     yourConnection = new RTCPeerConnection(configuration); 
     theirConnection = new RTCPeerConnection(configuration); 



     // Setup stream listening 
     yourConnection.addStream(stream); 

     theirConnection.onaddstream = function (event) { 
      theirVideo.src = window.URL.createObjectURL(event.stream); 
      console.log('stream added'); 
     }; 

     // console.log(yourConnection); 
      //console.log(theirConnection); 

     // Setup ice handling 
     yourConnection.onicecandidate = function (event) { 
     if (event.candidate) { 
       theirConnection.addIceCandidate(new RTCIceCandidate(event. 
       candidate)); 
      } 
     }; 
     theirConnection.onicecandidate = function (event) { 
      if (event.candidate) { 
       yourConnection.addIceCandidate(new RTCIceCandidate(event. 
       candidate)); 
      } 
     }; 

      // Begin the offer 
     yourConnection.createOffer(function (offer) { 
      yourConnection.setLocalDescription(offer); 
      theirConnection.setRemoteDescription(offer); 

      theirConnection.createAnswer(function (offer) { 
       theirConnection.setLocalDescription(offer); 
       yourConnection.setRemoteDescription(offer); 
      }); 
     }); 
    }; 

です。残念ながら、リモートビデオは表示されません。

Answer 1

エラーコールバックを追加してください。それ以外の場合はエラーが表示されないだけでなく、実際にはエラーが発生します。

あなたはWebIDLオーバーロードと呼ばれるものの犠牲者です。 WebRTC APIには2つのバージョンがあり、それらは混在しています。

modern promise APIは例えば、あります：

pc.createOffer(options).then(successCallback, failureCallback); 

とdeprecated callback version、例えば：

つまり

pc.createOffer(successCallback, failureCallback, options); 

、異なる引数の数を取る2つのcreateOfferの機能があります。

1つの引数しか渡していないため、残念ながら、最初のcreateOfferに当てはまります。最初のcreateOfferは、残念ながらWebIDLの中で関数と区別がつかないoptionsオブジェクトを予期しています。したがって、有効な引数（空のオプションオブジェクト）として扱われます。

pc.createOffer(3).catch(e => console.log("Here: "+ e.name)); // Here: TypeError 

あなたはどちらか返さ約束を確認していないエラーがあるので、：これはTypeErrorを引き起こした場合でも、約束のAPIが例外をスローするのではなく、返された約束を拒否するので、それは、例外を発生させていないだろう失われた

は、ここで作業バージョン（Chromeのhttps fiddle）です：

navigator.getUserMedia = navigator.getUserMedia || 
 
         navigator.webkitGetUserMedia || 
 
         navigator.mozGetUserMedia; 
 
window.RTCPeerConnection = window.RTCPeerConnection || 
 
          window.webkitRTCPeerConnection; 
 

 
var yourConnection, theirConnection; 
 

 
navigator.getUserMedia({ video: true, audio: false }, function(stream) { 
 
    yourVideo.src = window.URL.createObjectURL(stream); 
 

 
    var config = { "iceServers": [{ "urls": "stun:stun.1.google.com:19302"}] }; 
 
    yourConnection = new RTCPeerConnection(config); 
 
    theirConnection = new RTCPeerConnection(config); 
 

 
    yourConnection.addStream(stream); 
 

 
    theirConnection.onaddstream = function (event) { 
 
     theirVideo.src = window.URL.createObjectURL(event.stream); 
 
    }; 
 

 
    yourConnection.onicecandidate = function (e) { 
 
     if (e.candidate) { 
 
      theirConnection.addIceCandidate(new RTCIceCandidate(e.candidate), 
 
              success, failure); 
 
     } 
 
    }; 
 
    theirConnection.onicecandidate = function (e) { 
 
     if (e.candidate) { 
 
      yourConnection.addIceCandidate(new RTCIceCandidate(e.candidate), 
 
              success, failure); 
 
     } 
 
    }; 
 

 
    yourConnection.createOffer(function (offer) { 
 
     yourConnection.setLocalDescription(offer, success, failure); 
 
     theirConnection.setRemoteDescription(offer, success, failure); 
 
     theirConnection.createAnswer(function (offer) { 
 
      theirConnection.setLocalDescription(offer, success, failure); 
 
      yourConnection.setRemoteDescription(offer, success, failure); 
 
     }, failure); 
 
    }, failure); 
 
}, failure); 
 

 
function success() {}; 
 
function failure(e) { console.log(e); };

<video id="yourVideo" width="160" height="120" autoplay></video> 
 
<video id="theirVideo" width="160" height="120" autoplay></video>

しかし、コールバックが面倒です。

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

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

 
var add = (pc, can) => pc.addIceCandidate(can).catch(log); 
 
pc1.onicecandidate = e => add(pc2, e.candidate); 
 
pc2.onicecandidate = e => add(pc1, e.candidate); 
 

 
pc2.ontrack = e => video2.srcObject = e.streams[0]; 
 
pc1.oniceconnectionstatechange = e => 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(log); 
 

 
var log = msg => console.log(msg);

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