/* Your code... */
<script>
import { Html5Qrcode } from "html5-qrcode";

export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted(){

console.log('hello...');

this.getCameras();

},
methods:{

getCameras() {
Html5Qrcode.getCameras()
.then((devices) => {
/**
* devices would be an array of objects of type:
* { id: "id", label: "label" }
*/
//alert(JSON.stringify(devices));

if (devices && devices.length) {

this.cameraId = '';

for(let device of devices) {
if(device.label.toLowerCase().indexOf('back')>-1){
this.cameraId = device.id;

}
}

if(!this.cameraId){
this.cameraId = devices[0].id;
}

}

this.devices = devices;
this.start();
// .. use this to start scanning.

})
.catch((err) => {
// handle err
console.log(err); // 获取设备信息失败
});
},

start() {
const html5QrCode = new Html5Qrcode("reader");
html5QrCode
.start(
this.cameraId, // retreived in the previous step.
{
fps: 10, // sets the framerate to 10 frame per second
qrbox: { width: 250, height: 250 }, // sets only 250 X 250 region of viewfinder to
// scannable, rest shaded.
},
(decodedText, decodedResult) => {
// do something when code is read. For example:
// if (qrCodeMessage) {
// this.getCode(qrCodeMessage);
// this.stop();
// }
console.log(decodedText);
console.log(decodedResult);

alert(decodedText);
},
(errorMessage) => {
// parse error, ideally ignore it. For example:
// console.log(`QR Code no longer in front of camera.`);
console.log(errorMessage);
}
)
.catch((err) => {
// Start failed, handle it. For example,
console.log(`Unable to start scanning, error: ${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>