VUE html5-qrcode implements H5 scan function example

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

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

import { Html5Qrcode } from "html5-qrcode";

getCameras() {
			      ()
			        .then((devices) => {
			          if (devices && ) {
						this.html5QrCode = new Html5Qrcode("reader");
			            ();//Scan the code			          }
			        })
			        .catch((err) => {
			          // handle err
					  this.html5QrCode = new Html5Qrcode("reader");
					   = "ERROR: You need to grant camera access"
					  this.$emit("err",)
			        });
},

start() {
			      //Environment rear user front			      this.html5QrCode 
			        .start(
			           {facingMode: "environment" },
			          {
			            fps: 2,//Scan once in 500 milliseconds			            qrbox: { width: 250, height: 250 }, 
			          },
			          (decodedText, decodedResult) => {
						  this.$emit("ok",decodedText)
			          }
			        )
			        .catch((err) => {
			          (`Unable to start scanning, error: ${err}`);
			        });
},

<BarScan ref="qrcode" @ok="getResult" @err="geterror" ></BarScan>
getResult(e){
    //e: Scan the QR code content}
geterror(e){
    //e: Report error content}

<template>
    <div class="qrcode">
		<div ></div>
    </div>
</template>
<script>
	import { Html5Qrcode } from "html5-qrcode";
	export default {
		created() {
			()
		},
		beforeDestroy() {
		    ();
		},
		methods:{
			getCameras() {
			      ()
			        .then((devices) => {
			          if (devices && ) {
						this.html5QrCode = new Html5Qrcode("reader");
			            ();
			          }
			        })
			        .catch((err) => {
			          // handle err
					  this.html5QrCode = new Html5Qrcode("reader");
					   = "ERROR: You need to grant camera access"
					  this.$emit("err",)
			        });
			    },
			 start() {
			      //Environment rear user front			      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.().then((ignore) => {
			          // QR Code scanning is stopped.
			          ("QR Code scanning stopped.");
			        })
			        .catch((err) => {
			          // Stop failed, handle it.
			          ("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/'
	var _self;
	export default {
		components:{
			BarScan
		},
        methods:{
            getResult(result){
			      =result;
			},
			geterror(e){
				  this.$toast(e)
			},}
}