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。支援的瀏覽器