captureStream() on dynamically created video element

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?

62 thoughts on “captureStream() on dynamically created video element”

Leave a Comment