js调取计算机本地摄像头

开启摄像头 拍照 关闭摄像头

// 拍照
function takePhoto() {
//获得Canvas对象
let video = document.getElementById(‘video’);
let canvas = document.getElementById(‘canvas’);
let ctx = canvas.getContext(‘2d’);
ctx.drawImage(video, 0, 0, 500, 500);

// toDataURL — 可传入’image/png’—默认, ‘image/jpeg’
let img = document.getElementById(‘canvas’).toDataURL();
// 这里的img就是得到的图片
console.log(‘img-----’, img);
document.getElementById(‘imgTag’).src=img;
//上传
$.ajax({
url:"/xxxx.do"
,type:“POST”
,data:{“imgData”:img}
,success:function(data){
console.log(data);
document.gauges.forEach(function(gauge) {
gauge.value =data.data
});
}
,error:function(){
console.log(“服务端异常！”);
}
});

}

// 关闭摄像头
function closeMedia() {
let stream = document.getElementById(‘video’).srcObject;
let tracks = stream.getTracks();

tracks.forEach(function(track) {
track.stop();
});

document.getElementById(‘video’).srcObject = null;
}

其中有一点就是 navigator.mediaDevices.getUserMedia 这个方法使用的是 webapi
地址 https://developer.mozilla.org/zh-CN/docs/Web/API
只能在 https，localhost 的前标下才可访问。