<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<h2>按鈕模擬拍照</h2>
</body>
<script type="text/javascript">
var aVideo = document.getElementById('video');
var aCanvas = document.getElementById('canvas');
var ctx = aCanvas.getContext('2d');
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia; //獲取媒體對象（這里指攝像頭）
navigator.getUserMedia({
video: true
}, gotStream, noStream); //參數1獲取用戶打開權限；參數二成功打開后調用，並傳一個視頻流對象，參數三打開失敗后調用，傳錯誤信息
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function() {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function() {
alert('攝像頭成功打開！');
};
}
function noStream(err) {
alert(err);
}
document.getElementById("snap").addEventListener("click", function() {
ctx.drawImage(aVideo, 0, 0, 640, 480); //將獲取視頻繪制在畫布上
});
</script>
</html>
