移动端二维码扫一扫

最新推荐文章于 2024-03-19 16:50:51 发布
最新推荐文章于 2024-03-19 16:50:51 发布
阅读量397 收藏 2
点赞数
文章标签： vue.js npm github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UID_354156571/article/details/129530509
版权
文章展示了如何在Vue.js应用中集成二维码扫描功能，使用了@zxing/library和vue-qrcode-reader两个库。通过获取摄像头输入设备并设置扫描区域，实现实时识别二维码并处理扫描结果。
摘要由CSDN通过智能技术生成

第一，准备  插件安装

npm install @zxing/library  || yarn add  @zxing/library

zxing.vue 组件 

<template>

  <div class="page-scan">

    <LoadingVue :show="loading"></LoadingVue>

    <div class="scan-box">

      <video id="video" ref="video" class="scan-video" autoplay></video>

      <div class="qr-scanner">

        <div class="box">

          <div class="line"></div>

          <div class="angle"></div>

        </div>

      </div>

      <div class="scan-tip">{{ scanTextData.tipMsg }}</div>

    </div>

  </div>

</template>

<script>

import { BrowserMultiFormatReader } from "@zxing/library"

export default {

  name: "ScanCodePage",

  props: {

    show: {

      type: Boolean,

      default: false,

    },

  },

  data() {

    return {

      scanTextData: {

        codeReader: null,

        tipMsg: "将二维码置于屏幕中，即可识别",

        // 这个，就是当前调用的摄像头的索引，为什么是6，我会在后面说的 华为手机是鸿蒙系统有8个摄像头

        num: 5,

        // 这个就是扫描到的摄像头的数量

        videoLength: "",

      },

      hasBind: false,

    }

  },

  watch: {

    show(val) {

      if (!val) {

        // 关闭摄像头

        if (!document.getElementById("video")) {

          alert("请授权")

          return

        }

        const thisVideo = document.getElementById("video")

        thisVideo.srcObject.getTracks()[0].stop()

        this.scanTextData.codeReader.reset()

      } else {

        if (this.scanTextData.codeReader === null) {

          this.scanTextData.codeReader = new BrowserMultiFormatReader()

        }

        this.openScan()

      }

    },

  },

  mounted() {

    this.scanTextData.codeReader = new BrowserMultiFormatReader()

    this.openScan() // 打开摄像头

  },

  destroyed() {

    this.scanTextData.codeReader.reset() // 重置摄像头

  },

  methods: {

    async openScan() {

      this.scanTextData.codeReader

        .getVideoInputDevices()

        .then((videoInputDevices) => {

          // 默认获取第一个摄像头设备id

          let firstDeviceId = videoInputDevices[0].deviceId

          this.loading = false

          console.log(

            "手机摄像头的数量",

            videoInputDevices.length,

            videoInputDevices

          )

          // 获取第一个摄像头设备的名称

          const videoInputDeviceslablestr = JSON.stringify(

            videoInputDevices[0].label

          )

          if (videoInputDevices.length > 1) {

            // 华为手机有6个摄像头，前三个是前置，后三个是后置，第6个摄像头最清晰

            if (videoInputDevices.length > 5) {

              firstDeviceId = videoInputDevices[5].deviceId

            } else {

              // 判断是否后置摄像头

              if (videoInputDeviceslablestr.indexOf("back") > -1) {

                firstDeviceId = videoInputDevices[0].deviceId

              } else {

                firstDeviceId = videoInputDevices[1].deviceId

              }

            }

          }

          this.decodeFromInputVideoFunc(firstDeviceId)

        })

        .catch((err) => {

          console.error(err)

        })

    },

    decodeFromInputVideoFunc(firstDeviceId) {

      this.scanTextData.codeReader.reset()

      this.scanTextData.codeReader.decodeFromInputVideoDeviceContinuously(

        firstDeviceId,

        "video",

        (result, err) => {

          if (result && result.text) {

            this.handleResult(result.text)

          }

          if (err && !err) {

            console.log(err)

            this.$toast.fail(err)

          }

        }

      )

    },

    async handleResult(scanResult) {

      console.log(scanResult)

      // TODO 逻辑处理或直接返回扫码结果

      // this.$emit("ok", scanResult);

      this.$router.push({

        name: this.$route.query.next,

        query: {

          uuid: scanResult,

        },

      })

    },

  },

}

</script>

<style lang="scss" scoped>

.scan-box {

  position: fixed;

  top: 0;

  left: 0;

  height: 100%;

  width: 100vw;

  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;

}

.scan-video {

  height: 100vh;

  width: 100vw;

  object-fit: cover;

}

