Vue + zxing 实现扫二维码、条形码功能

zXing ：一个开源的、多格式的一维/二维条码图像处理库；地址: https://github.com/zxing-js/library

官方提供的多种扫描案例：https://zxing-js.github.io/library/

注意： Zxing 只能运行在 'localhost' 或者 ‘https’ 域名下(webRTC必须在https环境下运行)；

使用 zxing 前提：必须保证摄像头正常，我们可以打开相机测试相机是否可用，如果可用请跳过直接看下面的实现代码；

如果在打开相机时，发现提示"找不到你的相机"，打开设备管理器也找不到照相机，可参考下面的解决办法；

解决办法：直接 Fn+F6 键（不同的电脑按键可能不一样，记得找摄像头标识的按键），然后稍等一会发现设备管理器出现了照相机！！

安装插件

  npm install @zxing/librarynpm install --save webrtc-adapter

案例一、

<template><div class="page-scan"><!-- 扫码区域 --><div class="QrCode"><video ref="video" height="100%" width="100%" id="video" autoplay></video></div><!-- 扫码样式一 --><div class="Qr_scanner"><div class="box"><div class="line_row"><div class="line"></div></div><div class="angle"></div></div></div></div>
</template><script>
// WebRTC适配器 只需要引入就ok
import 'webrtc-adapter'
import { BrowserMultiFormatReader } from '@zxing/library'
export default {name: 'scanCodePage',data() {return {codeReader: null}},mounted() {this.codeReader = new BrowserMultiFormatReader()this.openScan()},beforeUnmount() {this.codeReader && this.codeReader.reset()},methods: {async openScan() {this.codeReader.listVideoInputDevices().then((videoInputDevices) => {// 默认获取第一个摄像头设备idlet firstDeviceId = videoInputDevices[0].deviceId// 获取第一个摄像头设备的名称const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label)if (videoInputDevices.length > 1) {// 判断是否后置摄像头if (videoInputDeviceslablestr.indexOf('back') > -1) {firstDeviceId = videoInputDevices[0].deviceId} else {firstDeviceId = videoInputDevices[1].deviceId}}this.codeReader && this.codeReader.reset() // 重置this.decodeFromInputVideoFunc(firstDeviceId)}).catch((err) => {console.error(err)})},decodeFromInputVideoFunc(firstDeviceId) {this.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId,'video',(result, err) => {if (result) {console.log('扫描结果', result)// if (result.text) {//     this.clickIndexLeft(result.text)// }}if (err && !err) {console.error(err)}})},// 停止扫描，并返回上一页clickIndexLeft(result) {this.codeReader && this.codeReader.reset()this.codeReader = null// this.$route.params.result = result// this.$router.back()}}
}
</script><style lang="scss" scope>
.QrCode {width: 100vw;height: 100vh;position: relative;#video {width: 100%;height: 100%;object-fit: cover;}
}.Qr_scanner {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);
}
.Qr_scanner .box {width: 75vw;height: 75vw;max-height: 75vh;max-width: 75vh;position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);border: 1px solid rgb(43, 113, 254);.line_row {width: 100%;overflow: hidden;background-image: linear-gradient(0deg,transparent 24%,rgba(136, 176, 255, 0.1) 25%,rgba(136, 176, 255, 0.1) 26%,transparent 27%,transparent 74%,rgba(136, 176, 255, 0.1) 75%,rgba(136, 176, 255, 0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(136, 176, 255, 0.1) 25%,rgba(136, 176, 255, 0.1) 26%,transparent 27%,transparent 74%,rgba(136, 176, 255, 0.1) 75%,rgba(136, 176, 255, 0.1) 76%,transparent 77%,transparent);background-size: 3rem 3rem;background-position: -1rem -1rem;animation: Heightchange 2s infinite;animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);animation-delay: 1.4s;border-bottom: 1px solid rgba(136, 176, 255, 0.1);display: flex;justify-content: center;align-items: flex-end;}
}
.Qr_scanner .line {width: 100%;height: 3px;background: #2b71fe;// opacity: 0.58;filter: blur(4px);
}
.Qr_scanner .box:after,
.Qr_scanner .box:before,
.Qr_scanner .angle:after,
.Qr_scanner .angle:before {content: '';display: block;position: absolute;width: 78px;height: 78px;border: 0.3rem solid transparent;
}
.Qr_scanner .box:after,
.Qr_scanner .box:before {top: -7px;border-top-color: #2b71fe;
}
.Qr_scanner .angle:after,
.Qr_scanner .angle:before {bottom: -7px;border-bottom-color: #2b71fe;
}
.Qr_scanner .box:before,
.Qr_scanner .angle:before {left: -7px;border-left-color: #2b71fe;
}
.Qr_scanner .box:after,
.Qr_scanner .angle:after {right: -7px;border-right-color: #2b71fe;
}
@keyframes radar-beam {0% {transform: translateY(-100%);}100% {transform: translateY(0);}
}
@keyframes Heightchange {0% {height: 0;}100% {height: 100%;}
}
</style>

案例二、

<template><div class="page-scan"><!-- 扫码区域 --><div class="QrCode"><video ref="video" height="100%" width="100%" id="video" autoplay></video></div><!-- 扫码样式 --><div class="qr-scanner"><div class="box"><div class="line"></div><div class="angle"></div></div><div class="back-arrow" @click="clickIndexLeft"><span>返回</span></div></div></div>
</template><script>
// WebRTC适配器 只需要引入就ok
import 'webrtc-adapter'
import { BrowserMultiFormatReader } from '@zxing/library'
export default {name: 'scanCodePage',data() {return {codeReader: null}},mounted() {this.codeReader = new BrowserMultiFormatReader()this.openScan()},beforeUnmount() {this.codeReader && this.codeReader.reset()},methods: {async openScan() {this.codeReader.listVideoInputDevices().then((videoInputDevices) => {// 默认获取第一个摄像头设备idlet firstDeviceId = videoInputDevices[0].deviceId// 获取第一个摄像头设备的名称const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label)if (videoInputDevices.length > 1) {// 判断是否后置摄像头if (videoInputDeviceslablestr.indexOf('back') > -1) {firstDeviceId = videoInputDevices[0].deviceId} else {firstDeviceId = videoInputDevices[1].deviceId}}this.codeReader && this.codeReader.reset() // 重置this.decodeFromInputVideoFunc(firstDeviceId)}).catch((err) => {console.error(err)})},decodeFromInputVideoFunc(firstDeviceId) {this.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId,'video',(result, err) => {if (result) {console.log('扫描结果', result)// if (result.text) {//     this.clickIndexLeft(result.text)// }}if (err && !err) {console.error(err)}})},// 停止扫描，并返回上一页clickIndexLeft(result) {this.codeReader && this.codeReader.reset()this.codeReader = null// this.$route.params.result = result// this.$router.back()}}
}
</script><style lang="scss" scope>.qr-scanner {background-image: linear-gradient(0deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent);background-size: 3rem 3rem;background-position: -1rem -1rem;// width: 100%;// height: 100%;// position: relative;// background-color: #111;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);
}
.qr-scanner .box {width: 75vw;height: 75vw;max-height: 75vh;max-width: 75vh;position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);overflow: hidden;border: 0.1rem solid rgba(0, 255, 51, 0.2);
}
.qr-scanner .line {height: calc(100% - 2px);width: 100%;background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);border-bottom: 3px solid #00ff33;transform: translateY(-100%);animation: radar-beam 2s infinite;animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);animation-delay: 1.4s;
}
.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {content: '';display: block;position: absolute;width: 3vw;height: 3vw;border: 0.2rem solid transparent;
}
.qr-scanner .box:after,
.qr-scanner .box:before {top: 0;border-top-color: #00ff33;
}
.qr-scanner .angle:after,
.qr-scanner .angle:before {bottom: 0;border-bottom-color: #00ff33;
}
.qr-scanner .box:before,
.qr-scanner .angle:before {left: 0;border-left-color: #00ff33;
}
.qr-scanner .box:after,
.qr-scanner .angle:after {right: 0;border-right-color: #00ff33;
}
@keyframes radar-beam {0% {transform: translateY(-100%);}100% {transform: translateY(0);}
}.qr-scanner .back-arrow {position: fixed;top: 20px;left: 20px;width: 30px;height: 30px;border-radius: 100%;background-color: rgba(0, 0, 0, 0.3);z-index: 999;display: flex;justify-content: center;align-items: center;color: #fff;
}
</style>

想测试的大家可以借助 ‘草料二维码’ 生成二维码测试；

参考文章
https://www.cnblogs.com/memphis-f/p/15543115.html
https://blog.csdn.net/qq_41120902/article/details/116176714

Vue 扫描二维码、条形码相关推荐

iOS 扫描二维码/条形码
级别:★★☆☆☆ 标签:「iOS 原生扫描」「AVCaptureSession」「AVCaptureDevice」「rectOfInterest」作者: Xs·H 审校: QiShare团队最近做 ...
Android PAD扫描枪扫描二维码条形码
Android PAD扫描枪扫描二维码条形码 1,目前扫描条码只有通过按键触发,按下按键会发送F12的键值,可以通过监听F12键判断是否触发扫描 2,扫到的条码我们会在当前光标处显示出来,同时也发了一 ...
vue扫描二维码，真机调试
vue扫描二维码,真机调试 vue代码使用HBuilderX 运行界面 vue代码 <el-button>标签需要引用element-ui,如果没有,可以注释,打开下面的普通<bu ...
Android使用ZBar扫描二维码/条形码（实例）+常见问题汇总
写在前面:因项目需求,需要实现二维码扫码功能,笔者测试过多种开源扫码工具,但因不跨平台.扫描速度慢等问题逐个放弃,最后选用ZBar实现功能,笔者发现ZBar扫码在跨主流手机平台.扫码速度等方面有较明显 ...
微信小程序扫描二维码条形码 (wx.scanCode)
前言在业务中遇到需要获取商品的二维码的信息返回商品的二维码信息,在调用后台的接口,首先想到用小程序的Api,wx.scanCode(Object object)获取二维码信息. 支持相机扫描或者相册 ...
微信小程序扫描二维码条形码
wxml代码 <button class='deaBtn' bindtap='scancode'>扫描二维码</button> js代码 scancode: function( ...
python扫描二维码输出内容_通过python扫描二维码/条形码并打印数据
需提前安装好pyzbar和opencv-python库(博主的电脑安装opencv-python库比较麻烦,但大部分都不会出现该问题) 安装方法:打开命令框输入 pip install pyzbar/ ...
python发票二维码条码识别_通过python扫描二维码/条形码并打印数据
需提前安装好pyzbar和opencv-python库(博主的电脑安装opencv-python库比较麻烦,但大部分都不会出现该问题) 安装方法:打开命令框输入 pip install pyzbar/ ...
ionic 扫描二维码/条形码功能
一.安装插件@ionic-native/qr-scanne 二.page scan.ts import { Component } from '@angular/core'; import { Ion ...
Vue 移动端实现调用相机扫描二维码或条形码
一.开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能(详见概述 | 微信开放文档),或者支付宝 H5 开放的API(详见?支付宝H5开放文档). 但是 ...

Vue 扫描二维码、条形码

Vue + zxing 实现扫二维码、条形码功能

Vue 扫描二维码、条形码相关推荐

最新文章

热门文章