web调用摄像头拍照
Posted jerrycjc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web调用摄像头拍照相关的知识，希望对你有一定的参考价值。
`<!doctype html>
<canvas id="canvas" style="display:none;"></canvas>
<script>
!(function () {
function takePhotos() {
if (videoPlaying) {
let canvas = document.getElementById(‘canvas‘);
canvas.width = v.videoWidth;
canvas.height = v.videoHeight;
canvas.getContext(‘2d‘).drawImage(v, 0, 0);
let data = canvas.toDataURL(‘image/webp‘);
//base64
//console.log(data);
//保存图片
//document.getElementById(‘photo‘).setAttribute(‘src‘, data);
document.getElementById(‘imgList‘).innerHTML += ‘<img data-pro="img" src="‘ + data + ‘" id="photo" alt="" style="width:70px;height:60px;">‘;
}
}
document.onkeydown = function (e) { // 回车提交表单
document.getElementById(‘take‘).blur();
// 兼容FF和IE和Opera
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
takePhotos();
}
}
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error(‘getUserMedia is not implemented in this browser‘));
}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
const constraints = {
video: true,
audio: false
};
let videoPlaying = false;
let v = document.getElementById(‘v‘);
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream => {
// 旧的浏览器可能没有srcObject
if ("srcObject" in v) {
v.srcObject = stream;
} else {
// 防止再新的浏览器里使用它，应为它已经不再支持了
v.src = window.URL.createObjectURL(stream);
}
v.onloadedmetadata = function (e) {
v.play();
videoPlaying = true;
};
}).catch(err => {
console.error(err.name + ": " + err.message);
})
document.getElementById(‘take‘).addEventListener(‘click‘, takePhotos, false);
})();
</script>
以上是关于web调用摄像头拍照的主要内容，如果未能解决你的问题，请参考以下文章