v3 ts h5使用插件html5-qrcode扫描二维码

前言：做v3的h5项目时，有用到扫码相关，记录一下
注意：PC/Mac支持：Firefox 、Chrome、Safari、Opera、Edge
Android支持：Firefox 、Chrome、Opera、Edge（安卓（小米13）自带浏览器不支持，微信浏览器支持，实验得知）
iOS支持：Safari、Firefox 、Chrome
html5-qrcode地址链接
效果图：点击通行签到，调取摄像头

步骤：
1.下载html5-qrcode插件

yarn add html5-qrcode
或
npm i html5-qrcode

2.新建qrcode.vue文件放到公共组件文件夹components里

<template>
  <div class="qrcode">
    <div id="reader"></div>
  </div>
</template>

<script>
  import { Html5Qrcode } from 'html5-qrcode';
  export default {
    created() {
      this.getCameras();
    },
    beforeUnmount() {
      this.stop();
    },
    methods: {
      getCameras() {
        Html5Qrcode.getCameras()
          .then((devices) => {
            if (devices && devices.length) {
              this.html5QrCode = new Html5Qrcode('reader');
              this.start();
            }
          })
          .catch((err) => {
            // handle err
            this.html5QrCode = new Html5Qrcode('reader');
            this.error = 'ERROR: 您需要授予相机访问权限';
            this.$emit('err', this.error, err);
          });
      },
      start() {
        //environment后置 user前置
        this.html5QrCode
          .start(
            { facingMode: 'environment' },
            {
              fps: 2,    // 设置每秒多少帧
              qrbox: { width: 250, height: 250 },  // 设置取景范围
            },
            (decodedText) => {
              this.$emit('ok', decodedText);
            },
          )
          .catch((err) => {
            this.$emit('err', err);
          });
      },
      stop() {
        this.html5QrCode
          .stop()
          .then((ignore) => {
            // QR Code scanning is stopped.
            this.$emit('err', ignore);
            console.log('QR Code scanning stopped.');
          })
          .catch((err) => {
            this.$emit('err', err);
            // Stop failed, handle it.
            console.log('Unable to stop scanning.');
          });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .qrcode {
    position: relative;
    height: 100%;
    width: 100%;
    background: rgba($color: #000000, $alpha: 0.48);
  }
  #reader {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
</style>

3.扫码页面引入qrcode.vue文件

<template>
	// v-if控制摄像框是否显示
    <QrScan ref="qrcode" @ok="getResult" @err="geterror" v-if="open" />
     <div class="home-item" @click="clickQr">   // 点击打开摄像头
        <van-image class="icon-left" fit="fill" src="/icon_home_qd.png" />
        <span class="custom-title"> 通行签到 </span>
        <van-image class="arrow-right" fit="fill" src="/icon_home_arrow_right.png" />
	 </div>
</template>
<script setup lang="ts">
  import QrScan from '../../components/qrcode.vue';
  import { Toast } from 'vant';
  const open = ref(false);
  var browser = {   // 判断浏览器内核
    versions: (function () {
      var u = navigator.userAgent;
      return {
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
        weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
      };
    })(),
  };
  const clickQr = () => {
    // 点击签到时判断该浏览器内核，谷歌、苹果、火狐、微信可以打开
    if (browser.versions.webKit || browser.versions.weixin || browser.versions.gecko) {
      open.value = true;
    } else {
      Toast('该浏览器不支持，请打开主流浏览器：谷歌、火狐，或微信内打开');
    }
  };
  const getResult = (res) => {
    const r = res.split('?')[1].split('=');   // 对扫码结果进行处理，res是扫码内容
    if (r[1] == 'nX8ERbN9t4EZdPbNxMirW3uYS71111') {  
    	// 根据内容生成的二维码，我们规定只有内容识别为这个，才可以通过，否则提示非法通行码
        open.value = false;
    } else {
      open.value = false;
      Toast('非法通行码,请重新扫描');
    }
  };
  const geterror = (e) => {
    Toast(e);  // 提示报错内容
  };
</script>

欢迎指错补充~