.qr-scanner .box {

  width: 85vw;

  height: 85vw;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  overflow: hidden;

  border: 0.1rem solid rgba(0, 255, 51, 0.2);

  /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */

}

.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 alternate;

  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);

  }

}

.scan-tip {

  width: 100vw;

  text-align: center;

  margin-bottom: 5vh;

  color: white;

  font-size: 5vw;

  position: absolute;

  bottom: 50px;

  left: 0;

  color: #fff;

}

.page-scan {

  overflow-y: hidden;

}

</style>

第二 

准备 ： npm install @vue-qrcode-reader  || yarn add  @vue-qrcode-reader

qecode.vue

<template>

  <div class="scan">

    <LoadingVue :show="loading"></LoadingVue>

    <qrcode-stream

      :camera="camera"

      style="height: 100vh"

      @decode="onDecode"

      @init="onInit"

    >

      <div>

        <div class="qr-scanner">

          <div class="box">

            <div class="line"></div>

            <div class="angle"></div>

          </div>

        </div>

      </div>

    </qrcode-stream>

  </div>

</template>

<script>

import { QrcodeStream } from "vue-qrcode-reader"

export default {

  // 注册

  components: { QrcodeStream },

  data() {

    return {

      loading: true,

      camera: "auto",

      result: "", // 扫码结果信息

      error: "", // 错误信息

    }

  },

  created() {},

  methods: {

    // 回调扫描结果

    onDecode(result) {

      if (result !== "") {

        // this.$emit("ok", result);

        // alert(result)

        this.$router.push({

          name: this.$route.query.next,

          query: {

            uuid: result,

          },

        })

      }

    },

    // 检查是否调用摄像头

    async onInit(promise) {

      try {

        const { capabilities } = await promise

        console.log(

          "🚀 ~ file: cameracomponent.vue:47 ~ onInit ~ capabilities",

          capabilities

        )

        this.loading = false

      } catch (error) {

        // console.log()

        this.$toast(error.name)

        if (error.name === "NotAllowedError") {

          this.error = "ERROR: 您需要授予相机访问权限"

        } else if (error.name === "NotFoundError") {

          this.error = "ERROR: 这个设备上没有摄像头"

        } else if (error.name === "NotSupportedError") {

          this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)"

        } else if (error.name === "NotReadableError") {

          this.error = "ERROR: 相机被占用"

        } else if (error.name === "OverconstrainedError") {

          this.error = "ERROR: 安装摄像头不合适"

        } else if (error.name === "StreamApiNotSupportedError") {

          this.error = "ERROR: 此浏览器不支持流API"

        } else if (error.name === "InsecureContextError") {

          this.error =

            "ERROR: 仅允许在安全上下文中访问摄像机。使用HTTPS或本地主机，而不是HTTP。"

        } else {

          this.error = "ERROR:摄像机错误"

        }

        this.$emit("err", this.error)

      }

    },

  },

}

</script>

<style scoped>

.error {

  font-weight: bold;

  color: red;

}

</style>

<style scoped>

.scan {

  width: 100vw;

  border-color: #585858;

  position: fixed;

  top: 0;

  left: 0;

}

.qrcode-stream-camera {

  width: 100%;

  height: 100%;

  display: block;

  -o-object-fit: cover;

  object-fit: cover;

  position: absolute;

  top: 0%;

  left: 0%;

}

.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%; */

  height: 100vh;

  position: relative;

  /* background-color: #1110;*/

  /* background-color: #111; */

}

.qr-scanner .box {

  width: 85vw;

  height: 85vw;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  overflow: hidden;

  border: 0.1rem solid rgba(0, 255, 51, 0.2);

  /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */

}

.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 alternate;

  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);

  }

}

</style>

