1. 通過getUserMedia調用設備的攝像頭（電腦、手機都可以，取決于瀏覽器對這個API的支持情況），并將資源放入video標簽。
2. 將video內的視頻資源通過canvas的drawImage API放入canvas里，這個canvas是不顯示的。
3. 將canvas的內容轉換成base64編碼的webp格式的圖像（如果瀏覽器不支持這個格式，會fallback到png格式）放入img里，于是你就能看到你拍的照片了。
不廢話了，上代碼：
<!doctype html> <html> <head> <title>html5 capture test</title> <link rel="stylesheet" href="style.css"> </head> <body> <video autoplay></video> <img src=""> <canvas ></canvas> <button id="capture">snapshot</button> <script src="index.js"></script> </body> </html>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
var snapshot = function () {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
document.querySelector('img').src = canvas.toDataURL('p_w_picpath/webp');
}
};
var sizeCanvas = function () {
setTimeout(function () {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
img.width = video.videoWidth;
img.height = video.videoHeight;
}, 100);
};
var btnCapture = document.getElementById('capture');
btnCapture.addEventListener('click', snapshot, false);
navigator.webkitGetUserMedia(
{video: true},
function (stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
sizeCanvas();
},
function () {
alert('your browser does not support getUserMedia');
}
);不同瀏覽器對getUserMedia的支持情況不同，需要加上前綴，比如webkitGetUserMedia、mozGetUserMedia、msGetUserMedia，如果你想屏蔽這一問題的話，可以這樣做：
// cross platforms var myGetUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
Chrome對file:///做了很多的限制，跨域就不說了，geolocation也不能在本地下使用，這個getUserMedia也是。
這個sizeCanvas函數做的事情就是保證你拍到的照片的大小和攝像頭拍到的大小是一樣的，否則會出現拍到的照片只有攝像頭錄到的一部分畫面的情況。
http://blog.csdn.net/journey191/article/details/40744015
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
