html5-qrcode库是一个JavaScript库，只需要提供一个元素容器即可实现扫码功能，有的人说扫描的效率很低，对着二维码1个小时都不一定能识别出来。我咋觉得好用呢？一扫就出来了
官网链接：Getting started | ScanApp
安装 引入
npm install --save-dev html5-qrcode
import { Html5Qrcode,} from 'html5-qrcode'
页面容器
<div id="reader" style="width: 100%; margin: 0 auto;"></div>
使用
使用之前要利用navigator.mediaDevices.getUserMedia判断用户是否给浏览器访问相机的权限。
navigator.mediaDevices.getUserMedia({
video: {
width: 300,
height: 300,
facingMode: { exact: 'environment' },
},
})
.then(function (stream) {
// 允许访问摄像头，可以继续html5Qrcode扫码逻辑
this.startScan()
})
.catch(function (err) {
alert(err+'无法访问摄像头')
})
},
开始扫码
startScan() {
let that = this
// 如果出现未定义或找不到错误，可以在其他地方提前获取到new Html5Qrcode('reader')
that.html5Qrcode = new Html5Qrcode('reader')
// 设置宽度为最小边的百分之64%
let qrboxFunction = function (viewfinderWidth, viewfinderHeight) {
let minEdgePercentage = 0.64 // 64%
let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight)
let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage)
return {
width: qrboxSize,
height: qrboxSize,
}
}
// 可以直接写成 const config = { fps: 10, qrbox: width: 250, height: 250}
const config = { fps: 10, qrbox: qrboxFunction }
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
if (decodedText) {
// 扫到结果，就停止扫描
that.stopScan()
// 这里是传给父组件的-扫描的结果
that.$emit('qrCodeSuccess', decodedText)
}
}
const qrCodeErrorCallback = (errorMessage, error) => {}
// 开始扫码 这里没有规制使用某个摄像头id扫码，一般情况下应该不需要吧，如果要，可以看文档的cameraId
that.html5Qrcode.start(
{ facingMode: { exact: 'environment' } }, //强迫使用后置摄像头 user：前置
config,
qrCodeSuccessCallback,
qrCodeErrorCallback,
)
.catch((err) => {
var errMsg = ''
if (err.indexOf('NotAllowedError') != -1) {
errMsg = 'ERROR: 您需要授予相机访问权限'
} else if (err.indexOf('NotFoundError') != -1) {
errMsg = 'ERROR: 这个设备上没有摄像头'
} else if (err.indexOf('NotSupportedError') != -1) {
errMsg = 'ERROR: 所需的安全上下文(HTTPS、本地主机)'
} else if (err.indexOf('NotReadableError') != -1) {
errMsg = 'ERROR: 相机被占用'
} else if (err.indexOf('OverconstrainedError') != -1) {
errMsg = 'ERROR: 安装摄像头不合适'
} else if (err.indexOf('StreamApiNotSupportedError') != -1) {
errMsg = 'ERROR: 此浏览器不支持流API'
} else {
errMsg = err
}
that.$toast(errMsg)
})
},
停止扫码
// 停止扫描
stopScan() {
if (this.html5Qrcode) {
this.html5Qrcode.stop()
}
},
注意
一定要写上面标红的成功与失败的回调函数，找了很多办法没有扫描成功，就是因为没有写。也可以直接看官方文档，也能看懂。
文档某些解释
Html5QrcodeScanner：简单模式（使用默认用户界面）
Html5Qrcode：专业模式（使用自己的用户界面）
Html5Qrcode.getCameras()：要获取支持的相机列表，请使用静态方法Html5Qrcode.getCameras（）进行查询。此方法返回一个Promise，其中包含支持的设备列表，格式为{id:“id”，label:“label”}。
exact：准确的；精确的；严格的；强迫
