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
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
