javascript - captureStream() on dynamically created video element -


i trying capture stream dynamically created video element. when video element , try videoelement.capturestream() firefox returns videoelement.capturestream not function same code works on chrome. problem seems firefox has issue dynamically created video element. tried mutation observer detect newly added video element , access capturestream method no luck posting code sample below (i using adapter.js 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() {         (var = 0, len = listeners.length, listener, elements; < len; i++) {         listener = listeners[i];         elements = doc.queryselectorall(listener.selector);         (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 know how access capturestream method of newly added video element both works on chrome , firefox or approach capture stream , convert arraybuffer jwplayer?

no, problem firefox still prefixes htmlmediaelement#capturestream.

so need call video.mozcapturestream(), , 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 support both chrome , ff : 

let stream = video.mozcapturestream ? video.mozcapturestream() : video.capturestream();

Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more