扫描二维码或条形码获取结果

文章目录

• vue-qrcode-reader
• html5-qrcode
• 页面调用

vue-qrcode-reader

vue-qrcode-reader 主要依赖Stream API，不支持Vue Native

1. 下载 vue-qrcode-reader 插件：npm install vue-qrcode-reader
2. 引入 QrcodeStream 调用摄像头扫码（还提供了拍照或选择相册扫码，看个人需求）
3. 调用init（初始化摄像机）和decode（返回二维码编码的字符串）/ detect（在 decode 之前触发；还会返回相机框架内二维码的坐标）方法

注意：

1. Chrome 需要 Https 或本地主机环境
2. 在 Chrome 浏览器中，不能第二次提示用户访问相机权限，一旦拒绝，只能手动授予权限
   不支持：彩色反转二维码（深色背景、浅色前景）、Model 1 二维码。

效果

html5-qrcode

介绍

html5-qrcode 是轻量级和跨平台的 QR 码和条形码扫码的 JS 库，集成二维码、条形码和其他一些类型的代码扫描功能，代码依赖于 Zxing-js 库
优势：

1. 支持扫描不同类型的条形码和二维码
2. 支持不同平台，Android、IOS、MacOS、Windows 或 Linux
3. 支持不同的浏览器，如 Chrome、Firefox、Safari、Edge
4. 支持相机扫描以及本地文件
5. 附带一个端到端库与 UI 以及一个低级库，以建立自己的 UI
6. 支持自定义，如闪光 / 火炬支持、缩放等

使用

1. 下载 html5-qrcode 插件：npm install html5-qrcode
2. 添加一个元素，作为一个占位符的二维码扫描仪（高度由摄像机的视频馈送的纵横比得出）
   

注意：直接访问摄像头，涉及到隐私，所以环境必须是https

效果

页面调用