HTML调用摄像头

最新推荐文章于 2024-05-05 11:58:16 发布

.陌路

最新推荐文章于 2024-05-05 11:58:16 发布

阅读量3.7k

点赞数 4

分类专栏： web前端移动端 PC端文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_51076413/article/details/127702477

版权

web前端同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

移动端

2 篇文章 0 订阅

订阅专栏

PC端

2 篇文章 0 订阅

订阅专栏

HTML5调用手机摄像头拍照

文末附有完整代码

移动端拍照示例

PC端拍照示例

在这里插入图片描述

示例代码

在这里插入图片描述

判断是手机端还是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>