使用@zxing/library实现扫码识别

注意 ！！！ @zxing/library插件只能运行在https环境下或localhost，本地启动https看我写的文章

vue本地项目设置https访问https://blog.csdn.net/Q_v3_v2/article/details/134143769?spm=1001.2014.3001.5502

1、下载

npm install @zxing/library

2、引入

import { BrowserMultiFormatReader } from '@zxing/library'

3、具体实现步骤

const codeReader = new BrowserMultiFormatReader()
const firstDeviceId = null
codeReader.listVideoInputDevices().then((videoInputDevices)=>{  
 //videoInputDevices 设备摄像头参数数组
 firstDeviceId = videoInputDevices[0].deviceId  //调用摄像头id
}) // 调用摄像头


//firstDeviceId调用的摄像头id
//video 视频标签id <video id="video"><video/>
codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId,'video',(result,err=>{
 if(result) {  
    // 扫描成功后的结果在result.text里面，在移动端通过alert(result)测试会有误差
    console.log(result.text) // 扫描结果
    codeReader.reset() // 重置
 }
}))