第一种方式：
<template>
<div class="scan">
<div class="sectionview">
<div id="qr-reader" style="100%;height: 100%;"></div>
</div>
<div class="footer">
<button @click="getCameras" color="rgba(249, 185, 73, 1)">Obtain Access</button>
</div>
</div>
</template>
<script >
import util from '../../assets/common/util.js'
export default {
data() {
return {
codeUrl: '',
cameraId:''
}
},
beforeDestroy(){
this.stop()
},
methods: {
getCode(id){
//跳转页面
alert('成功'+id)
},
init(){
this.loadJs('https://unpkg.com/html5-qrcode')
// this.loadJs('https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js')
//需要加载时间建议延时一点再获取设备列表
setTimeout(()=>{
this.getCameras()
},1000)
},
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.");
});
},
start(){
this.html5QrCode = new Html5Qrcode('qr-reader')
this.html5QrCode.start(
this.cameraId, // retreived in the previous step.
{
fps: 10, // sets the framerate to 10 frame per second
qrbox: 250 // sets only 250 X 250 region of viewfinder to
// scannable, rest shaded.
},
qrCodeMessage => {
// do something when code is read. For example:
if(qrCodeMessage){
alert(qrCodeMessage)
this.getCode(qrCodeMessage)
// this.stop()
}
},
errorMessage => {
// parse error, ideally ignore it. For example:
// console.log(`QR Code no longer in front of camera.`);
})
.catch(err => {
// Start failed, handle it. For example,
console.log(`Unable to start scanning, error: ${err}`);
});
},
getCameras(){
Html5Qrcode.getCameras().then(devices => {
/**
* devices would be an array of objects of type:
* { id: "id", label: "label" }
*/
if (devices && devices.length) {
if(devices.length>1){
this.cameraId = devices[1].id;
}else{
this.cameraId = devices[0].id;
}
console.log(this.cameraId,'cameraId')
this.start()
// .. use this to start scanning.
}
}).catch(err => {
// handle err
});
}
},
mounted(){
this.init()
}
}
</script>
<style >
.scan {
100%;
display: flex;
flex-direction: column;
height:100vh;
overflow: hidden;
}
.footer{
100%;
display: flex;
justify-content: center;
}
</style>
util.js文件：
import Vue from 'vue'
Vue.prototype.loadJs = function (url) {
console.log(url,'url')
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.type = 'text/javascript'
document.body.appendChild(script)
script.onload = () => {
resolve()
}
})
}
第二种方式：
<template>
<div>
<p class="error">{{ error }}</p><!--错误信息-->
<p class="decode-result">扫描结果: <b>{{ result }}</b></p><!--扫描结果-->
<qrcode-stream @decode="onDecode" @init="onInit" />
</div>
</template>
<script>
//下载插件
//cnpm install --save vue-qrcode-reader
//引入
import { QrcodeStream } from 'vue-qrcode-reader';
export default {
//注册
components: { QrcodeStream },
data () {
return {
result: '',//扫码结果信息
error: '',//错误信息
}
},
methods: {
onDecode (result) {
alert(result);
this.result = result
},
async onInit (promise) {
try {
await promise
} catch (error) {
if (error.name === 'NotAllowedError') {
this.error = "ERROR: 您需要授予相机访问权限"
} else if (error.name === 'NotFoundError') {
this.error = "ERROR: 这个设备上没有摄像头"
} else if (error.name === 'NotSupportedError') {
this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)"
} else if (error.name === 'NotReadableError') {
this.error = "ERROR: 相机被占用"
} else if (error.name === 'OverconstrainedError') {
this.error = "ERROR: 安装摄像头不合适"
} else if (error.name === 'StreamApiNotSupportedError') {
this.error = "ERROR: 此浏览器不支持流API"
}
}
}
}
}
</script>
<style scoped>
.error {
font-weight: bold;
color: red;
}
</style>