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();