纯web端实现二维码识别

前言

最近公司的业务场景中有个生成二维码和识别二维码的需求。生成二维码之前有做过，选用的 qrcode.js这个前端库,操作比较简单。这里不再赘述。
刚开始看到二维识别这个需求觉得很简单，以为有相应的前端库直接用就行了。但当真正开始写功能时，发现二维识别会涉及到很多其他的功能。废话不再多说，还是来看看如何实现的吧。

实现流程

调用摄像头

通过浏览器调用摄像头在h5中已经有个属性可以兼容大部分平台了。
navigator.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices..mozGetUserMedia;
我们来看下mdn中的介绍：
MediaDevices.getUserMedia()会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。查看详情
也就是说这个属性的返回值中我们可以获取摄像头正在拍摄的视频流动。
获取视频流并显示在video
视频流通过getUserMedia已经可以获取到接下需要把他放到video中：

let option = {width: 1280,height: 720}
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia({video: option}).then(function(stream) {//将视频流实时播放在videoself.$refs.video.srcObject = streamself.$refs.video.style.display = 'block'//截取video内容setTimeout(() => {self.screenShot()}, 2000);}).catch(function(err) {alert(err);});} else if (navigator.getUserMedia) {navigator.getUserMedia({video: true}).then(function(stream) {self.$refs.video.srcObject = streamself.$refs.video.style.display = 'block'setTimeout(() => {self.screenShot()}, 2000);}).catch(function(err) {alert(err);});}

canvas实现截图

当录像正常显示时，我们可以实时的进行截图。b

                let $canvas = $('canvas');let $video = $('video');let test = $('#source');$canvas.attr({width: $video.width(),height: $video.height(),})let ctx = $canvas[0].getContext('2d');ctx.drawImage($video[0], 0, 0, $video.width(), $video.height());let base64 = $canvas[0].toDataURL('images/png');//截图成功对图片进行识别this.decodeQrcode(base64)

图片识别（判断是否是二维码）

使用二维码识别库reqrcode.js,识别截取的视频图片，如果失败则继续截图重新识别


decodeQrcode(base64) {let self = this// $('#screenshot_img').attr('src', base64)qrcode.decode(base64)qrcode.callback = function(imgMsg) {if (!self.visible) {return}if (imgMsg == 'error decoding QR Code') {setTimeout(function() {//截图重新识别self.screenShot()}, 2000)} else {alert(imgMsg)window.location.href = imgMsg}}// }}

获取识别内容

识别成功获取二维码内容

总结

最后二维码功能虽然实现了，但是远远超过我的预估时间，这里原因大部分是因为二维码识别不仅仅需要识别二维码这一功能。在识别前我们需要实现JavaScript调用摄像头功能，canvas截图功能等等一系列问题。所以下次再遇到自己未接触过的需求，就需要有充分的调研，详细的分析的需求的难点。

纯web端实现二维码识别相关推荐

vue项目生成微信支付二维码(web端),其他二维码也可以生成
第一步引入第三方插件: npm install –save qrcodejs2 第二步,在vue页面中引用: <template><h2>微信扫码支付</h2>&l ...
web端微信二维码自定义样式
var content = ".impowerBox .qrcode {width: 50vh;} .impowerBox .title {display: none;}.impowerBo ...
跨端扫码确认实现Web登录(扫二维码登录)
起初的想法是类似于QQ扫码登录,BILIBILI扫码登录一样,通过手机确认后,在web端重定向完成登录通过对BILIBILI扫码功能的解析,自己实现了一套类似扫码登录的功能以下为伪代码,仅供查阅 ...
openmv和stm32串口通信完成二维码识别
openmv和stm32串口通信完成二维码识别文章目录前言一.所用的硬件: 二.openmv端 2.stm32端总结前言注:我只是个大一的小白,本文只完成基本功能,希望能帮助有困惑的人(我 ...
Java 生成二维码 zxing生成二维码条形码服务端生成二维码 Java生成条形码
Java 生成二维码 zxing生成二维码条形码服务端生成二维码 Java生成条形码一.关于ZXing 1.ZXing是谷歌开源的支持二维码.条形码等图形的生成类库:支持生成.和解码功能. G ...
手机二维码识别软件3秒破译火车票信息
近日,有网友通过微博提醒:手机二维码识别软件可轻松识别实名制火车票上的二维码包含的个人身份信息,如随意丢弃火车票,可能造成个人信息的泄露.记者调查发现,二维码识别软件可瞬间破译火车票二维码中乘车时间. ...
opencv调用微信的二维码识别引擎
导读用过二维码识别的小伙伴们都知道,微信的二维码识别确实要比开源的二维码识别zxing和zbar要强不少,zxing和zbar对小的二维码以及模糊的二维码基本上是识别不出来的,有时候一张包含二维码的 ...
android二维码识别原理与测试方法
首先看看二维码识别原理: 一.我们都是使用二维码生成工具制码,原理对于我们意义并不是很大,这里就不浪费地方复制黏贴了.二维码编码原理请google. 二.下面是与本次问题相关的一些经验. 1. ...
微信测试号实现个人第三方PC端网站二维码登录(代码实现篇)
我页面使用了生成二维码的js,是网上拿到的(太多转载,具体作者是啥不知道(#^.^#)) 点击打开生成二维码js链接直接复制js就OK. 好,正文来啦,我代码中是使用了springboot(SSM ...
使用 OpenCV + 微信二维码引擎实现二维码识别
Part1背景今年自疫情以来,我都没有写过文章.一方面是疫情导致居家办公比较烦躁,另一方面最近有点懒了.但是工作还是要继续,趁这几天优化了一下最近的项目,我整理了一下如何使用 OpenCV 和微信二 ...

纯web端实现二维码识别

前言

实现流程

总结

纯web端实现二维码识别相关推荐

最新文章

热门文章