vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机 |
您所在的位置：网站首页 › html5扫描二维码 › vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机 |
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
|
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。 单纯的h5网页不涉及真机
demo链接
案例描述：需求是生成条形码并且在vue项目中实现扫一扫功能并不是拍照上传后端识别那种 项目场景：单纯的h5项目，没办法调用微信等封装好的组件或者js因为有些场景并不在微信自带的浏览器里面 问题描述：生成条形码使用vue-barcode cnpm i vue-barcode -D //在main.js中 import VueBarcode from 'vue-barcode'; Vue.component('barcode', VueBarcode) //在对应生成条形码页面 //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盒子 第四步：获取当前设备的摄像头列表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扫码功能 Obtain Access 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() } } .scan { width: 100%; display: flex; flex-direction: column; height:100vh; overflow: hidden; .footer{ width: 100%; display: flex; justify-content: center; } } 后期优化改善研究参考文档如果对你有用不要忘记点赞收藏哦！ https://github.com/mebjas/html5-qrcode |
前端同学可以加我一起交流一起进步【本文地址】
今日新闻 |
推荐新闻 |