//------RECORDER var recorder; var stream var dDownload = document.getElementById("idDownloader"); var isRec=false; function doStart(){ if(isRec)return; stream = mycanvas.captureStream(); const options = { audioBitsPerSecond: 128000, videoBitsPerSecond: 2500000, mimeType: "video/webm;codecs=vp9" } recorder = new MediaRecorder(stream,options); //recorder = new MediaRecorder(stream, {mimeType:"video/mp4;codecs=\"avc1.4D401E, mp4a.40.2\""}); //{mimeType:"video/webm;codecs=vp9"} recorder.ondataavailable = function(e) { var videoBlob = new Blob([e.data], { type: e.data.type }); blobUrl = window.URL.createObjectURL(videoBlob); dDownload.download = "ar-filter-video.webm"; dDownload.href = blobUrl; dDownload.style.display = "block"; } recorder.onerror = (event) => { alert("error!") }; recorder.start(); videoStatus("status:now recording ..."); $("#bStart").removeClass("pure-button"); $("#bStart").addClass("pure-button-off"); $("#bEnd").removeClass("pure-button-off"); $("#bEnd").addClass("pure-button"); dDownload.style.display = "none"; isRec=true; } function doEnd(){ if(!isRec)return; recorder.stop(); $("#bEnd").removeClass("pure-button"); $("#bEnd").addClass("pure-button-off"); $("#bStart").removeClass("pure-button-off"); $("#bStart").addClass("pure-button"); videoStatus("status:recording finished. Please click download link."); isRec=false; } //------SNAPSHOT var dllink = document.getElementById("idSnap"); var filename = "ar-filter-snapshot.png"; function capSave(){ document.getElementById("sndShutter").play(); if (mycanvas.msToBlob) { var blob = mycanvas.msToBlob(); window.navigator.msSaveBlob(blob, filename); } else { dllink.href = mycanvas.toDataURL("image/png"); dllink.download = filename; dllink.click(); } }