調攝像頭 實時錄製視訊 下載
阿新 • • 發佈：2020-12-07
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<video width="400" height="300" controls id="video" autoplay></video>
<div>
<button type="button" id="record">record</button>
<button type="button" id="pause">pause</button>
<button type="button" id="resume">resume</button>
<button type="button" id="stop">stop</button>
<button type="button" id="finish">finish</button>
<a href="#" target="_blank" id="download">download</a>
</div>
<div>
<button type="button" id="info">info</button>
<button type="button" id="isTypeSupported">isTypeSupported</button>
</div>
<script type="text/javascript">
(
原文連結：https://www.cnblogs.com/xiaoniuzai/p/8031999.html
<!DOCTYPEhtml> <htmllang="en"><head> <title></title> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1"> </head>
<body> <videowidth="400"height="300"controlsid="video"autoplay></video> <div> <buttontype="button"id="record">record</button> <buttontype="button"id="pause">pause</button> <buttontype="button"id="resume">resume</button> <buttontype="button"id="stop">stop</button> <buttontype="button"id="finish">finish</button> <ahref="#"target="_blank"id="download">download</a> </div> <div> <buttontype="button"id="info">info</button> <buttontype="button"id="isTypeSupported">isTypeSupported</button> </div>
<scripttype="text/javascript"> (function(){ letmediaRecorder=null; letmediaStream=null; letchunks=[];
functiongetMediaStream(params){ varconstraints={ audio:true, video:true };
returnnavigator .mediaDevices .getUserMedia(constraints); }
functionattachMedia(){ getMediaStream() .then(stream=>{ console.log(stream,888888) document.querySelector('#video').srcObject=stream; mediaStream=stream; }) .catch(err=>alert(`${err.name}:${err.message}`)); }
functionrecord(){ mediaRecorder=newMediaRecorder(mediaStream,{ mimeType:"video/webm" });
mediaRecorder.addEventListener('dataavailable',e=>{ console.log('dataavailable%o',e); chunks.push(e.data); }); mediaRecorder.addEventListener('error',e=>console.log('error%o',e)); mediaRecorder.addEventListener('pause',e=>console.log('pause%o',e)); mediaRecorder.addEventListener('resume',e=>console.log('resume%o',e)); mediaRecorder.addEventListener('start',e=>console.log('start%o',e)); mediaRecorder.addEventListener('stop',e=>console.log('stop%o',e));
//呼叫時可以通過給timeslice引數設定一個毫秒值,如果設定這個毫秒值,那麼錄製的媒體會按照你設定的值進行分割成一個個單獨的區塊,而不是以預設的方式錄製一個非常大的整塊內容. mediaRecorder.start(10); }
functionstop(){ mediaRecorder.stop(); }
functionpause(){ mediaRecorder.pause(); }
functionresume(){ mediaRecorder.resume(); }
functionstop(){ mediaRecorder.stop(); }
functiondownload(){ varblob=newBlob(chunks,{ type:"video/webm" });
chunks=[];
vardownloadLink=document.querySelector('a#download'); varvideoURL=window.URL.createObjectURL(blob); varrand=Math.floor((Math.random()*10000000)); varname="video_"+rand+".webm";
downloadLink.href=videoURL; downloadLink.setAttribute("download",name); downloadLink.setAttribute("name",name); }
functioninfo(){ console.log(`mimeType${mediaRecorder.mimeType}`); console.log(`state${mediaRecorder.state}`); console.log(`stream${mediaRecorder.stream}`); console.log(`videoBitsPerSecond%o`,mediaRecorder.videoBitsPerSecond); console.log(`audioBitsPerSecond${mediaRecorder.audioBitsPerSecond}`); }
functionisTypeSupported(){ vartypes=[ "video/webm", "audio/webm", "video/webm\;codecs=vp8", "video/webm\;codecs=daala", "video/webm\;codecs=h264", "audio/webm\;codecs=opus", "video/mpeg" ];
for(variintypes){ console.log(`Is${types[i]}supported?${MediaRecorder.isTypeSupported(types[i]?"Maybe!":"No")}`); } }
document.querySelector('#record').addEventListener('click',e=>record()); document.querySelector('#pause').addEventListener('click',e=>pause()); document.querySelector('#resume').addEventListener('click',e=>resume()); document.querySelector('#stop').addEventListener('click',e=>stop()); document.querySelector('#finish').addEventListener('click',e=>download());
document.querySelector('#info').addEventListener('click',e=>info()); document.querySelector('#isTypeSupported').addEventListener('click',e=>isTypeSupported());
attachMedia(); })() </script> </body>
</html>