原生的JS实现摄像头拍照/扫码

作者：你好赵伟 | 2024-08-05 07:26:51

踩

原生的JS实现摄像头拍照/扫码

已经三个月没有写博客了吧，因为工作有点忙，写完之后就想在床上躺着，所以就一直没有写过了，今天七夕，没人给我玩。只能写博客了

最近工作上需要在前端页面进行拍照以及解析条形码和二维码，所以研究了下JS的API，但是只支持谷歌内核的浏览器
可以在这里看下： https://developer.mozilla.org/zh-CN/docs/Web/API

接下来上代码，这个是封装好的相机组件


/**
 * 创建相机对象
 * @Author Fanxing
 * @param app  绑定div
 * @param width 宽度 （与app宽度相同
 * @param height 高度 （与app高度相同
 * @param type 没有类型，忽略。。不是相机前置或后置。。
 * ps: 扫码结果在 res.text里，方法是qrcode  获取拍照图片调用 getImg
 */
function camera(app, width, height, type) {
	let appObject = document.getElementById(app);
	let video = document.createElement("video");
	let span = document.createElement("span");
	let facingMode = 'environment';
	const codeReader = new ZXingBrowser.BrowserMultiFormatReader();
	video.style.width = width
	video.id = 'video'
	video.style.height = height
	video.autoplay = "autoplay";
	video.style.margin = 0;
	appObject.insertBefore(video, appObject.childNodes[0]);
	/**
	 *  修改优先使用那颗摄像头，前置或后置
	 * */
	this.setFacingMode = function(type) {
		// 前置摄像头：user 后置摄像头：environment
		facingMode = type;
	}
	this.establish = function establish() {
		let constraints = {
			video: {
				facingMode: facingMode,
				height: height,
				width: width
			},
			audio: false
		};
		let promise = navigator.mediaDevices.getUserMedia(constraints);
		promise.then(function(MediaStream) {
			video.srcObject = MediaStream;
			video.play();
		}).catch(function(PermissionDeniedError) {
			console.log(PermissionDeniedError);
		})
	}
	this.photograph = function photograph() {
		canvas = document.createElement("canvas");
		canvas.height = height;
		canvas.width = width;
		let ctx = canvas.getContext('2d');
		ctx.drawImage(video, 0, 0, width, height);
		return canvas;
	}
	// 解析码，获取解码的内容
	this.qrcode = function qrcode() {
		var promise = codeReader.decodeOnceFromVideoElement(video);
		// codeReader.decodeOnceFromVideoElement(video).then(function(res){
		// 	console.log("res:" + res)
		// 	return res;
		// })
		console.log(promise)
		return promise;
	}
	this.getImg = function getImg() {
		return this.photograph().toDataURL('image/jpeg')
	}
	this.close = function close() {
		this.MediaStreamTrack && this.MediaStreamTrack.stop();
	}
	// 开始疯狂扫码
	this.starcode = function starcode() {
		alert("在外部实现！！！")
	}
	//停止疯狂扫码
	this.stopcode = function stopcode() {
		alert("在外部实现！！！")
	}
}

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

扫码功能需要：zxing-browser.min.js

DEMO：

<!doctype html>
<html lang="en">
	<head>
		<title>GET VIDEO</title>
		<meta charset="utf-8">
	</head>
	<body>

		<span id="sa"></span>
		<div style="width:500px;height:800px;border: 1px solid red;" id="app">

		</div>
		<button id="snap" onclick="qr()">拍照吧</button>
		<button id="snap" onclick="vi.close()">拍照</button>
		<script type="text/javascript" src="js/zxing-browser.min.js"></script>
		<script type="application/javascript" src="js/xcamera.js"></script>
		<script>
			let vi = new camera("app", 500, 1000);
			vi.establish()

			function qr() {
				vi.qrcode().then(function(res) {
					if (res.text != undefined) {
						alert("识别成功" + res.text);
					}
				})
			}
		</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

在这里插入图片描述

代码和zxing的下载地址：https://gitee.com/fxboy/html-camera

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/931362