vue实现点击按钮调用摄像头扫码

vue在APP端点击【扫码签到】按钮实现调取摄像头扫码：
1.按钮页面：

<template><div><button @click="scanCode">扫码签到</button></div>
</template>
<script>
export default {data() {return {}},methods:{scanCode() {//使用路由跳转打开扫码页面并携带参数this.$router.push({path: '/qrcodeStream',query:{userId:'1004003'}});}}
}
</script>

2.安装插件

cnpm install --save vue-qrcode-reader
或
npm install --save vue-qrcode-reader

3.扫码页面 : 新建qrcodeStream.vue页面，并在路由中注册

<template><div class="page-scan"><!--返回--><van-nav-bar title="扫描二维码" fixed @click-left="clickIndexLeft()" class="scan-index-bar"><template #left><van-icon name="arrow-left" size="18" color="#fff"/><span style="color: #fff"> 取消 </span></template></van-nav-bar><!-- 扫码区域 --><qrcode-stream  @decode="onDecode" @init="onInit"/><!-- 提示语 --><p class="error">{{ error }}</p><p class="decode-result" v-if="this.error!=''">Last result: <b>{{ result }}</b></p></div></template><script>//引用组件import { QrcodeStream } from 'vue-qrcode-reader'export default {//注册组件components: { QrcodeStream },data () {return {result: '',error: '',id:''}},mounted(){//接收上个页面传过来的值this.id = this.$route.query.userIdconsole.log(this.id)},methods: {// decode方法，当识别到二维码会把识别信息触发出来onDecode (result) {this.result = result},// init方法是初始化调用摄像头,此时如果摄像头报错会有很多提示，请酌情处理async onInit (promise) {try {await promise} catch (error) {if (error.name === 'NotAllowedError') {this.error = "ERROR: you need to grant camera access permission"} else if (error.name === 'NotFoundError') {this.error = "ERROR: no camera on this device"} else if (error.name === 'NotSupportedError') {this.error = "ERROR: secure context required (HTTPS, localhost)"} else if (error.name === 'NotReadableError') {this.error = "ERROR: is the camera already in use?"} else if (error.name === 'OverconstrainedError') {this.error = "ERROR: installed cameras are not suitable"} else if (error.name === 'StreamApiNotSupportedError') {this.error = "ERROR: Stream API is not supported in this browser"} else if (error.name === 'InsecureContextError') {this.error = `ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.`;} else {this.error = `ERROR: Camera error (${error.name})`;}}},clickIndexLeft(){  // 返回上一页this.$router.back();}}}</script><style scoped>.error {font-weight: bold;color: red;}.scan-index-bar{background-image: linear-gradient( -45deg, #42a5ff ,#59cfff);}.van-nav-bar__title{color: #fff !important;}.scan-video{height: 80vh;}.scan-tip{width: 100vw;text-align: center;margin-bottom: 10vh;color: white;font-size: 5vw;}/* .page-scan{overflow-y: hidden;background-color: #363636;} */</style>

vue实现点击按钮调用摄像头扫码相关推荐

VUE项目移动端H5调用摄像头扫码
<template><div><div @click="moveToCameraAVG()" v-cloak><div class=&qu ...
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
WinForm调用摄像头扫码识别二维码
前言因公司业务需求,需要在Windows系统下调用摄像头识别二维码需求,就有了这个功能.根据网上网友提供的一些资料,自己整合应用到项目中,效果还不错(就是感觉像素不是太好).现在将调用摄像头+识别二 ...
【Vue 调用微信扫码 IOS报错解决办法】
遇到一个问题,H5调用摄像头扫码,安卓环境下基本所有机型都可以调起摄像头,但是IOS 只有少部分机型才能调用,参考了网上很多例子比如以下两位老大哥的例子 Vue 移动端实现调用相机扫描二维码或条形码 ...
Vue h5 调用微信扫码接口
需求调用微信扫码接口,然后获取扫码返回结果的url中的参数,携参跳转到其他页面 1. 安装微信js-sdk 通过yarn安装 yarn add weixin-js-sdk 通过npm安装 npm i ...
vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
Win10环境前后端分离项目基于Vue.js+Django+Python3实现微信(wechat)扫码支付流程(2021年最新攻略)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_182 之前的一篇文章:mpvue1.0+python3.7+Django2.0.4实现微信小程序的支付功能,主要介绍了微信小程序内 ...

vue实现点击按钮调用摄像头扫码

vue实现点击按钮调用摄像头扫码相关推荐

最新文章

热门文章