javascript - Get data URL from video stream? -
i have video (webm) capture script works fine. records video offers download. pertinent part of code this:
stopbtn.addeventlistener('click', function() { recorder.ondataavailable = e => { ul.style.display = 'block'; var = document.createelement('a'), li = document.createelement('li'); a.download = ['video_', (new date() + '').slice(4, 28), '.'+vid_format].join(''); a.textcontent = a.download; a.href = url.createobjecturl(stream); //<-- deprecated usage? li.appendchild(a); ul.appendchild(li); }; recorder.stop(); startbtn.removeattribute('disabled'); stopbtn.disabled = true; }, false);
this works, say. however, console says passing media streams url.createobjecturl
deprecated, , should use htmlmediaelement srcobject
instead.
so changed to:
a.href = url.createobjecturl(video.srcobject);
...and although still works, same warning.
does know how can url or blob data without deprecated way?
i have tried reading src
, currentsrc
properties video element, come empty stream involved.
i surprised code did work...
if stream
mediastream
, browser should not know size have download, not when stop downloading (it's stream).
mediarecorder#ondataavailable
expose event data
property filled chunk of recorded mediastream. in event, have store these chunks in array, , download concatenation of these blobs chunks, in mediarecorder#onstop event.
const stream = getcanvasstream(); // we'll use canvas stream works in stacksnippet const chunks = []; // store our blobs chunks const recorder = new mediarecorder(stream); recorder.ondataavailable = e => chunks.push(e.data); // new chunk blob given in event recorder.onstop = exportvid; // when recorder stops, export whole; settimeout(() => recorder.stop(), 5000); // stop in 5s recorder.start(1000); // chunks 1s function exportvid() { var blob = new blob(chunks); // here concatenate our chunks in single blob var url = url.createobjecturl(blob); // creat bloburl blob var = document.createelement('a'); a.href = url; a.innerhtml = 'download'; a.download = 'myfile.webm'; document.body.appendchild(a); stream.gettracks().foreach(t => t.stop()); // never bad close stream when not needed anymore } function getcanvasstream() { const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'red'; // simple animation recorded let x = 0; const anim = t => { x = (x + 2) % 300; ctx.clearrect(0, 0, 300, 150); ctx.fillrect(x, 0, 10, 10); requestanimationframe(anim); } anim(); document.body.appendchild(canvas); return canvas.capturestream(30); }
url.createobjecturl(mediastream)
used <video>
elements. led difficulties browsers close physical devices access, since bloburls can have longer lifetime current document.
deprecated call createobjecturl
mediastream, , 1 should use mediaelement.srcobject = mediastream
instead.
Comments
Post a Comment