HTML调用摄像头
发布时间：2023-12-02 18:30
HTML5调用手机摄像头拍照
文末附有完整代码
移动端拍照示例![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/8ba03a2fbaa54d43ab1da1ff72759a8d.png\")
PC端拍照示例
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/0b83c3425d8141ca87702354ec6aa3bf.png\")
示例代码
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/8f7898703e774feaa592e055f53e1e94.png\")
判断是手机端还是PC端
function isMobile() {
let userAgentInfo = navigator.userAgent;
let mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
let mobile_flag = false;
//根据userAgent判断是否是手机
for (let v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
let screen_width = window.screen.width;
let screen_height = window.screen.height;
//根据屏幕分辨率判断是否是手机
if (screen_width > 325 && screen_height < 750) {
mobile_flag = true;
}
return mobile_flag;
}
判断浏览器是否支持
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
vargetUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
returnPromise.reject(newError('getUserMedia is not implemented in this browser'));
}
return newPromise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
调用摄像机
let constraints = {video: true};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
console.log(err.name + ":" + err.message);
});
点击按钮拍照事件
capture.addEventListener('click', function(e) {
if (!flag) {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
$(canvas).show();
$(video).hide();
$(capture).text("重新拍照");
flag = true;
} else {
$(video).show();
$(canvas).hide();
$(capture).text("拍照");
flag = false;
}
});
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调用摄像头拍照</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// 是否是手机
function isMobile() {
let userAgentInfo = navigator.userAgent;
let mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
let mobile_flag = false;
//根据userAgent判断是否是手机
for (let v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
let screen_width = window.screen.width;
let screen_height = window.screen.height;
//根据屏幕分辨率判断是否是手机
if (screen_width > 325 && screen_height < 750) {
mobile_flag = true;
}
return mobile_flag;
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#capture {
width: 80px;
height: 80px;
border-radius: 50%;
line-height: 50px;
text-align: center;
}
canvas {
width: 50%;
height: 50%;
display: none;
}
video {
width: 45%;
height: 45%;
}
</style>
</head>
<body>
<canvas id="canvas" width="720" height="540"></canvas>
<video id="video"></video>
<br /><button id="capture">拍照</button>
<script type="text/javascript">
let flag = false;
const video = document.getElementById('video');
const capture = document.getElementById('capture');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const screen_W = window.innerWidth || document.body.clientWidth;
const screen_H = window.innerHeight || document.body.clientHeight;
canvas.width = screen_W * 3;
canvas.height = screen_H * 3 + 12;
if (isMobile()) {
$(canvas).css({"width": "95%"});
canvas.width = screen_W * 2.5;
canvas.height = screen_W * 3 + 12;
alert("phone");
}
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
vargetUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
returnPromise.reject(newError('getUserMedia is not implemented in this browser'));
}
return newPromise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
//默认使用前摄像头，强制使用后置摄像头如下设置
//let constraints = {video: { facingMode: { exact: "environment" } }};
let constraints = {video: true};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
console.log(err.name + ":" + err.message);
});
capture.addEventListener('click', function(e) {
if (!flag) {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
$(canvas).show();
$(video).hide();
$(capture).text("重新拍照");
flag = true;
} else {
$(video).show();
$(canvas).hide();
$(capture).text("拍照");
flag = false;
}
});
</script>
</body>
</html>
原文地址：https://blog.csdn.net/weixin_39980002/article/details/111786200