Vue 扫描二维码、条形码

已于 2022-05-23 18:31:41 修改
阅读量6.8k 收藏 36
点赞数 3
分类专栏： vue vue3.0
于 2022-05-23 18:14:08 首次发布
原文链接：https://www.cnblogs.com/memphis-f/p/15543115.html
版权

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/library
  npm install --save webrtc-adapter

案例一、
vue 扫描二维码 条形码

<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) => {
                    // 默认获取第一个摄像头设备id
                    let 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>

案例二、

vue 扫描二维码、条形码

<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) => {
                    // 默认获取第一个摄像头设备id
                    let 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

aibujin
关注
专栏目录
vue2/3 - H5 移动端网页中调用手机摄像头扫描二维码 / 条形码功能，在h5手机网页里调起相机摄像头进行二维码或条形码扫描效果详细教程（详细示例组件源码，一键复制开箱即用！）
高级前端工程师
07-17 5840
vue扫描二维码条形码，vue网页调用摄像头扫二维码条形码，vue移动端如何实现调用相机扫描二维码，vue移动端扫一扫功能，vue怎么做移动端h5扫一扫功能，vue识别二维码和条形码，vue实现点击按钮调用摄像头扫码，vue调用本地摄像头实现拍照功能，Vue中如何进行二维码生成与扫描，如何实现vue在手机浏览器中调用摄像头实现扫描二维码功能，VUE项目移动端H5调用摄像头扫码，vue项目中实现H5调取摄像头，网页调用摄像头实现二维码扫描功能，vue调用手机摄像头，vue在调用摄像头扫码，vue自定义打开摄像
vue-barcode-reader:一组用于扫描条形码和二维码的 Vue.js 组件
05-29
Vue 条码和二维码扫描器 一组用于扫描（或上传图像）条形码和二维码的 Vue.js 组件。 好处 可以扫描条形码和二维码 使用 （“斑马线”），这是一个用 Java 实现的开源、多格式一维/二维条码图像处理库，可移植到其他语言。 演示 您可以在 codeandbox 演示站点中进行测试。 安装 使用 Vue Barcode Reader 的最简单方法是从npm或yarn安装它。 npm install vue-barcode-reader --save 或者 yarn add vue-barcode-reader 用法 Vue Barcode Reader 只需包含它即可开箱即用。 使用摄像机 加载来自用户相机的流后，它会显示并连续扫描条形码。 结果由解码事件指示。 import { StreamBarcodeReader } from "vue-barcode-reader"
vue-barcode-scanner:Vue.js的条形码扫描仪插件
05-09
Vue条形码扫描仪 Vue.js的条形码扫描仪插件 特征 通常在市场上有很多条形码扫描仪。 因此，我们需要处理很多事情才能像对所有扫描仪一样正确地进行此输入。 该插件可以更好地控制扫描输入，因为扫描仪的速度会导致嘈杂和不准确的结果。 该插件将使您可以更好地控制和准确性在项目中使用已经实施的条形码扫描仪。 vue-barcode-scanner是现有条形码扫描仪（例如或 ）的调节器。 vue-barcode-scanner本身不是扫描工具。 有什么问题 监听器将始终为每个字符输入触发，因此我们需要将其放在一起并检查何时完成并准备使用。 需要为某些扫描仪处理一些特殊字符，因为并非所有扫描仪都一样。 这个插件为您做什么 处理完您的监听程序后，只需将一次准备好的条形码返回给您的回调即可。 处理特殊字符，然后将完整的条形码返回给您。 更新 Tab后缀条形码扫描仪的兼容性 侦听器，用于按键而不
**ZXing-JS 图像处理库安装与配置完全指南**
最新发布
gitblog_07023的博客
09-13 376
ZXing-JS 图像处理库安装与配置完全指南 library Multi-format 1D/2D barcode image processing library, usable in JavaScript ecosystem. ...
vue实现扫描条码
青春不打烊的博客
12-13 4012
首先npm下载"@zxing/library": "^0.15.1"这个依赖。
vue3实现扫码识别（二维码&条形码）
w418856的博客
01-31 2715
注意：调用浏览器摄像头需要在https环境下运行。1.安装@zxing/library。3.1 显示摄像头的部门。
Vue 实现简单的二维码扫描功能
热门推荐
小破孩的博客
05-06 1万+
1、使用以下命令安装实现扫描二维码的插件 npm install --save vue-qecode-reader 或者 cnpm install --save vue-qrcode-reader 插件官网：Simple | Vue Qrcode Reader 代码如下： <template> <!-- <p class="error">{{ error }}</p> --> <!--错误信息--> &lt
Vue 移动端实现调用相机扫描二维码或条形码
m0_52789121的博客
02-23 2844
一、开发前的准备 实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能（详见 概述 | 微信开放文档），或者支付宝 H5 开放的API（详见?支付宝H5开放文档）。 但是这两者都会比较麻烦且有一定的局限性，微信的扫一扫只能在微信里用，而且还需要公众号认证等配置操作。支付宝在内置 App 内可以同时识别二维码和条形码，但外部调用的 API 无法一次性同时识别，只能分开识别。 我这里就提供一个直接使用的开源库：https://github.com/zxing-js/library，
vue生成二维码，pc支付【完整效果】
02-18
如果需要用户通过摄像头扫描二维码，`vue-qrcode-reader`库就派上用场了。它提供了一个组件，可以方便地集成到Vue项目中： ```html import QrcodeReader from 'vue-qrcode-reader'; export default { ...
vue扫描二维码
yqlnihao的博客
05-11 1079
vue扫码
Vue中实现扫描二维码和条形码
KeepSober_D的博客
06-06 4843
如何使用Vue实现一个H5扫码功能？
Vue实现手机扫描二维码预览页面效果
10-15
主要为大家详细介绍了Vue实现手机扫描二维码预览页面效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VueBarcode一个Vuejs的条码生成器
08-09
VueBarcode一个Vue.js的条码生成器
vue实现扫码功能
10-15
主要为大家详细介绍了vue实现扫码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3+h5实现扫描条形码&二维码功能
YSys12345678的博客
01-11 2490
html5-qrcode、vue3、H5
vue3.0项目生成标签条形码（插件：jsbarcode）并打印（插件：Print.js）支持pda扫码枪扫描
chengcheng9876的博客
04-18 3432
vue3.0项目生成标签条形码（插件：jsbarcode）并打印（插件：Print.js）支持pda扫码枪扫描
vue生成二维码与识别，vue扫一扫功能实现
“ 春风若有怜花意，能否许我再少年。”
08-30 3118
【代码】二维码的生成与识别，扫一扫功能实现。
vue3 扫描二维码
09-02
在Vue3中实现扫描二维码的过程涉及以下步骤： 1. 在Vue3项目中安装和导入vue-qrcode-reader插件。这个插件提供了扫码枪扫描条形码或二维码的功能。 2. 创建一个Vue3组件，用于渲染二维码。可以使用<video>...
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值