captureStream（）動態創建的視頻元素

Question

我想從動態創建的視頻元素中捕獲流。當我獲取視頻元素並嘗試videoElement.captureStream（）時，Firefox返回videoElement.captureStream不是函數，但相同的代碼適用於Chrome。問題看起來像Firefox有動態創建視頻元素的問題。我試圖突變觀察者檢測新添加的視頻元素並沒有運氣我張貼下面的代碼示例訪問captureStream方法（我使用的WebRTC https://webrtc.github.io/adapter/adapter-latest.js adapter.js）

(function (win) { 

    var listeners = [], 
     doc = win.document, 
     MutationObserver = win.MutationObserver || win.WebKitMutationObserver, 
     observer; 

    function ready(selector, fn) { 
     listeners.push({ 
     selector: selector, 
     fn: fn 
     }); 
     if (!observer) { 
     observer = new MutationObserver(check); 
     observer.observe(doc.documentElement, { 
      childList: true, 
      subtree: true 
     }); 
     } 
     check(); 
    } 

    function check() { 
     for (var i = 0, len = listeners.length, listener, elements; i < len; i++) { 
     listener = listeners[i]; 
     elements = doc.querySelectorAll(listener.selector); 
     for (var j = 0, jLen = elements.length, element; j < jLen; j++) { 
      element = elements[j]; 
      if (!element.ready) { 
      element.ready = true; 
      listener.fn.call(element, element); 
      } 
     } 
     } 
    } 

    win.ready = ready; 

})(this); 



ready('.jw-video',function(element){ 
    var stream = null; 
    element.addEventListener('play',function(e){ 
    //with firefox here e.target.captureStream or element.captureStream returns error 
    stream = e.target.captureStream(); 

    var mediaRecorder = new MediaRecorder(stream); 
    mediaRecorder.onerror = function(error){ 
     console.log("media recorder error:",error); 
    } 
    mediaRecorder.start(); 
    mediaRecorder.ondataavailable = function(evt){ 
     console.log("mediaRecorderData"); 
     var blob = evt.data; 

     var fileReader = new FileReader(); 
     var arraybuffer; 
     fileReader.onload = function(){ 
      arraybuffer = fileReader.result; 
      console.log("arraybuffer"); 
      console.log(arraybuffer); 
      chunks.push(arraybuffer); 
      sendChunks(chunks); 
     }; 
     fileReader.readAsArrayBuffer(blob); 
    } 
    window.setInterval(function(){ 
     mediaRecorder.requestData();        
    },3000); 

    }); 
}); 

沒有人知道如何訪問captureStream方法，新增加的視頻元素既可以在Chrome和Firefox上工作，也可以採用另一種方法來捕獲流並將其轉換爲JWPlayer的arraybuffer？

Answer 1

不，問題很簡單，Firefox仍然是前綴HTMLMediaElement#captureStream。

所以你需要撥打video.mozCaptureStream()，這甚至對於內聯視頻元素。

console.log(`In document : 
 
captureStream : ${inDoc.captureStream} 
 
mozCaptureStream : ${inDoc.mozCaptureStream} 
 
`) 
 

 
var dyn = document.createElement('video'); 
 
console.log(`Dynamic : 
 
captureStream : ${dyn.captureStream} 
 
mozCaptureStream : ${dyn.mozCaptureStream} 
 
`)

<video id="inDoc">

所以爲了支持Chrome和FF：

let stream = video.mozCaptureStream ? video.mozCaptureStream() : video.captureStream();