<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) {
|
console.log(devices)
|
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: 10 ,
|
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>
|
