vue 实现 扫二维码 功能
Vue 实现 功能 二维码
2023-09-11 14:15:30 时间
前段时间一直在研究,如何通过 vue 调用 相机 实现 扫一扫的功能,但是查看文档发现,需要获取 getUserMedia 的属性值,但存在兼容性问题。
退而求其次,通过 h5plus 来实现。
1.QrScanner.vue
<!-- 扫描二维码 20180109 --> <template> <div> <!-- 内容部分 --> <video id="qr-vedio" class="v" autoplay=""></video> <canvas id="qr-canvas" width="800" height="600" style="width: 800px; height: 600px;display:none;"></canvas> <p v-show="result != ''">{{result}}</p> <p v-show="errorMes != ''">{{errorMes}}</p> </div> </template> <script> export default { props: { // }, data () { return { vedio: '', canvas: '', context: '', stopScan: null, errorMes: '', result: '' } }, mounted(){ console.log(1); var _that = this; window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; this.vedio = document.getElementById('qr-vedio'); this.canvas = document.getElementById('qr-canvas'); this.context = this.canvas.getContext('2d'); console.log(2); // Call the getUserMedia method with our callback functions if (navigator.getUserMedia) { console.log(3); var videoSource = []; navigator.mediaDevices.enumerateDevices().then((function (sourceInfos) { var i; for (i = 0; i != sourceInfos.length; ++i) { var sourceInfo = sourceInfos[i]; if (sourceInfo.kind === 'videoinput' && sourceInfo.label.indexOf('back') != -1) { videoSource.push(sourceInfo.deviceId); } } var successCallback = function (stream) { _that.vedio.src = (window.URL && window.URL.createObjectURL(stream)) || stream; window.localMediaStream = stream; _that.vedio.addEventListener("loadstart", function () { _that.vedio.play(); }, false); _that.stopScan = setInterval(_that.scan, 500); } navigator.getUserMedia({ video: { optional: [{ sourceId: videoSource[0] }] } }, successCallback, function (e) { console.log(e); }); })); } else { this.errorMes = 'Native web camera streaming (getUserMedia) not supported in this browser.'; } qrcode.callback = function (data) { _that.result = data; console.log(data) if (window.localMediaStream && window.localMediaStream.stop) { window.localMediaStream.stop(); } if (_that.stopScan) { clearInterval(_that.stopScan); } }; }, methods: { scan() { if (window.localMediaStream) { this.context.drawImage(this.vedio, 0, 0, 100, 100); } try { qrcode.decode(); } catch (e) { console.log('decode has error'); } } } } </script> <style lang="less" scoped> .v { width: 320px; height: 240px; } #qr-canvas { width: 800px; height: 800px; } </style>
2.效果图
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
- vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能
- [转] 从零构建 vue2 + vue-router + vuex 开发环境到入门,实现基本的登录退出功能
- 【Vue】实现置顶菜单div卡片切换效果(图文+完整源代码)
- vue+iview tables多个分页实现
- Vue - 实现图片裁剪功能,并上传到服务器(内置第三方最优秀的裁剪图片组件,上传到服务器功能)干净整洁无 BUG 的示例源码与超详细的注释,兼容任意浏览器
- 详解Vue PC端如何实现扫码登录功能
- 【Python】+Django+Vue+Element UI 实现图片上传功能
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- Vue 国际化之 vue-i18n 的使用
- 基于Vue+MySQL实现(Web)物流管理系统【100010571】
- 手写实现Vue核心功能EventBus事件派发机制
- 一、Vue分页实现
- Vue+Bootstrap实现购物车程序(1)
- vue项目中两种回车键搜索功能实现
- Vue中如何实现将表格导出Excel
- vue实战入门后台篇六:springboot+mybatis实现网站后台-前端登录功能对接
- vue实战入门后台篇五:springboot+mybatis实现网站后台-操作日志功能实现
- vue实战入门后台篇四:springboot+mybatis实现网站后台-增删改查功能实现
- vue实战入门进阶篇一:vue+elementui实现网站后台-系统功能规划
- Electron-vue实战-每日清单---04登录页面与开机自启动的实现
- vue项目如何实现剪切板功能--vue-clipboard2
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理