vue实现点击按钮调用摄像头扫码
vue在APP端点击【扫码签到】按钮实现调取摄像头扫码
·
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.userId
console.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>
更多推荐
已为社区贡献4条内容
所有评论(0)