vue項(xiàng)目中實(shí)現(xiàn)H5調(diào)取攝像頭掃碼掃一掃功能+生成可識(shí)別的條形碼
案例描述：需求是生成條形碼并且在vue項(xiàng)目中實(shí)現(xiàn)掃一掃功能并不是拍照上傳后端識(shí)別那種
項(xiàng)目場(chǎng)景：?jiǎn)渭兊膆5項(xiàng)目溢十，沒(méi)辦法調(diào)用微信等封裝好的組件或者js因?yàn)橛行﹫?chǎng)景并不在微信自帶的瀏覽器里面
問(wèn)題描述：
生成條形碼使用vue-barcode
cnpm i vue-barcode -D
//在main.js中
import VueBarcode from 'vue-barcode';
Vue.component('barcode', VueBarcode)
//在對(duì)應(yīng)生成條形碼頁(yè)面
<barcode :width="2" :value="code" :options="{format: 'CODE39', width: 2,displayValue: false}"></barcode>
//value為輸入需要生成的code
//value注意不要太長(zhǎng)因?yàn)樘L(zhǎng)的話生成的碼也很長(zhǎng)很密集，h5實(shí)現(xiàn)的掃一掃畢竟性能
//不是很好太密集太長(zhǎng)識(shí)別不了，如果java生成的碼出現(xiàn)掃不
//出來(lái)的情況告訴他試試調(diào)整成Code-128
第一步：因?yàn)閽叽ajs不支持vue組件注冊(cè)或者是引入等方式拣宰，就算是支持我感覺(jué)也很麻煩幻锁，所以這樣的話以動(dòng)態(tài)創(chuàng)建script的方法將掃碼js引入vue項(xiàng)目中
//動(dòng)態(tài)創(chuàng)建script的方法
AddJs: 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()
}
})
},
第二步：在對(duì)應(yīng)的vue頁(yè)面調(diào)用方法將掃碼js引入
methods: {
init(){
util.loadJs('https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js')
},
},
mounted(){
this.init()
}
第三步：在對(duì)應(yīng)的vue頁(yè)面中設(shè)置盛放掃碼的div盒子
<template>
<div id="qr-reader" style="width:100%;height: 100%;"></div>
<template>
第四步：獲取當(dāng)前設(shè)備的攝像頭列表id并存儲(chǔ)為接下來(lái)使用
getCameras(){
Html5Qrcode.getCameras().then(devices => {
//判斷有沒(méi)有設(shè)備的攝像頭列表
if (devices && devices.length) {
// devices 是設(shè)備的攝像頭列表如果大于1的話默認(rèn)取后面攝像頭
if(devices.length>1){
this.cameraId = devices[1].id;
}else{
this.cameraId = devices[0].id;
}
}
}).catch(err => {
// handle err
});
}
第五步：拿存儲(chǔ)的設(shè)備的攝像頭列表id啟動(dòng)掃碼
start(){
this.html5QrCode = new Html5Qrcode('qr-reader')
this.html5QrCode.start(
this.cameraId, // 上面獲取到的id
{
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){
//成功掃出碼qrCodeMessage為掃碼內(nèi)容
//掃碼成功記得關(guān)掉攝像
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}`);
});
},
第六步：關(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.");
});
},
總體頁(yè)面：
使用vue實(shí)現(xiàn)h5掃碼功能
<template>
<div class="scan">
<div class="sectionview">
<div id="qr-reader" style="width:100%;height: 100%;"></div>
</div>
<div class="footer">
<van-button @click="getCameras" color="rgba(249, 185, 73, 1)">Obtain Access</van-button>
</div>
</div>
</template>
<script >
import util from '../common/js/util.js'
export default {
data() {
return {
codeUrl: '',
cameraId:''
}
},
beforeDestroy(){
this.stop()
},
methods: {
getCode(id){
//跳轉(zhuǎn)頁(yè)面
},
init(){
util.loadJs('https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js')
//需要加載時(shí)間建議延時(shí)一點(diǎn)再獲取設(shè)備列表
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){
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 lang="less">
.scan {
width: 100%;
display: flex;
flex-direction: column;
height:100vh;
overflow: hidden;
.footer{
width: 100%;
display: flex;
justify-content: center;
}
}
</style>
后期優(yōu)化改善研究參考文檔
如果對(duì)你有用不要忘記點(diǎn)贊收藏哦庐镐！
https://github.com/mebjas/html5-qrcode
