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

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

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

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

vue本地项目设置https访问icon-default.png?t=N7T8https://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() // 重置
 }
}))

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值