浏览器调用摄像头扫二维码

dgiij

于 2024-09-03 21:47:15 发布

阅读量256

点赞数 3

文章标签： html5 视频图像处理 javascript 前端 edge浏览器 safari

本文链接：https://blog.csdn.net/dgiij/article/details/141872614

版权

此前用微信扫一扫很方便，不过用微信扫一扫需要有微信公众号或者服务号，微信小程序扫码也很方便，不过需要微信开发者账号，而且现在微信小程序好些地方也开始计费了。所以扫二维码也得考虑一下其他的免费候选方案。
其实现在比较新的手机，摄像头也大都支持扫二维码，不过接口不统一，终端类型较多的情况下，对开发者是很麻烦的。好在浏览器有标准统一的接口获取摄像头的视频流，这个基本就够用了。至于扫码二维码，可以通过视频流截图，用JS的一些二维码库来识别，比如jsQR就比较好用。
以下给出一个例子，在ios下可以正常工作，注意需要放在https的web路径下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>浏览器扫二维码</title>
</head>
<body>
<script src="./jquery-3.6.1.min.js"></script>
<script src="./jsQR.js"></script>
<br>
<button style="width: 240px; height: 60px;" id="scanqr">点击扫码</button><br><br>
<video id="video" width="320" height="320" autoplay muted playsinline style="display:none"></video>
<canvas id="canvas" width="320" height="320" style="display:none"></canvas>
<script>
$(document).ready(()=>{
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const constraints = { video: { facingMode: "environment" } };

function scanQRCode() {
	video.style.display = "";
	if (video.readyState === video.HAVE_ENOUGH_DATA) {
		context.drawImage(video, 0, 0, 320, 320);
		const imageData = context.getImageData(0, 0, 320, 320);
		const code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: "dontInvert", });
    		if (code) {
			video.style.display = "none";
			return alert(code.data);
			}
		}
	setTimeout(scanQRCode, 100);
	}

$("#scanqr").click(()=>{ 
	navigator.mediaDevices.getUserMedia(constraints)
		.then(stream => { video.srcObject = stream; video.play(); })
		.catch(error => { console.error('无法访问摄像头:', error); });
	scanQRCode(); 
	});

})
</script>
</body>
</html>

dgiij

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浏览器调用摄像头扫二维码

其实现在比较新的手机，摄像头也大都支持扫二维码，不过接口不统一，终端类型较多的情况下，对开发者是很麻烦的。好在浏览器有标准统一的接口获取摄像头的视频流，这个基本就够用了。至于扫码二维码，可以通过视频流截图，用JS的一些二维码库来识别，比如jsQR就比较好用。此前用微信扫一扫很方便，不过用微信扫一扫需要有微信公众号或者服务号，微信小程序扫码也很方便，不过需要微信开发者账号，而且现在微信小程序好些地方也开始计费了。以下给出一个例子，在ios下可以正常工作，注意需要放在https的web路径下。
复制链接

扫一扫