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

Posted 2023-05-08

【中文标题】动态创建的视频元素上的 captureStream()

【英文标题】：captureStream() on dynamically created video element

【发布时间】：2018-01-03 22:26:20

【问题描述】：

我正在尝试从动态创建的视频元素中捕获流。当我获取视频元素并尝试 videoElement.captureStream() Firefox 返回 videoElement.captureStream is not a function 但相同的代码适用于 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？

【参考方案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();

【讨论】：

感谢您的回复。我对 adapter.js 感到困惑，我认为它会处理浏览器方法名称，但似乎没有