html5有提供一個可以取得視訊的api,使用navigator.getUserMedia,可以取得鏡頭的影像及聲音,example如下。
html:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <video autoplay></video> <img src=""> <canvas style="display:none;"></canvas> <script type="text/javascript" src="cameraSnapshot.js"></script> </body> </html>
cameraSnapshot.js:
(function(){ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var video = document.querySelector('video'); var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var localMediaStream = null; var img = document.querySelector('img'); function snapshot() { if (localMediaStream) { canvas.width = img.width = video.clientWidth; canvas.height = img.height = video.clientHeight; ctx.drawImage(video, 0, 0); img.src = canvas.toDataURL('image/webp'); } } video.addEventListener('click', snapshot, false); if( navigator.getUserMedia ){ navigator.getUserMedia({video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); localMediaStream = stream; },function( error ){ alert("User denied access to their camera!"); }); }else{ alert("The browser is not support"); } })();
這個範例主要是使用getUserMedia取得user的授權,將會回傳user所選的鏡頭串流,接著觸發video的click event,把目前video的畫面,繪製在canvas,在轉換成image。支援的瀏覽器