官方文档 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)
},}
}