【Web】H5页面扫码qrcode识别成功,测试项目源码完整下载.zip

共6个文件

js：3个

css：1个

project：1个

H5页面

4星 · 超过85%的资源需积分: 47 65 浏览量 2020-04-26 11:55:12 上传评论 1 收藏 101KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

【Web】H5页面扫码qrcode识别成功,测试项目源码完整下载.zip （6个子文件）

【Web】H5页面扫码qrcode识别成功,测试项目源码完整下载

stone.test.webscan

test.html 4KB

llqrcode.js 44KB

jquery.js 274KB

jquery.colorbox-min.js 12KB

css

colorbox.css 4KB

.project 662B

img

<!doctype html> <html lang="en"> <head> <title>页面扫码测试</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> </head> <body> <button id="scan">二维码扫描</button> <div id="log"> </div> <div hidden="hidden"> <div id="divQRScan"> <div class="tab-content">  <video id="QRvideo" muted autoplay playsinline width="300" height="400" style="display: block;"></video> <canvas id="qr-canvas" style="display:none;"></canvas> </div> </div> </div> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.colorbox-min.js" type="text/javascript" charset="utf-8"></script> <script src="js/llqrcode.js"></script> <script> function log(msg) { $("#log").append(msg + "<br/>"); } var videoInputDevice = []; var videoElement = document.getElementById("QRvideo"); var canvasElement = document.getElementById("qr-canvas"); var canvasContext = document.getElementById("qr-canvas").getContext("2d"); var canvasTimer = null; var decodeTimer = null; function captureToCanvas() { try { // 根据视频大小设置canvas大小 let w = videoElement.videoWidth; let h = videoElement.videoHeight; canvasElement.width = w; canvasElement.height = h; canvasContext.drawImage(videoElement, 0, 0, w, h); } catch (e) { //log(e); }; // 100毫秒绘制一次 canvasTimer = setTimeout(captureToCanvas, 100); } function decode() { try { qrcode.decode(); } catch (e) { //log(e); }; // 100毫秒绘制一次 decodeTimer = setTimeout(decode, 100); } //扫码识别完成 qrcode.callback = (e) => { // 清除画布，停止摄像头 if (!!decodeTimer) clearTimeout(decodeTimer); if (!!canvasTimer) clearTimeout(canvasTimer); canvasContext.clearRect(0, 0, 300, 400); if (window.stream) { window.stream.getTracks().forEach((track) => { track.stop(); }); } $.colorbox.close(); log("得到扫码结果：" + e); } //获取摄像头列表 navigator.mediaDevices.enumerateDevices().then(function(devices) { for (let i = 0; i !== devices.length; ++i) { let deviceInfo = devices[i]; //log(deviceInfo.kind + ":" + deviceInfo.label + "; id = " + deviceInfo.deviceId) if (deviceInfo.kind === 'videoinput') { // 视频设备 videoInputDevice.push(deviceInfo); } } }); //开始扫码 document.querySelector('#scan').addEventListener('click', () => { try { //显示拍照框 $.colorbox({ scrolling: false, reposition: true, inline: true, href: "#divQRScan" }); //开启摄像头 navigator.mediaDevices.getUserMedia({ audio: false, video: { deviceId: { // [1].deviceId 表示后置摄像头,默认开启的是前置摄像头 exact: videoInputDevice[1].deviceId } } }).then(function(stream) { window.stream = stream; videoElement.srcObject = stream; videoElement.play(); captureToCanvas(); decode(); }).catch(function(error) { $.colorbox.close(); if (error.toString().indexOf("TypeError: Cannot read property 'deviceId' of undefined") != -1) { alert("无法访问摄像头！请授予手机浏览器摄像头权限或切换至有摄像头权限的浏览器!"); } else { log(error.toString()); } }); canvasContext.clearRect(0, 0, 300, 400); } catch (e) { log(e); } }); </script> </body> </html>

评论收藏

内容反馈

batups

2022-12-09

找了很多个，就这个好用。如果再能集成条码一起识别就更完美了
weixin_51999749

2022-04-14

TypeError: Cannot read property 'deviceId' of undefined 不能用
qq_39278812

2021-03-03

识别率不是那么高，这个有办法解决吗
冰河路径

2021-02-15

哥们实在！！下载了n个了，就这个是直接能用的！！朋友能不能把识别条码也加上？或者告诉我怎么弄，谢谢了！
qq_39256864

2020-06-18

手机电脑都不能用

qq_40909318
上传者
2020-08-21

是IIS部署后浏览的吗？