vue调用摄像头扫描二维码功能

简介: 在使用vue开发的h5移动端想要实现一个调用摄像头扫描二维码的功能。可能一时间想到的解决方案就是调用微信的sdk,但是这个微信的扫一扫只能在微信里用,而且还需要公众号认证等配置操作。很麻烦。可以但没必要,万一你的h5和公众号没有任何关联,不久徒增烦恼吗?

1.安装
npm install @zxing/library --save

封装组件

二维码绑定
扫码填入 解绑
      </div>
    </div>
  </div>
</div>
<!-- 扫描盒子 -->
<div class="scan-box" v-if="scanTextData.showScanBox">
  <div class="scan-cacel" @click="cancelScan" v-show="scanTextData.showScanBoxInfo">
    <!-- <img src="" alt=""> -->
    取消
  </div>
  <video ref="video" id="video" class="scan-video" v-show="scanTextData.showScanBoxInfo" autoplay></video>
  <div class="scan-img" v-show="scanTextData.showScanBoxInfo">
    <div class="scan-frame">
      <span class="left-t"></span>
      <span class="right-t"></span>
      <span class="left-b"></span>
      <span class="right-b"></span>
      <span class="cross-line"></span>
    </div>
  </div>
  <!-- <img  src="/static/img/scan.svg" alt="" v-show="scanTextData.showScanBoxInfo"> -->
  <div class="scan-tip" v-show="scanTextData.showScanBoxInfo"> {{scanTextData.tipMsg}} </div>
</div>


name: 'scanCodePage',
data() {
  return {
    scanTextData:{
        loadingShow: false,
        codeReader: null,
        scanText: '',
        vin: null,
        tipMsg: '将二维码置于屏幕中,即可识别',
        tipShow: false,

        showScanBox:false,
        showScanBoxInfo:false,
    },
    hasBind:false
  }
},
methods: {
    toScanCode(){
        console.log('识别二维码',this.dataObj)
        scanTextData.codeReader = new BrowserMultiFormatReader();
        this.scanTextData.showScanBox = true
        this.openScan();
        
    },
    cancelScan(){
        //识别完停止使用摄像头
        let thisVideo = document.getElementById("video");
        thisVideo.srcObject.getTracks()[0].stop()
        scanTextData.codeReader.reset(); // 重置
        this.scanTextData.showScanBox = false
        setTimeout(()=>{
        this.scanTextData.showScanBoxInfo = false
        },1000)
    },

    async openScan() {
        scanTextData.codeReader.getVideoInputDevices().then((videoInputDevices) => {
        scanTextData.tipShow = true;
        scanTextData.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 => {
        scanTextData.tipShow = false;
        console.error(err);
        });
    },
    decodeFromInputVideoFunc(firstDeviceId) {
        scanTextData.codeReader.reset(); // 重置
        scanTextData.scanText = '';
        scanTextData.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => {
        scanTextData.tipMsg = '将二维码置于屏幕中,即可识别';
        scanTextData.scanText = '';
        setTimeout(()=>{
            this.scanTextData.showScanBoxInfo = true
        },1000)
        if (result) {
            console.log('扫描结果', result.text);
            if (result.text) {
            console.log('扫描结果11', result.text);
            this.scanTextData.showScanBox = false
            this.scanTextData.showScanBoxInfo = false
            this.scanTextData.scanText = result.text
            //这里扫描出结果可以调用你想要的方法
            //识别完停止使用摄像头
            let thisVideo = document.getElementById("video");
            thisVideo.srcObject.getTracks()[0].stop()
            scanTextData.codeReader.reset(); // 重置
            }
        }else{
            // console.log('没出来?',result,err)
        }
        if (err && !(err)) {
            scanTextData.tipMsg = '识别失败';
            setTimeout(() => {
            scanTextData.tipShow = false;
            }, 2000)
            console.error(err);
        }
        });
    },

},
props:['dataObj']

}

width:100%;
height: 100px;
padding-top: 50px;
background: #fff;
.topTitle{
  width:100%;
  position: relative;
  .pullTitle{
    display: flex;
    height: 80px;
    line-height: 80px;
    margin-top: -40px;
    background: #fff;
    align-items: center;
    justify-content: space-between;
    .pullName{
      font-size: 30px;
      color: rgba(0,0,0,0.85);
    }
    img{
      width: 40px;
      height: 40px;
    }
    .left-icon{
      margin:0 15px;
    }
    span{
      text-decoration: underline;
      text-decoration-color: #42a5ff;
      color: #42a5ff;
      margin-left: 5px;
    }
    .right-part{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-bottom: 1px solid #e5e5e5;
      overflow: hidden;
      text-overflow: ellipsis;
      input{
        border:none;
        flex: 1;
      }
    }
  }
}

}

.scan-index-bar{

background-image: linear-gradient( -45deg, #42a5ff ,#59cfff);

}
.van-nav-bar__title{

color: #fff !important;

}
.scan-box{

position: fixed;
top: 0;
left: 0;
z-index: 5;
height: 100%;
width: 100vw;
.scan-cacel{
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 9;
  color: #fff;
  font-size: 35px;
}

}
.scan-video{

height: 100vh;
width: 100vw;
object-fit:cover;

}
.scan-img{

width: 500px;
height: 500px;
position: fixed;
top: 40%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
z-index: 6;
.scan-frame{
  width: 100%;
  height: 100%;
  position: relative;
  .left-t,.right-t,.left-b,.right-b{
    position: absolute;
    width: 80px;
    height: 80px;
  }
  .left-t{
    top: 0;
    left: 0;
    border-top:2px solid #17B1B7;
    border-left:2px solid #17B1B7;
  }
  .right-t{
    top: 0;
    right: 0;
    border-top:2px solid #17B1B7;
    border-right:2px solid #17B1B7;
  }
  .left-b{
    bottom: 0;
    left: 0;
    border-bottom:2px solid #17B1B7;
    border-left:2px solid #17B1B7;
  }
  .right-b{
    bottom: 0;
    right: 0;
    border-bottom:2px solid #17B1B7;
    border-right:2px solid #17B1B7;
  }
  .cross-line{
    width: 600px;
    height: 10px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0),#5DDDD3,rgba(255,255,255,0));
    position: absolute;
    top: 0;
    left: -50px;
    animation: identifier_p 5s infinite;
  }
  @keyframes identifier_p {
    0%{
      top: 0%;
    }
    50%{
      top: 100%;
    }
    100%{
      top: 0;
    }
  }
}

}
.scan-tip{

width: 100vw;
text-align: center;
margin-bottom: 10vh;
color: white;
font-size: 5vw;
position: absolute;
bottom: 50px;
left: 0;
color: #fff;

}
.page-scan{

overflow-y: hidden;
// background-color: #363636;

}

目录
相关文章
|
1天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
5天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
54 12
|
1天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
23天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
51 8
|
存储 JavaScript 网络架构
Vue3新增功能特性
Vue3相比Vue2更新技术点
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
145 1
|
23天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
62 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
108 58
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章