javascript - 动态创建的视频元素上的captureStream()

我正在尝试从动态创建的视频元素中捕获流。当我获取视频元素并尝试使用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);

    });
});

有谁知道如何访问在Chrome和Firefox上均可使用的新添加的视频元素的captureStream方法或另一种从JWPlayer捕获流并将其转换为arraybuffer的方法？

最佳答案

不，问题很简单，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();

关于javascript - 动态创建的视频元素上的captureStream()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45363524/