您的位置:首页 > 汽车 > 新车 > 浏览器调用摄像头扫二维码

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

2024/10/7 18:19:17 来源: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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com