标签:tipShow err scan firstDeviceId videoInputDevices 二维码 codeReader 识别 H5
template
<div class="qr-code qr-btn" @click="qrCodeSearch"> <i class="iconfont icon-weibiaoti--2"></i> </div>methods
qrCodeSearch() { this.$router.push( { name: 'scan' } )}
scan.vue
<template> <div class="page-scan" :style="{height: wrapHeight + 'px'}"> <div class="back" @click="goBack"> <img class="border-img" src="../../../../../assets/images/header/back.png" lazy-load="true" /> </div> <!-- 扫码区域 --> <video ref="video" id="video" class="scan-video" autoplay></video> <!-- 提示语 --> <div v-show="tipShow" class="scan-tip"> {{tipMsg}} </div> </div> </template> <script> import { BrowserMultiFormatReader } from '@zxing/library'; export default { name: 'scanCodePage', data() { return { wrapHeight: null, loadingShow: false, codeReader: null, scanText: '', vin: null, tipMsg: '正在尝试识别....', tipShow: false } }, created() { this.codeReader = new BrowserMultiFormatReader(); this.openScan(); }, destroyed(){ this.codeReader.reset(); }, watch: { '$route'(to, from) { if(to.path == '/scanCodePage'){ this.codeReader = new BrowserMultiFormatReader(); this.openScanTwo(); } } }, methods: { // 返回 goBack() { this.$destroy(); this.$router.back(); }, async openScan() { this.codeReader.getVideoInputDevices().then((videoInputDevices) => { this.tipShow = true; this.tipMsg = '正在调用摄像头...'; console.log('videoInputDevices', videoInputDevices); // 默认获取第一个摄像头设备id let firstDeviceId = videoInputDevices[0].deviceId; // 获取第一个摄像头设备的名称 const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label); if (videoInputDevices.length > 1) { // 判断是否后置摄像头 if (videoInputDeviceslablestr.indexOf('back') > -1) { firstDeviceId = videoInputDevices[0].deviceId; } else { firstDeviceId = videoInputDevices[1].deviceId; } } this.decodeFromInputVideoFunc(firstDeviceId); }).catch(err => { this.tipShow = false; this.codeReader = null; this.$destroy(); // 这部分接下去的代码根据需要,读者自行编写了 this.$router.push({ path: '/couponCancell', query: { couConsumerCode: '' } }) console.error(err); }); }, async openScanTwo() { this.codeReader = await new BrowserMultiFormatReader(); this.codeReader.getVideoInputDevices().then((videoInputDevices) => { this.tipShow = true; this.tipMsg = '正在调用摄像头...'; console.log('videoInputDevices', videoInputDevices); // 默认获取第一个摄像头设备id let firstDeviceId = videoInputDevices[0].deviceId; // 获取第一个摄像头设备的名称 const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label); if (videoInputDevices.length > 1) { // 判断是否后置摄像头 if (videoInputDeviceslablestr.indexOf('back') > -1) { firstDeviceId = videoInputDevices[0].deviceId; } else { firstDeviceId = videoInputDevices[1].deviceId; } } this.decodeFromInputVideoFunc(firstDeviceId); }).catch(err => { this.tipShow = false; this.$destroy(); // 下面代码根据业务需求自行编写 this.$router.push({ path: '/couponCancell', query: { couConsumerCode: '' } }) console.error(err); }); }, decodeFromInputVideoFunc(firstDeviceId) { this.codeReader.reset(); // 重置 this.scanText = ''; this.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => { this.tipMsg = '正在尝试识别...'; this.scanText = ''; if (result) { console.log('扫描结果', result); this.scanText = result.text; if (this.scanText) { this.tipShow = false; this.$destroy(); // 下面代码根据业务需求自行编写 this.$router.push({ path: '/couponCancell', query: { couConsumerCode: this.scanText } }) } } if (err && !(err)) { this.tipMsg = '识别失败'; setTimeout(() => { this.tipShow = false; this.$destroy(); // 下面代码根据业务需求自行编写 this.$router.push({ path: '/couponCancell', query: { couConsumerCode: '' } }) }, 2000) console.error(err); } }); } }, mounted() { this.wrapHeight = document.body.clientHeight; } } </script> <style lang="less" scoped> .page-scan .back{ position:absolute; top:10; left:10px; height:30px; z-index: 100; } .page-scan .back img{ height: 100%; } .scan-index-bar{ background-image: linear-gradient( -45deg, #42a5ff ,#59cfff); } .van-nav-bar__title{ color: #fff !important; } .scan-video{ height: 90vh; } .scan-tip{ width: 100vw; text-align: center; margin-bottom: 10vh; color: white; font-size: 5vw; } .page-scan{ overflow: hidden; background-color: #363636; } </style>
标签:tipShow,err,scan,firstDeviceId,videoInputDevices,二维码,codeReader,识别,H5 来源: https://www.cnblogs.com/chenwan1218/p/15798360.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。