captureStream（）动态创建的视频元素 [英] captureStream() on dynamically created video element

问题描述

我试图从动态创建的视频元素捕获流。当我得到视频元素，并尝试videoElement.captureStream（）Firefox返回 videoElement.captureStream不是一个功能，但相同的代码在Chrome上工作。问题似乎Firefox有动态创建视频元素的问题。我尝试突变观察员来检测新添加的视频元素，并访问captureStream方法没有运气我张贴下面的代码示例（我正在使用adapter.js WebRTC
pre $ （函数（win）{

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

函数就绪（selector，fn）{
listeners.push（{
selector：selector，
fn ：
if（！observer）{
observer = new MutationObserver（check）;
observer.observe（doc.documentElement，{
childList：









$ function check（）{
for（var i = 0，len = listeners.length，listener，elements;我< LEN; i ++）{
listener = listeners [i];
elements = doc.querySelectorAll（listener.selector）; （var j = 0，jLen = elements.length，element; 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' ，函数（e）{
//用firefox在这里e.target.captureStream或者element.captureStream返回错误
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？ 解决方案

不，问题很简单，Firefox仍然以 HTMLMediaElement＃captureStream 。

所以你需要调用 video.mozCaptureStream（），这甚至可以用于内联视频元素。

（<文档中：captureStream：$ {inDoc.captureStream} mozCaptureStream：$ {inDoc.mozCaptureStream}`）

< var dyn = document.createElement（'video'）; console.log（`Dynamic：captureStream：$ {dyn.captureStream} mozCaptureStream：$ {dyn.mozCaptureStream}`）

/ div>

所以为了支持chrome和FF：

  let stream = video.mozCaptureStream？ video.mozCaptureStream（）：video.captureStream（）; 
  

I am trying to capture stream from dynamically created video element. when I get the video element and try to videoElement.captureStream() Firefox returns videoElement.captureStream is not a function but the same code works on Chrome. Problem seems like Firefox has an issue with dynamically created video element. I tried mutation observer to detect the newly added video element and access the captureStream method with no luck I am posting the code sample below (I am using adapter.js for WebRTC https://webrtc.github.io/adapter/adapter-latest.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);

    });
});

does anyone know how to access captureStream method of a newly added video element which both works on Chrome and Firefox or another approach to capture stream and convert it to arraybuffer from JWPlayer?

解决方案

No, the problem is simply that Firefox still prefixes HTMLMediaElement#captureStream.

So you need to call video.mozCaptureStream(), and this even for inlined video elements.

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">

So in order to support both chrome and FF :

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

这篇关于captureStream（）动态创建的视频元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！