Recording video using Webapi
Tested, only in Google and Firefox browser.
Code:
Const STREAMVIDEO = Document.queryselector ('. Stream ') const PlayVideo = Document.queryselector ('. Play '); let Chunk; Const DOWNLOAD = document.queryselector (' #download '); let Recorder;let mediastream;document.queryselector ('. Start '). AddEventListener (' click ', start);d ocument.queryselector ('. End '). AddEventListener (' click ', end); Document.queryselector ('. Play-video '). AddEventListener (' click ', play);//Mediarecorder Test Const CONSTRAINTS = {audio: False, Video:true,};function start () {Navigator.mediaDevices.getUserMedia (constraints). Then (stream = {Me Diastream = stream; Streamvideo.srcobject = stream; Streamvideo.play (); Recorder = new Mediarecorder (stream); Recorder.ondataavailable = e = {chunk = E.data; Download.href = Url.createobjecturl (chunk); }; Recorder.start (); })}function end () {streamvideo.pause (); Recorder.stop (); Mediastream.gettracks (). ForEach (track = {track.stop (); });} function Play () {PLAYVIDEO.SRC = Url.createobjecturl (chunk); Playvideo.play ();}
complete code;
Online demo, open with Google or Firefox browser
JS Record video and save