【随手记录】关于浏览器调用摄像头样例
可以通过以下样例代码,实现在浏览器端打开摄像头,并抓拍图片,图片以data url格式保存
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摄像头调用</title>
<script>
var videoPlaying = false;
// 打开摄像头
function openVedio() {
// 老的浏览器可能根本没有实现 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);
});
}
}
var constraints = {
video: true,
audio: false
};
// 这里注意 ID 要唯一!
videoObject = document.getElementById('vedio-camera');
var promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream => {
// 旧的浏览器可能没有srcObject
if ("srcObject" in videoObject) {
videoObject.srcObject = stream;
} else {
// 防止再新的浏览器里使用它，因为它已经不再支持了
videoObject.src = window.URL.createObjectURL(stream);
}
videoObject.onloadedmetadata = function (e) {
videoObject.play();
videoPlaying = true;
};
}).catch(err => {
Djfz.Layer.msg("打开摄像头失败，请核验是否开启摄像头访问权限！！");
console.error(err.name + ": " + err.message);
})
}
// 关闭摄像头
function closeVedio() {
if (videoObject != null && videoObject.srcObject != null && videoObject.srcObject.getVideoTracks() != null) {
videoObject.srcObject.getVideoTracks().forEach(function (track) {
track.stop();
});
}
// Image清空
document.getElementById('image-pic').setAttribute('src', "");
}
var dataImgInfo = null;
// 抓拍
function takePic() {
if (videoPlaying) {
var canvas = document.getElementById('vedio-canvas');
canvas.width = videoObject.videoWidth;
canvas.height = videoObject.videoHeight;
canvas.getContext('2d').drawImage(videoObject, 0, 0);
var data = canvas.toDataURL('image/jpeg');
document.getElementById('image-pic').setAttribute('src', data);
}
}
</script>
</head>
<body>
<div class="layout-horizontal">
<button id="open" onclick="openVedio()">打开摄像头</button>
<button id="take" onclick="takePic()">拍照</button>
<div class="layout-full">
<!-- 这里注意 ID 要唯一! -->
<video id="vedio-camera" style="width: 100%;height: 100%;"></video>
<canvas id="vedio-canvas" data-name="vedio-canvas" style="display:none;"></canvas>
</div>
<div class="layout-fixed layout-width-250" style="background-color: #8D8D8D ">
<!-- 这里注意 ID 要唯一! -->
<img src="" id="image-pic" alt="采集图片" style="width: 250px;height: 250px;">
</div>
</div>
</body>
</html>
如果未能打开摄像头，查看 Chrome浏览器是否允许开启摄像头(权限问题):
在Chrome的设置 ---> 隐私和安全 --> 网站设置 ---> 摄像头 --> 查看是否开启摄像头权限
不允许的话 浏览器输入chrome://flags
搜 unsafely 然后在Insecure origins treated as secure 输入自己的网站 之后就重启就可以操作摄像头了!
