VUE?html5-qrcode實現(xiàn)H5掃一掃功能實例

更新時間：2023年08月05日 08:37:37 作者：改bug的101天

這篇文章主要給大家介紹了關(guān)于VUE?html5-qrcode實現(xiàn)H5掃一掃功能的相關(guān)資料,html5-qrcode是輕量級和跨平臺的QR碼和條形碼掃碼的JS庫,集成二維碼、條形碼和其他一些類型的代碼掃描功能,需要的朋友可以參考下

官方文檔 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、獲取攝像權(quán)限在created調(diào)用

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: 您需要授予相機訪問權(quán)限"
					  this.$emit("err",this.error)
			        });
},

4、獲取掃碼內(nèi)容

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、必須在銷毀頁面前關(guān)閉掃碼功能否則會報錯 could not start video source

//銷毀前調(diào)用
beforeDestroy() {
		    this.stop();
}
//關(guān)閉掃碼
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:掃碼內(nèi)容
}
geterror(e){
    //e:報錯內(nèi)容
}

組件完整代碼

<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: 您需要授予相機訪問權(quán)限"
					  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)
			},}
}

總結(jié)

到此這篇關(guān)于VUE html5-qrcode實現(xiàn)H5掃一掃功能的文章就介紹到這了,更多相關(guān)VUE html5-qrcode H5掃一掃內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: