浏览器扫码插件qr-scanner使用教程 & 踩坑记录

儿子照片镇楼嘻嘻

需求背景

最近接到一个需求，需要使用iPad浏览器进行扫码

【为什么需求这么变态要用浏览器扫码！！！因为笔者从事的是房地产行业，案场使用较多的设备是iPad，比较方便～～～废话不多说，上菜！】

经过多方调研【百度谷歌搜索】最终决定使用qr-scanner这个插件
npm文档链接：www.npmjs.com/package/qr-…
github链接： github.com/nimiq/qr-sc…
demo链接： qrcodescan.in

注意调试的时候，http是无法唤起摄像头的，需要https

框架是vue，第一步

npm install --save qr-scanner
复制代码

第二步

import QrScanner from 'qr-scanner';  
复制代码

第三步

配置WORKER_PATH，这一步最坑了，没配或者没配对都不会有扫码成功的回调，尝试过用file-loader和raw-loader但是最终还是没成功，所以使用了最保险稳妥的方式，将 qr-scanner-worker.min.js这个文件丢进public里，这样打包也不会改变它，再引入

QrScanner.WORKER_PATH = './qr-scanner-worker.min.js';
复制代码

第四步

创建qrScanner实例并且按照文档api开启扫描仪

const qrScanner = new QrScanner(document.querySelector('video'), result => {
        console.log('打印的', result)
        // 可以在这里进行扫码成功之后的操作，只有扫码成功才会进入这里
      })
     qrScanner.start();
复制代码

这时候就可以在浏览器看到扫描二维码得到的结果啦