Vue组件-调用摄像头识别二维码

最新推荐文章于 2024-07-24 16:21:45 发布

星潮汐

最新推荐文章于 2024-07-24 16:21:45 发布

阅读量2.4k

点赞数

分类专栏：前端 # Js # Vue 文章标签： js vue 摄像头识别二维码

本文链接：https://blog.csdn.net/lycz_tpself/article/details/115381797

版权

本文介绍了如何在Vue项目中利用zxing库调用摄像头进行二维码识别，包括所需包的安装和代码实现。

摘要由CSDN通过智能技术生成

需要下载的包

@zxing/library@0.18.4
element-ui

可识别类型

可识别二维码和大部分条形码，具体请查看zxing

代码文本

/**
    条码扫描组件
    使用示例：

    -- 引入
    import BarScan from 'path/to/这个文件'

    -- 定义回调事件，回调中返回扫描到的文本
    function scaned(scanText){...}

    -- 使用，通过@scanHandle传入回调
    <BarScan @scanHandle="scaned"></BarScan>

    -- 自动提交autoCommit，默认为false。设置为true时，扫描相同的编码次数达到指定次数时，调用回调方法
    <BarScan @scanHandle="scaned" :autoCommit="true"></BarScan>

    -- 设置指定次数dupCount，默认为2。当相同编码出现达到此次数时，根据autoCommit进行相应操作
    <BarScan @scanHandle="scaned" :dupCount="3"></BarScan>

    -- 关闭摄像头按钮会调用@scanHandle方法，返回值为空字符串

 */

 <template>
    <div class="bar-scan" v-loading.fullscreen.lock="true">
        <div class="flex-div">
            <video src=""></video>

            <div class="flex-line">
                <el-button :disabled="VideoAllInfo.length < 2" @click="cgOrInitVideo">切换摄像头</el-button>
                <el-button @click="scanHandle('')">关闭摄像头</el-button>
                <el-button @click="scanType = 'one'">条形码扫描</el-button>
                <el-button @click="scanType = 'two'">二维码扫描</el-button>
            </div>

            <!-- 显示扫描到的信息 -->
            <div class="scan-info">
                <span class="title">扫描结果</span>
                <span>请点击下方正确的扫描结果</span>
                <div v-for="item in scanList" :key="item.text" :class="{'dup' : item.dup >= dupCount}" @click="scanHandle(item.text)">{
  {item.text}}</div>
            </div>
        </div>

        <!-- 红色边框，用于显示扫描的区域 -->
        <div :style&#