vue扫二维码一维码,浏览器H5实现js扫码,含uniapp实现方式

扫码需求准备工作

希望在h5端直接使用扫码调用js库
使用框架 vue 或者 uniapp

yarn add @zxing/library

这里我使用的版本是 ^0.19.1 可以直接带上版本号下载

开启https

扫码需要使用摄像头所以必须开启https 来保证可以获取手机摄像头
vue找到vue.config.js 加入以下代码

老版本脚手架直接在devServer加入

https: true

新版本使用 defineConfig 用下面的方法

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,devServer: {server: {type: 'https',},}
})

uniapp 开启

直接在manifest 源码视图找到h5的配置

"devServer" : {"https": true,},

至此准备工作就做好了

组件编写

模板里放入video标签

<video id="video_nav_id" autoplay :controls="false"></video>

在生命周期里给video 增加属性配置

一定要在dom载入后也就是 mounted里执行

mounted() {var video = document.getElementById('video_nav_id')video.setAttribute('id','video_id')video.setAttribute('class','video_calss')this.initEvent()
},

如果是uniapp的话注意找video的时候往更下一层寻找 uni会给原生的video标签包装一层

var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0]

编写初始化的事件执行扫码动作

获取摄像头调取后摄像头

initEvent() {this.codeReader = new BrowserMultiFormatReader();this.codeReader.listVideoInputDevices().then(res => {if(res.length > 0) {this.videoInputDevices = resthis.deviceId = res[1].deviceIdalert(`deviceId:` + this.deviceId);}else{alert('当前没有可用视频通道');}}).catch(err => {alert('当前浏览器环境不支持获取视频通道');})this.startScanning()
},

执行扫码获取结果

startScanning() {try {this.codeReader.decodeFromVideoDevice(this.deviceId, 'video_id',(res,err) => {if(res) {this.$emit('success', res)alert(`结果${res}`);this.codeReader && this.codeReader.reset();}})}catch(err){alert(`初始化失败${err}`);}},

最后返回的结果发送出去让父组件接收具体的后续逻辑按业务操作

代码整合

