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

最新推荐文章于 2025-05-08 11:38:04 发布

原创最新推荐文章于 2025-05-08 11:38:04 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍了如何在Vue本地项目中使用@zxing/library插件在HTTPS环境中通过摄像头进行二维码扫描，包括下载、引入库和实现连续扫描的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

vue本地项目设置https访问https://blog.youkuaiyun.com/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() // 重置
 }
}))