前端H5使用html5QrCode实现扫一扫识别二维码

 Vue版本：npm install html5-qrcode

<template>
  <div class="index">
    <!-- 扫一扫 -->
    <div class="scan" v-if="isScanning">
      <div class="scan-box">
        <div id="scanning" width="800px"></div>
      </div>
      <span class="close-scan" @click="stopScan"><svg t="1681382339822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2626" width="200" height="200"><path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z" fill="#ffffff" p-id="2627"></path><path d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z" fill="#ffffff" p-id="2628"></path></svg></span>
    </div>
    <button class="start-scan" v-if="!isScanning"  @click="startScan" >开始扫一扫</button>
  </div>
</template>

<script>
  import { Html5Qrcode } from 'html5-qrcode';
  export default {
    data() {
      return {
        isScanning: false // 是否正在扫一扫
      }
    },
    created() {
    },
    mounted() {
      this.startScan()
    },
    methods: {
      startScan() { // 开始扫码
        this.isScanning = true
        this.$nextTick(() => {
          this.html5QrCode = new Html5Qrcode('scanning');
          this.html5QrCode.start({
              facingMode: "environment"
            }, {
              fps: 10,
              aspectRatio: 1, // 4:3：1.333334 16:9：1.777778 1:1：1.0
              qrbox: {
                width: 280,
                height: 280
              },
            }, (decodedText, decodedResult) => {
              this.stopScan() // 结束扫码
              alert("识别结果" + decodedText)
            }, errorMessage => {
            },
          )
          .catch(err => {});
        })
      },
      stopScan() { // 结束扫码
        this.html5QrCode.stop().then(() => {
          this.isScanning = false
        })
      }
    }
  }
</script>

<style lang="scss">
  .index {
    width: 100%;
    height: 100%;
    overflow: auto;
    .scan{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      .scan-box{
        width: 100%;
      }
      .close-scan{
        position: absolute;
        top: 20px;
        right: 20px;
        svg{
          width: 40px;
          height: 40px;
        }
      }
    }
    .start-scan{
      position: absolute;
      top: calc(50% - 25px);
      left: calc(50% - 100px);
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      width: 200px;
      height: 50px;
      background: #00aaff;
      color: #fff;
      border-radius: 10px;
    }
  }
</style>