如何在页面中调用本机的摄像头
前段时间,机缘巧合,了解了一手如何在前端页面中调用本机摄像头的方法。
使用了navigator.mediaDevices.getUserMedia()的方法,具体可以参考MDN
首先要准备一个video标签,用来存放摄像头捕捉到的画面
还要准备一个canvas,用来存放拍下的照片
<video id="video" width="500" height="500"></video>
<canvas id="canvas" width="500" height="500"></canvas>
//用来匹配不同的浏览器
function getUserMedia(constraints,success,error){
if(navigator.mediaDevices.getUserMedia){
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
}else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(constraints,success,error);
}else if (navigator.mozGetUserMedia) {
navigator.mozGetUserMedia(constraints,success,error);
}else if (n