@zxing/library实现平板手机扫码功能（二维码+条形码）

1、使用插件

npm install @zxing/library

2、主要用到 BrowserMultiFormatReader 这个构造函数，用于打开摄像头

import { BrowserMultiFormatReader } from '@zxing/library';

3、视图

<template><div class="code-reader-content"><div class="page"><video ref="video" autoplay id="video"></video><p v-if="videoInputDevicesArray.length == 0">{{ textContent }}</p></div><div class="scan-box"><div class="frame upper-left"></div><div class="frame upper-right"></div><div class="frame lower-right"></div><div class="frame lower-left"></div><div class="pointer-box"><div class="pointer"></div></div><div v-show="tipShow" class="tip">{{ tipMsg }}</div><div class="btn-switch" @click="toggle"></div></div></div>
</template>

4、核心代码

<script>
// 引入插件
import { BrowserMultiFormatReader } from '@zxing/library';export default {name: 'httpsCodeReader',data() {return {codeReader: null,tipMsg: '正在尝试识别....',tipShow: true,textContent: undefined,videoInputDevicesArray: [],deviceId: '',isEswitch: false,timer: null};},created() {this.openScan();},destroyed() {this.codeReader.stopContinuousDecode();this.codeReader.reset();},methods: {// 打开扫码async openScan() {this.codeReader = await new BrowserMultiFormatReader();this.codeReader.getVideoInputDevices().then(async videoInputDevices => {this.tipShow = true;this.tipMsg = '正在尝试识别....';this.videoInputDevicesArray = videoInputDevices;//console.log('获取到的摄像头',this.videoInputDevicesArray)if (this.videoInputDevicesArray.length > 1) {this.deviceId = this.videoInputDevicesArray[1].deviceId;} else {this.deviceId = this.videoInputDevicesArray[0].deviceId;}this.decodeFromInputVideoFunc();}).catch(() => {this.tipShow = false;});},// 开始解码decodeFromInputVideoFunc() {if (this.videoInputDevicesArray.length == 0) {this.textContent = '初始化摄像头失败';document.getElementById('video').style.display = 'none';return;}this.codeReader.reset();this.codeReader.decodeFromInputVideoDeviceContinuously(this.deviceId, 'video', result => {this.tipMsg = '正在扫描';if (result) {if (result.text) {console.log('扫描成功',result)this.tipMsg = '扫描成功';this.tipShow = true;window && window.getResultEvent(result)window?.parent?.Gikam?.toast("扫码成功");// 关闭扫码功能this.codeReader.reset();this.codeReader.stopContinuousDecode();}}});},cutover() {if (this.videoInputDevicesArray && this.videoInputDevicesArray.length > 1) {if (this.deviceId === this.videoInputDevicesArray[0].deviceId) {return (this.deviceId = this.videoInputDevicesArray[1].deviceId);} else {return (this.deviceId = this.videoInputDevicesArray[0].deviceId);}}this.codeReader.stopStreams();return;},// 切换摄像头async toggle() {this.codeReader.stopStreams();this.timer = setTimeout(() => {this.timer = null;}, 2000);if (this.timer) {await this.codeReader.tryPlayVideo('video');this.cutover();this.decodeFromInputVideoFunc();}}}
};
</script>

5、扫码所以代码+css样式全部如下，可以全部复制粘贴到自己项目里试试效果

<script>
// 引入插件
import { BrowserMultiFormatReader } from '@zxing/library';export default {name: 'httpsCodeReader',data() {return {codeReader: null,tipMsg: '正在尝试识别....',tipShow: true,textContent: undefined,videoInputDevicesArray: [],deviceId: '',isEswitch: false,timer: null};},created() {this.openScan();},destroyed() {this.codeReader.stopContinuousDecode();this.codeReader.reset();},methods: {// 打开扫码async openScan() {this.codeReader = await new BrowserMultiFormatReader();this.codeReader.getVideoInputDevices().then(async videoInputDevices => {this.tipShow = true;this.tipMsg = '正在尝试识别....';this.videoInputDevicesArray = videoInputDevices;//console.log('获取到的摄像头',this.videoInputDevicesArray)if (this.videoInputDevicesArray.length > 1) {this.deviceId = this.videoInputDevicesArray[1].deviceId;} else {this.deviceId = this.videoInputDevicesArray[0].deviceId;}this.decodeFromInputVideoFunc();}).catch(() => {this.tipShow = false;});},// 开始解码decodeFromInputVideoFunc() {if (this.videoInputDevicesArray.length == 0) {this.textContent = '初始化摄像头失败';document.getElementById('video').style.display = 'none';return;}this.codeReader.reset();this.codeReader.decodeFromInputVideoDeviceContinuously(this.deviceId, 'video', result => {this.tipMsg = '正在扫描';if (result) {if (result.text) {console.log('扫描成功',result)this.tipMsg = '扫描成功';this.tipShow = true;window && window.getResultEvent(result)window?.parent?.Gikam?.toast("扫码成功");// 关闭扫码功能this.codeReader.reset();this.codeReader.stopContinuousDecode();}}});},cutover() {if (this.videoInputDevicesArray && this.videoInputDevicesArray.length > 1) {if (this.deviceId === this.videoInputDevicesArray[0].deviceId) {return (this.deviceId = this.videoInputDevicesArray[1].deviceId);} else {return (this.deviceId = this.videoInputDevicesArray[0].deviceId);}}this.codeReader.stopStreams();return;},// 切换摄像头async toggle() {this.codeReader.stopStreams();this.timer = setTimeout(() => {this.timer = null;}, 2000);if (this.timer) {await this.codeReader.tryPlayVideo('video');this.cutover();this.decodeFromInputVideoFunc();}}}
};
</script><style lang="less" scoped>
.code-reader-content {.page {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;#video {height: 100%;width: 100%;object-fit: fill;}}.scan-box {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -90%);height: 20%;width: 70%;.frame {position: absolute;width: 15px;height: 15px;border: 3px solid transparent;}.upper-left {top: 0;left: 0;border-left-color: rgba(66, 133, 244, 1);border-top-color: rgba(66, 133, 244, 1);}.upper-right {top: 0;right: 0;border-right-color: rgba(66, 133, 244, 1);border-top-color: rgba(66, 133, 244, 1);}.lower-right {bottom: 0;right: 0;border-bottom-color: rgba(66, 133, 244, 1);border-right-color: rgba(66, 133, 244, 1);}.lower-left {bottom: 0;left: 0;border-left-color: rgba(66, 133, 244, 1);border-bottom-color: rgba(66, 133, 244, 1);}.pointer-box {position: absolute;top: 0;left: 0;width: 98%;height: 100%;overflow: hidden;.pointer {height: 3px;background-image: linear-gradient(to right,transparent 0%,rgba(66, 133, 244, 1) 50%,transparent 100%);transform: translateY(-3px);animation: move 2s linear infinite;}@keyframes move {0% {transform: translateY(-3px);}100% {transform: translateY(calc(20vh - 3px));}}}.tip {position: absolute;left: 50%;top: 120%;transform: translate(-50%, 0);white-space: nowrap;color: rgb(85, 209, 28);font-size: 16px;}.btn-switch {position: absolute;left: 50%;top: 140%;width: 20px;height: 20px;transform: translate(-50%, 0);background-color: green;// background: url('../../../img/icon/switch.svg') no-repeat center;}}
}
</style>

@zxing/library实现平板手机扫码功能（二维码+条形码）相关推荐

Spring Cloud OAuth2 扩展登录方式：帐户密码登录、手机验证码登录、二维码扫码登录
本文扩展了spring security 的登录方式,增长手机验证码登录.二维码登录. 主要实现方式为使用自定义filter. AuthenticationProvider. AbstractAuth ...
技术解读一维码，二维码，zxing
一维码,二维码,zxing 什么是一维码.二维码?一维码就是商品包装盒上的条形码,例如:书本后面的条形码,在真维斯或者其他等品牌店的衣服标签上都可以看到,一维码的应用已经很广泛了:而二维码就是.... ...
微信扫一扫扫普通链接二维码打开微信小程序
撸了今年阿里.头条和美团的面试,我有一个重要发现.......>>> 扫普通链接二维码打开小程序为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普 ...
Spring Boot电商项目57：订单模块六：【前台：生成支付二维码】接口；（支付url的拼凑；利用zxing生成二维码；二维码图片的存储；真实地址与可访问地址的转换；）
说明: (1)本篇博客主要内容是:开发[前台:生成支付二维码]接口: (2)本篇博客需要注意的点有: ● 支付url的拼凑: ● 利用zxing生成二维码: ● 二维码图片的存储:真实地址与可访问地址 ...
TCPIP远程网络电子健康码扫码设备|二维码扫码门禁机HX-QR86L-IP在校园复学防疫领域的应用
TCPIP远程网络电子健康码扫码设备|二维码扫码门禁机HX-QR86L-IP是一款铝合金材质.带液晶显示屏,一机两用,即可做门禁读头使用,也可以做电子健康码数据采集使用.可支持静态.手机动态二维码识别 ...
Android扫一扫和生成二维码（使用华为ScanKit）
本文主要讲如何使用华为统一扫码scan Kit进行扫一扫以及生成二维码, 有兴趣的可以看一下华为扫描和Zxing扫描的区别使用步骤 1.在全局的build.gradle文件里添加华为maven仓库 ...
扫普通链接二维码打开小程序
一,想要扫描普通链接二维码打开小程序,必须在小程序后台进行配置,否则无法完成写在前面:微信对扫描普通链接二维码打开小程序有一定限制,对企业.媒体.政府.其他组织类型小程序开放此功能,个人类型小程序暂 ...
扫码普通二维码跳转微信小程序指定页面（体验服和开发服跳转链接不能动态传参）
好久不见,时隔多年我又来记录问题来了,记录这次问题的主要原因是减少你我去搜索资源的时间,下面开始讲讲我越到的问题.(下面说的是针对小程序体验版或者开发版哈,正式环境不存在这个问题) 需求:pc端扫码登 ...
『小程序开发』关于微信小程序扫普通链接二维码打开小程序的具体配置流程...
前言: 对于扫普通链接二维码打开小程序的功能详解,官方api已经可以说是接近手把手的教学,咱们这里不做累述,直接上图走起...官方接入指南功能介绍扫二维码登录小程序...^_^ 限制 1.对于普通 ...

@zxing/library实现平板手机扫码功能（二维码+条形码）

@zxing/library实现平板手机扫码功能（二维码+条形码）相关推荐

最新文章

热门文章