<template><div class="camera_page"><div class="camera_content"><div class="code_close" @click="closeClick()"><span>返回</span></div><div class="loop_line"></div><div class="video_nav" ><video id="video_nav_id" autoplay :controls="false"></video></div></div></div>
</template><script>import adapter from 'webrtc-adapter';import { BrowserMultiFormatReader } from "@zxing/library"export default {data() {return {codeReader: null,videoInputDevices: [],deviceId: null,}},mounted() {// var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0]var video = document.getElementById('video_nav_id')video.setAttribute('id','video_id')video.setAttribute('class','video_calss')this.initEvent()},methods: {initEvent() {this.codeReader = new BrowserMultiFormatReader();this.codeReader.listVideoInputDevices().then(res => {if(res.length > 0) {this.videoInputDevices = resthis.deviceId = res[1].deviceIdalert(`deviceId:` + this.deviceId);console.log('res', res);}else{alert('当前没有可用视频通道');}}).catch(err => {alert('当前浏览器环境不支持获取视频通道');})this.startScanning()},startScanning() {try {this.codeReader.decodeFromVideoDevice(this.deviceId, 'video_id',(res,err) => {if(res) {this.$emit('success', res)alert(`结果${res}`);this.codeReader && this.codeReader.reset();}})}catch(err){alert(`初始化失败${err}`);}},closeClick() {// uni.navigateBack()this.$emit('close')},}}
</script><style scoped >
.camera_page {height: 100%;width: 100%;
}
.camera_content {height: 100%;width: 100%;position: relative;
}
.code_close {height: 50rpx;width: 50rpx;position: absolute;left: 30rpx;top: 30rpx;z-index: 999999;color: #fff;
}
.code_close > img {height: 100%;width: 100%;display: block;}
.loop_line {height: 3px;width: 80%;background-color: aliceblue;border-radius: 50%;box-shadow: 1px -4px 25px 7px rgba(255, 255, 255, 0.5);position: absolute;left: 50%;top: 20%;transform: translateX(-50%);animation: myfirst 3s infinite;z-index: 999999;
}
@keyframes myfirst {10% {top: 20%;}50% {top: 80%;}100% {top: 20%;}
}
.video_nav {height: 100%;width: 100%;background: #000000;padding: 100px 0;
}
#video_nav_id {height: 100%;width: 100%;
}</style>

最后实现方案就是这样 uniapp就注意寻找video 和模板的 div换成view就可以了

vue扫二维码一维码,浏览器H5实现js扫码,含uniapp实现方式相关推荐

原生Vue实现二维码扫一扫，兼容PC、安卓、IOS
原生Vue实现二维码扫一扫通过使用 vue-qrcode-reader 进行实现,必须是 Https 或 Localhost 文章目录原生Vue实现二维码扫一扫 vue-qrcode-reader ...
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
spring boot支付宝沙盒扫二维码支付
Spring boot整合支付宝沙盒 1.这里没有介绍对支付宝沙盒的密钥和公钥的配置,如没配置请先配置后在看此博客, 有很多不足之处,请多多包涵 2.我使用的是扫码支付,也是就是生成二维码,当然不止有 ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...
很多人很想知道怎么扫一扫二维码就能打开网站，就能添加联系人，就能链接wifi，今天做个demo（续集）...
有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用.(浏览器自带的扫描就够了,QQ扫码和微信扫码部分手机不能直接连接wifi) 在看之前你可以扫一扫下面几个二维码先看看效果: 上 ...
前端JS调用微信扫一扫二维码
来源: 最近做一个项目,H5页面,在微信中打开,里面有个功能,就是点击按钮弹出微信二维码扫一扫. 项目截图: 暂时没有图,下次再补上.就是页面点击按钮,弹出扫二维码的窗口我只负责前端,所以只上前 ...
vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
物联网开发笔记（31）- 使用Micropython开发ESP32开发板之手机扫二维码远程控制开关灯（1）
一.目的我们分3节讲述远程控制.这一节在我们的240x240的oled屏幕上显示二维码,然后用手机扫二维码,从开发板的TCP服务器上返回字符串. 二.环境 ESP32 + 240x240的oled彩 ...
扫二维码访问网站、网页
生活中时常会有这种情形,扫码登陆,扫码注册,扫码访问某网页等.其实其中的原理就是,这个二维码中包含了你要访问的地址的url,扫码可以解析其中的url从而进行访问. 下面以springboot项目来实现 ...

vue扫二维码一维码,浏览器H5实现js扫码,含uniapp实现方式

扫码需求准备工作

开启https

老版本脚手架直接在devServer加入

新版本使用 defineConfig 用下面的方法

uniapp 开启

组件编写

模板里放入video标签

在生命周期里给video 增加属性配置

编写初始化的事件执行扫码动作

执行扫码获取结果

代码整合

最后实现方案就是这样 uniapp就注意寻找video 和模板的 div换成view就可以了

vue扫二维码一维码,浏览器H5实现js扫码,含uniapp实现方式相关推荐

最新文章

热门文章

vue扫二维码一维码,浏览器H5实现js扫码,含uniapp实现方式

扫码需求 准备工作

开启https

老版本脚手架 直接在devServer加入

新版本使用 defineConfig 用下面的方法

uniapp 开启

组件编写

模板里放入video标签

在生命周期里给video 增加属性配置

编写初始化的事件 执行扫码动作

执行扫码 获取结果

代码整合

最后实现方案就是这样 uniapp就注意寻找video 和 模板的 div换成view就可以了

vue扫二维码一维码,浏览器H5实现js扫码,含uniapp实现方式相关推荐

最新文章

热门文章

扫码需求准备工作

老版本脚手架直接在devServer加入

编写初始化的事件执行扫码动作

执行扫码获取结果

最后实现方案就是这样 uniapp就注意寻找video 和模板的 div换成view就可以了