vue中使用vue-qrcode-reader自动检测并解码来自摄像机流的QR码

1.装包

npm install vue-qrcode-reader

2.在目标页面文件中/src/views/index.vue引入

import { QrcodeStream } from 'vue-qrcode-reader'

3.使用

<template><div class="content"><imgstyle="width:100%;height:174px;"src="@/assets/img/saomiao.gif"alt=""/><qrcode-stream class="QrcodeStream" @decode="onDecode" @init="onInit" /><span>将二维码放入框内，即可自动扫描</span></div></template>
<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {components: { QrcodeStream },data () {return {result: '', //扫码结果信息error: '' //错误信息}},methods: {// 二维码扫描跳转onDecode (result) {this.result = resultwindow.location.href = this.resultthis.$router.push(result)}}
}
</script>

效果：

vue中使用vue-qrcode-reader自动检测并解码来自摄像机流的QR码相关推荐

C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码
本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...
Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流
场景 Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg): Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)_BADAO_ ...
vue中App.vue的主要作用
app.vue中不但可以当做是网站首页,也可以写所有页面中公共需要的动画或者样式.不在上面写代码也可以. app.vue是主组件,是页面入口文件,是vue页面资源的首加载项.所有的页面都是在app.v ...
在vue中实现使用webscoket进行心跳检测机制
<script>data() {// 心跳--startheartCheck: null,lockReconnect: false, //避免ws重连ws: null,wsUrl: nul ...
Vue中实现input框长度自动适应文本长度
在公司业务中遇到这样一种情形: 需要根据input框里内容来实时改变input框的长度,否则input过长会影响拖拽,过短则会导致内容显示不全. <input:id="index&qu ...
VUE中通过JS让input自动获取焦点
【Android App】人脸识别中借助摄像头和OpenCV实时检测人脸讲解及实战（附源码和演示超详细）
需要全部代码请点赞关注收藏后评论区留言私信~~~ 一.借助摄像头实时检测人脸与Android自带的人脸检测器相比,OpenCV具备更强劲的人脸识别功能,它可以通过摄像头实时检测人脸,实时检测的预览空 ...
关于Vue中$nextTick的作用及实现原理(Vue进阶)
Hello,大家好,最近找工作的路途依然艰难,但是要一直保持对技术的热爱!今天继续跟大家探索一下Vue进阶的内容,这次研究一下Vue的全局API中的$nextTick,这是一个很常用,也是经典的API ...
vue核心面试题：Vue中相同逻辑如何抽离？
一.mixin 使用vue中的Vue.mixin,给组件每个生命周期.函数等混入一些公共的逻辑,另外混入对象的钩子将在组件自身钩子之前调用..mixin可以放在全局使用,也可以放在组件中使用. vue ...

vue中使用vue-qrcode-reader自动检测并解码来自摄像机流的QR码

vue中使用vue-qrcode-reader自动检测并解码来自摄像机流的QR码相关推荐

最新文章

热门文章