RTCPeerConnection.ontrackイベントが起動しない

RTCPeerConnection.addTrack（）関数によって新しいMediaStreamTrackオブジェクトが作成されるたびに、WebRTCで自分の足を濡らし、RTCPeerConnection.ontrackイベントの問題が発生します。RTCPeerConnection.ontrackイベントが起動しない

WebRTC getUserMediaの教科書の例を使用して、スタートボタンをクリックしたときに、1つの要素（ローカル）のsrcObjectとして設定したラップトップのカメラから1つのストリームを取得します。 Callボタンをクリックすると、グラブされたストリームに対してaddTrackメソッドが使用されます。グローバルなlocalStream変数に保持されます。この時点で、グローバルに定義されたontrackイベントハンドラが起動し、2番目のビデオを私に渡すべきでしょうか？しかし、サイコロはありません。

これをaddStreamとonaddstreamで動作させることはできましたが、両方とも最新のWebRTC仕様から削除されています。最新のバージョンのChromeとFireFoxではサポートされていません。

写真とスクリプトが添付されています - ご指導いただければ幸いです！

Pic with Web Console output

'use strict'; 

var localStream; 
var yourVideo = document.querySelector('#yours'); 
var theirVideo = document.querySelector('#theirs'); 
var callBtn = document.querySelector('#callBtn'); 
var startBtn = document.querySelector('#startBtn'); 
startBtn.onclick = hasUserMedia; 
callBtn.onclick = call; 

var cfg = null; 
var pc1 = new RTCPeerConnection(cfg); 
var pc2 = new RTCPeerConnection(cfg); 

pc1.ontrack = function(e){ 
    console.log("ontrack fired!"); 
    theirVideo.srcObject = e.streams[0]; 
} 

function hasUserMedia(){ 
    console.log("entering hasUserMedia()..."); 
    navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(function(stream){ 

    localStream = stream; 
    console.log("stream val: " + localStream); 

    yourVideo.srcObject = stream; 

    }); 
} 

function call(){ 
    console.log("stream val @ call(): " + localStream); 
    localStream.getTracks().forEach(track => pc1.addTrack(track, localStream)); 
}

index.htmlを

<html lang="en"> 
     <head> 
     <meta charset="utf-8" /> 
     <title>Learning WebRTC - Chapter 4: Creating a 
     RTCPeerConnection</title> 
     <style> 
      body { 
      background-color: #3D6DF2; 
      margin-top: 15px; 
      } 
      video { 
      background: black; 
      border: 1px solid gray; 
      } 
      #container { 
      position: relative; 
      display: block; 
      margin: 0 auto; 
      width: 500px; 
      height: 500px; 
      } 
      #yours { 
      width: 150px; 
      height: 150px; 
      position: absolute; 
      top: 15px; 
      right: 15px; 
      } 
      #theirs { 
      width: 500px; 
      height: 500px; 
      } 
     </style> 
     </head> 
     <body> 
     <div id="container"> 
     <video id="yours" autoplay></video> 
     <video id="theirs" autoplay></video> 
     <button id="startBtn">Start</button> 
     <button id="callBtn">Call</button> 
     </div> 
     <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> 
     <script type="text/javascript" src="main.js"></script> 
     </body> 
</html>

出典

2016-12-14 Adam

ヒント：使用[adapter.js]（https://github.com/webrtc/adapter）は 'Chromeでontrack'をポリフィルします。例：https://jsfiddle.net/aynr0k5q/ – jib