H5实现调用摄像头扫二维码，识别图片中的二维码（vue篇）

1、安装依赖

npm i html5-qrcode

2、vue页面代码

<template>
  <div class="qrcode">
    <div id="reader"></div>
    <input type="file" id="upload-input" accept="image/*" value="" style="display: none">
    <el-button class="uploadImg" @click="useLocal" icon="el-icon-picture-outline-round">Picture</el-button>
    <el-button class="blackIndex" @click="goBack" icon="el-icon-arrow-left">Back</el-button>
  </div>
</template>

<script>
import {Html5Qrcode} from "html5-qrcode";

export default {
  data(){
    return {
      html5QrCode:null,
      uploadInput:null
    }
  },
  created() {},
  mounted() {
    this.getCameras();
    this.uploadInput = document.getElementById('upload-input');
  },
  beforeDestroy() {
    this.stop();
  },
  methods: {
    //获取摄像头权限
    getCameras() {
      var that_=this
      Html5Qrcode.getCameras().then((devices) => {
          if (devices && devices.length) {
            this.html5QrCode = new Html5Qrcode("reader");
            this.start();
          }
        }).catch((err) => {
          alert("您需要授予相机访问权限！")
          that_.html5QrCode = new Html5Qrcode("reader");
          that_.goBack()
        });
    },
    //调用摄像头识别二维码
    start() {
      let config = { fps: 10, qrbox: { width: 300, height: 280 } }; //扫一扫相关设置
      this.html5QrCode.start(
          {facingMode: "environment"},
          config,
          (decodedText, decodedResult) => {
            console.log(decodedText)
          }
        ).catch((err) => {
          alert("扫码失败:\n" + err)
        });
    },
    //退出识别
    stop() {
      this.html5QrCode.stop().then((ignore) => {
        // QR Code scanning is stopped.
        console.log("QR Code scanning stopped.");
      })
        .catch((err) => {
          // Stop failed, handle it.
          console.log("Unable to stop scanning.");
        });
    },
    //选择图片识别二维码
    useLocal() {
      this.stop();
      this.uploadInput.click()
      this.uploadInput.addEventListener("change", (e) => {
        if (e.target.files.length == 0) {
          return;
        }
        const imageFile = e.target.files[0];
        this.html5QrCode.scanFile(imageFile, true).then((decodedText) => {
            console.log(decodedText)
          }).catch((err) => {
            alert("识别出错:\n" + error)
          });
      });
    },
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.qrcode {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  text-align: center;
  padding: 0 0;
  margin: 0 auto;
  background: rgba($color: #000000, $alpha: 0.48);
}
#reader {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.uploadImg{
  position: fixed;
  top: 4vh;
  right: 2rem;
}
.blackIndex{
  position: fixed;
  top: 4vh;
  left: 2rem;
}
</style>

3、注意事项

该功能的实现，需要将项目发布在https的环境中；或者在localhost环境中调试