vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。 单纯的h5网页不涉及真机
前端同学可以加我一起交流一起进步
案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能并不是拍照上传后端识别那种
项目场景:单纯的h5项目,没办法调用微信等封装好的组件或者js因为有些场景并不在微信自带的浏览器里面
问题描述:
生成条形码使用vue-barcode
cnpm i vue-barcode -D
//在main.js中
import VueBarcode from 'vue-barcode';
Vue.component('barcode', VueBarcode)
//在对应生成条形码页面
<barcode :width="2" :value="code" :options="{format: 'CODE39', width: 2,displayValue: false}"></barcode>
//value为输入需要生成的code
//value注意不要太长因为太长的话生成的码也很长很密集,h5实现的扫一扫毕竟性能
//不是很好太密集太长识别不了,如果java生成的码出现扫不
//出来的情况告诉他试试调整成Code-128
第一步:因为扫码js不支持vue组件注册或者是引入等方式,就算是支持我感觉也很麻烦,所以这样的话以动态创建script的方法将扫码js引入vue项目中
//动态创建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()
}
})
},
第二步:在对应的vue页面调用方法将扫码js引入
也可以
npm i html5-qrcode
methods: {
init(){
util.AddJs('https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js')
},
},
mounted(){
this.init()
}
第三步:在对应的vue页面中设置盛放扫码的div盒子
<template>
<div id="qr-reader" style="width:100%;height: 100%;"></div>
<template>
第四步:获取当前设备的摄像头列表id并存储为接下来使用
getCameras(){
Html5Qrcode.getCameras().then(devices => {
//判断有没有设备的摄像头列表
if (devices && devices.length) {
// devices 是设备的摄像头列表如果大于1的话默认取后面摄像头
if(devices.length>1){
this.cameraId = devices[1].id;
}else{
this.cameraId = devices[0].id;
}
}
}).catch(err => {
// handle err
});
}
第五步:拿存储的设备的摄像头列表id启动扫码
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为扫码内容
//扫码成功记得关掉摄像
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}`);
});
},
第六步:关掉摄像头
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.");
});
},
总体页面:
使用vue实现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){
//跳转页面
},
init(){
util.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){
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>
后期优化改善研究参考文档
如果对你有用不要忘记点赞收藏哦!
https://github.com/mebjas/html5-qrcode