HTML调用摄像头

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

判断浏览器是否支持

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);
		});
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

调用摄像机

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);
	});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

点击按钮拍照事件

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;
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

完整代码

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

原文地址：https://blog.csdn.net/weixin_39980002/article/details/111786200

相关阅读:
Spring Boot集成xstream快速入门demo
WebRTC源码之摄像头视频数据采集源码分析
 gradle 改为国内镜像下载
 酷快讯：Eminem和Snoop Dogg无聊猿新MV加持后ApeCoin上涨22%
自定义函数
 java：java.util.StringTokenizer实现字符串切割
 Windows系统连接华为eNSP模拟器配置FTP实验
 如何在Docker容器中运行和使用dnsmasq？
如何让社交媒体成为跨境电商驱动力？这款独立站工具不能错过！
郭晶晶家的象棋私教，好家伙是个机器人
原文地址：https://blog.csdn.net/qq_51076413/article/details/127702477