博客

介绍

html5-qrcode是轻量级和跨平台的QR码和条形码扫码的JS库，集成二维码、条形码和其他一些类型的代码扫描功能，代码依赖于Zxing-js库

优势：

1、支持扫描不同类型的条形码和二维码

2、支持不同平台，Android、IOS、MacOS、Windows或Linux

3、支持不同的浏览器，如Chrome、Firefox、Safari、Edge

4、支持相机扫描以及本地文件

5、支持自定义，如闪光/火炬支持、缩放等

注意：直接访问摄像头，涉及到隐私，所以环境必须是

`HTTPS`

实现

<template>
  <div class="home">
    这是首页
    <img alt="Vue logo" src="@/assets/logo.png">
  </div>
  <hr/>
  <button @click="getCameras">扫码</button>  ====  <button @click="stop">取消扫码</button>
  <div style="height: 100%; width: 100%">
    <MyHeader :name="'调用摄像头扫码'" left="arrow-left" @goBackEv="$emit('goBack')" />
    <div class="qrcode">
      <div id="reader"></div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { Html5Qrcode } from "html5-qrcode"

  export default defineComponent({
    name: 'Home',
    components: {
    },
    setup(){
      let html5QrCode:any = null

      const start = () => {
        html5QrCode.start(
          // environment后置摄像头 user前置摄像头
          { facingMode: "environment" },
          {
            fps: 2, // 可选，每秒帧扫描二维码
            qrbox: { width: 250, height: 250 } // 可选，如果你想要有界框UI
            // aspectRatio: 1.777778 // 可选，视频馈送需要的纵横比，(4:3--1.333334, 16:9--1.777778, 1:1--1.0)传递错误的纵横比会导致视频不显示
          },
          (decodedText: any, decodedResult: any) => {
            // do something when code is read
            console.log('decodedText', decodedText)
            console.log('decodedResult', decodedResult)
            // this.$emit("goBack", decodedText)
          }
        )
          .catch((err: any) => {
            console.log('扫码错误信息', err)
            // 错误信息处理仅供参考，具体情况看输出！！！
            if (typeof err == 'string') {
              // this.$toast(err)
            } else {
              // if (err.name == 'NotAllowedError') return this.$toast("您需要授予相机访问权限")
              // if (err.name == 'NotFoundError') return this.$toast('这个设备上没有摄像头')
              // if (err.name == 'NotSupportedError') return this.$toast('摄像头访问只支持在安全的上下文中，如https或localhost')
              // if (err.name == 'NotReadableError') return this.$toast('相机被占用')
              // if (err.name == 'OverconstrainedError') return this.$toast('安装摄像头不合适')
              // if (err.name == 'StreamApiNotSupportedError') return this.$toast('此浏览器不支持流API')
            }
          })
      }

      const getCameras = () => {
        Html5Qrcode.getCameras()
          .then((devices) => {
            if (devices && devices.length) {
              html5QrCode = new Html5Qrcode("reader")
              start()
            }
          })
          .catch((err:any) => {
            // handle err
            html5QrCode = new Html5Qrcode("reader")
            // this.$toast('您需要授予相机访问权限')
          })
      }

      const stop = () => {
        html5QrCode.stop().then((ignore:any) => {
          // QR Code scanning is stopped.
          console.log("QR Code scanning stopped.")
        })
          .catch((err:any) => {
            // Stop failed, handle it.
            console.log("Unable to stop scanning.")
          })
      }
      return {
        getCameras,
        stop
      }
    }
  })
</script>

结果

以上就是我对使用 html5-qrcode 扫码的使用与总结，如其他小伙伴还有什么问题欢迎评论区留言讨论，谢谢~~