此前用微信扫一扫很方便,不过用微信扫一扫需要有微信公众号或者服务号,微信小程序扫码也很方便,不过需要微信开发者账号,而且现在微信小程序好些地方也开始计费了。所以扫二维码也得考虑一下其他的免费候选方案。
其实现在比较新的手机,摄像头也大都支持扫二维码,不过接口不统一,终端类型较多的情况下,对开发者是很麻烦的。好在浏览器有标准统一的接口获取摄像头的视频流,这个基本就够用了。至于扫码二维码,可以通过视频流截图,用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>