RTCPeerConnection.ontrack事件沒有觸發

當WebRTC陷入困境時，RTCPeerConnection.ontrack事件遇到問題時（RTCPeerConnection.addTrack（）函數）創建新的MediaStreamTrack對象時不會觸發問題。RTCPeerConnection.ontrack事件沒有觸發

使用教科書WebRTC getUserMedia示例，我從筆記本電腦的相機中抓取單個流，當單擊「開始」按鈕時，我將其設置爲一個元素（本地）的srcObject。當單擊「呼叫」按鈕時，我在抓取的流上使用addTrack方法，該流在全局localStream變量中保存。此時，全局定義的ontrack事件處理程序應該觸發並給我第二個視頻，對吧？雖然沒有骰子。

我能夠使用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）到填充工具'ontrack'在Chrome。例如：https：//jsfiddle.net/aynr0k5q/ – jib