如何在页面中调用本机的摄像头
前段时间,机缘巧合,了解了一手如何在前端页面中调用本机摄像头的方法。
使用了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 (navigator.getUserMedia) {
navigator.getUserMedia(constraints,success,error)
}
}
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
//成功回调
function success(stream){
video.srcObject = stream;
video.play();
}
//失败回调
function error(error) {
console.log("访问用户媒体失败");
}
//开启摄像头
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
getUserMedia({video:{width:500,height:500}},success,error)
}else {
alert("不支持");
}
//实现拍照的功能
document.getElementById('snap').addEventListener('click',function(){
context.drawImage(video,0,0,500,500);
});
如果需要将拍下来的图片传送给服务器,那么还需要将图片转成base64码
imgData = canvas.toDataURL();
var photo = imgData.substr(22);