UID_354156571
关注
移动端车牌识别扫一扫
zs18732220833的博客
12-11 337
移动端车牌自动识别越来越多的被应用在我们的日常生活中。早上开车上高速，ETC自助通道，无人值守，车牌自动识别；到公司停车场，无需停车取卡，车牌自动识别进入；下班开车回家，车牌识别自动结算停车费用~~ 除此之外，扫一扫车牌，车辆检测、维修、保养、续保等，登录厂家APP，自动录入车牌信息，无需手工操作，无需等待。 手持端移动端车牌识别技术是指通过计算机视觉、图像处理与模式识别等方法从车辆图像中提取
移动端车牌识别系统只需扫一扫就可实现
zs18732220833的博客
03-08 1138
随着经济水平的不断提升，汽车数量的爆炸式激增为汽车管理带来了一定的困难。现在，车牌识别已经成为每个城市的车辆管理重点工作之一，有效、准确、及时的车牌识别可以方便警务人员的交通执法、停车场车辆管理等工作。伴随着智能终端以及4G技术的快速普及与发展，移动互联网时代已经全面爆发，易泊时代推出了“移动终端车牌识别软件-慧号通识别”，完美集成车牌识别算法，为智慧停车客户提供全套停车产业链的产品支撑和技术服务
vue 移动端扫一扫功能
09-23
vue移动端手机的扫一扫功能，可以识别二维码，功能比较简单，有需要的可以下载，希望有所帮助，有什么问题可以在下方进行评论或者留言，看到第一时间会进行修复.
vue2(vue3也可以使用)移动端h5网页实现扫一扫功能
最新发布
qq_55681529的博客
03-19 3254
可以看调起了我们的摄像头，点击允许过后就打开了扫码界面。
H5 PC 移动端 Qrcode.js实现扫一扫
07-07
H5识别二维码 Qrcode.js
vue调取手机扫一扫功能
04-11
vue移动端调用手机扫一扫功能识别二维码，简单明了细节自己补充！
H5移动端识别二维码和条形码
07-06
总的来说，H5移动端识别二维码和条形码的技术已经相当成熟，借助像webqr.js、llqrcode.js和BarcodeReader.js这样的JavaScript库，开发者可以轻松实现在网页上进行扫码操作，从而为用户提供更便捷的服务。同时，通过...
html+js 扫一扫条形码和二维码的插件
03-31
在IT领域，HTML和JavaScript是构建网页应用的基石，而"html+js 扫一扫条形码和二维码的插件"则是利用这两者实现的一种功能扩展。这种插件允许用户通过网页上的摄像头扫描条形码或二维码，从而增强网页交互性并提供...
移动端唤起相机进行二维码扫描实现详解
weixin_50636536的博客
03-10 1238
移动端扫码实现
使用@zxing/library实现扫码识别
Q_v3_v2的博客
11-23 1279
zxing/library插件只能运行在https环境下或localhost，本地启动https看我写的文章。vue本地项目设置https访问。
二维码QRcode生成与读取
02-08
二维码的生成 和 读取， 能够自己建立对二维码文件的读取 ，通过可以使用图片方式，扫描二维码进来，然后 解析出 二维码中的数据，然后进行操作，都可以。
H5调用手机相机识别二维码
07-23
h5页面在微博客户端中呼起摄像头扫描二维码并且解析；原生浏览器或者微信客户端呼起系统拍照或者上传图片按钮，拍照二维码或者上传二维码并且解析
vue-qrcode-reader 实现直接扫码和相册扫码
weixin_47013797的博客
04-19 2050
但是vue-qrcode-reader只可以支持二维码扫描，对于条形码没有反应，应该是不支持，从实际扫描效果来看确实如此。此方法可以在PC端调试，但是需要设置https:true （vue.config.js中）
vue实现调用摄像头扫描二维码
m0_66743830的博客
02-15 2019
【代码】vue实现调用摄像头扫描二维码。
vue实现扫码功能，带样式
一位前行者的博客
08-29 1651
需求： 利用vue实现二维码扫描； 插件： QRCodeReader； 插件下载 npm install --save vue-qrcode-reader 注意： 需要在https协议下才可以调用相机，实现扫码。 可以通过配置vue.config.js中的devServer:{https:true} 或参照前文章 前端使用Nuxt框架，配置本地https访问 配置本地证书 <template> <div> <p class="error">{{ error
H5 移动端识别二维码或条形码
生命不息，学习不止
07-11 1688
移动端实现扫一扫，对二维码或者条形码进行识别
vue二维码生成、打印及识别
菜鸟成长之路
03-01 1627
这是二维码扫描区域，v-if="qrcodeshow"可以用来控制摄像头的开关（最开始没加导致摄像头一直处于被占用状态）js原生的windows.print()会将整个页面打印出来，所以使用。安装并在main.js或index.js中注册。批量创建二维码及打印，所以加了个v-for。引入QrcodeStream。点击生成二维码按钮执行。引入QRCode模块。
plus实现扫码功能
weixin_45782529的博客
02-07 1834
plus实现扫码功能，移动端扫码封装barcode.vue扫描组件。
uniapp vue 获取二维码图片链接信息
qq_44726321的博客
12-20 788
uniapp vue h5识别二维码图片链接信息
vue 移动端 如何扫码
07-27
回答: 在Vue移动端中，要实现扫码功能，可以使用第三方库来帮助实现。一个常用的库是`vue-qrcode-reader`。首先，你需要在你的Vue项目中安装该库，可以通过npm或yarn进行安装。然后，在你的Vue组件中引入该库，并在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值