VUE html5-qrcode H5扫一扫功能

官方文档 html5-qrcode

安装 npm i html5-qrcode

1、新建一个组件

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

//样式
.qrcode{
            position: relative;
            height: 100%;
            width: 100%;
              background: rgba($color: #000000, $alpha: 0.48);
}

#reader{
          top: 50%;
          left: 0;
          transform: translateY(-50%);
}

2、引入

    import { Html5Qrcode } from "html5-qrcode";

3、获取摄像权限在created调用

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

4、获取扫码内容

start() {
                  //environment后置 user前置
                  this.html5QrCode 
                    .start(
                       {facingMode: "environment" },
                      {
                        fps: 2,//500毫秒扫描一次
                        qrbox: { width: 250, height: 250 }, 
                      },
                      (decodedText, decodedResult) => {
                          this.$emit("ok",decodedText)
                      }
                    )
                    .catch((err) => {
                      console.log(`Unable to start scanning, error: ${err}`);
                    });
},

5、必须在销毁页面前关闭扫码功能否则会报错 could not start video source

//销毁前调用
beforeDestroy() {
            this.stop();
}

//关闭扫码
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.");
                    });
},

6、在扫码页面引用组件

<BarScan ref="qrcode" @ok="getResult" @err="geterror" ></BarScan>

getResult(e){
    //e:扫码内容
}

geterror(e){
    //e:报错内容
}

组件完整代码

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

<script>
    import { Html5Qrcode } from "html5-qrcode";
    export default {
        created() {
            this.getCameras()
        },
        beforeDestroy() {
            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)
                    });
                },
             start() {
                  //environment后置 user前置
                  this.html5QrCode 
                    .start(
                       {facingMode: "environment" },
                      {
                        fps: 2,
                        qrbox: { width: 250, height: 250 }, 
                      },
                      (decodedText, decodedResult) => {
                          this.$emit("ok",decodedText)
                      }
                    )
                    .catch((err) => {
                        this.$emit("err",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.");
                    });
                },
        }
    }
</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>

引用组件页面

<BarScan ref="qrcode" @ok="getResult" @err="geterror" ></BarScan>

import BarScan from '@/components/qrcode.vue'
    var _self;
    export default {
        components:{
            BarScan
        },
        methods:{
            getResult(result){
                  this.result=result;
            },
            geterror(e){
                  this.$toast(e)
            },}
}