您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

H5 实现二维码 / 条形码的识别与解析

时间:2020-10-20 10:44:31  来源:  作者:

本文主要讲述的是采用浏览器来识别二维码 / 条形码等,并对其解析得到相应的结果。还有一个目的就是为了验证 iphone 是否无法自动开启摄像头进行扫描。需求也非常简单,就是用 Web 浏览器实现二维码的扫描及解析,我做了个简单的 Demo 放在 Github 上面,可以体验一下,若用得上,可下载源码试试。

H5 实现二维码 / 条形码的识别与解析

Safari 扫描二维码及解析结果

Vue3 + Vite + Ant-Design-Vue + ZXing,该 Demo 主要的技术及其相应的依赖。对于 Vue3 + Vite 项目的构建,可以自行查看官网教程,至于 Ant-Design-Vue 和 ZXing-JS,需要注意的是 Ant-Design-Vue 的安装记得加个 @next 版本,其它无异。

# 构建项目后运行
npm init vite-App miitvip-scan-demo
cd miitvip-scan-demo
npm install
npm run dev

# 安装依赖
npm i ant-design-vue@next --save
npm i @zxing/library --save

Template

video 标签用于显示摄像头内容

<template>
	<video class="video" id="video" ref="video" autoplay></video>
</template>
H5 实现二维码 / 条形码的识别与解析

Safari 提示网站需要获取相机权限

OpenCamera

拉起摄像头,若获取不到媒体设备的列表,则简单的抛出个错误提示。

async openCamera() {
  this.$message.success({
    content: '正在尝试拉起摄像头 ...',
    duration: 0
  })
  if (!navigator.mediaDevices) {
    this.$message.destroy()
    this.iphone = true
    this.$message.success({
      content: 'iPhone 其它浏览器无权限自动开启摄像头 ...',
      duration: 0
    })
  } else {
    this.reader.listVideoInputDevices().then((devices) => {
      this.decode(devices[0].deviceId)
    }).catch((err) => {
      this.errMsg = err
      this.$message.destroy()
      this.$message.error({
        content: err,
        duration: 0
      })
    })
  }
}
H5 实现二维码 / 条形码的识别与解析

拉起摄像头,进入扫描状态

Decode

decode 解析内容,这里采用的是单次解析,即扫描成功后需要重新刷新一下页面方可再次进行识别操作,若要多次扫描,可用 decodeFromInputVideoDeviceContinuously 方法去识别。

decode(id: any) {
  this.reader.reset()
  this.$message.destroy()
  this.$message.success({
    content: '正在尝试识别,请对准摄像头 ...',
    duration: 0
  })
  this.reader.decodeOnceFromVideoDevice(id, 'video').then((res) => {
    this.$message.destroy()
    this.content = res.text
    this.time = new Date(res.timestamp)
    this.modalVisible = true
  }).catch((err) => {
    this.$message.destroy()
    this.$message.error({
      content: '识别失败,请刷新后再次尝试 ...',
      duration: 0
    })
    this.errMsg = err
  })
}
H5 实现二维码 / 条形码的识别与解析

非 Safari 浏览器无权自动拉起相机 - iPhone

总结

https://github.com/lirongtong/miitvip-scan-demo

https://scan.makeit.vip/

最后的结果就是:iPhone 中,除了自带的 Safari 浏览器外,其它任何的浏览器,都无法自动拉起相机,没有这个权限,但是我们可以采用折中的方式,即用拍照的形式来进行识别,可以用如下的代码语句来拉起摄像头,拍照后识别照片内容,我在 Demo 上也做了,但是识别的效果却是不如摄像头实时扫描的好,正确率很低,常常识别失败(上述两个地址分别为 Github 与 Demo 地址)。

<input class="file" type="file" ref="camera" capture="camera" accept="image/*" @change="change" />
H5 实现二维码 / 条形码的识别与解析

拍照的也能识别,但正确率比较低



Tags:二维码   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
日前,中国人民银行发布的《中国人民银行关于加强支付受理终端及相关业务管理的通知》火了,网上有消息称“微信、支付宝收款码不能再用于经营收款”,近日,记者从央行相关部门获悉...【详细内容】
2021-12-08  Tags: 二维码  点击:(14)  评论:(0)  加入收藏
当下,已 几乎涵盖了大部分支付场景。然而,有时候大意地扫错了二维码,转钱给了陌生人,应当如何救济?案情回顾2021年年初,市民王某前往某贷款公司,想要偿还此前在公司平台上所欠的600...【详细内容】
2021-11-01  Tags: 二维码  点击:(76)  评论:(0)  加入收藏
现如今二维码广泛应用,已经成为了生活中不可或缺的东西;所以我们日常的开发中,也少不了对二维码的生成或者解析。此文讲述一下使用C# 生成和解析二维码 实现功能:将字符串生成二...【详细内容】
2021-10-21  Tags: 二维码  点击:(58)  评论:(0)  加入收藏
随着地摊经济的兴起,很多朋友利用业余时间开始摆摊赚外快,但因为是移动支付的时代,需要摊主频繁地出示收款二维码,特别的不方便,而国内支付领域90%的市场被微信和支付宝垄断了,本...【详细内容】
2021-09-22  Tags: 二维码  点击:(417)  评论:(0)  加入收藏
移动支付快速发展的今天,现金支付反而变得略显另类。对于店家的您来说,收银台上没有放置微信、支付宝收款二维码,这是对顾客最大的不尊重,甚至会间接影响到您的收入。有的用户习...【详细内容】
2021-08-20  Tags: 二维码  点击:(103)  评论:(0)  加入收藏
微信为保证用户体验以及防止乱加好友情况的出现,用户在拉取群二维码时都会自动设定一个识别有效期,每个微信群二维码有效期的时间是7天。与此同时还有扫码入群200人数限制。微...【详细内容】
2021-08-04  Tags: 二维码  点击:(93)  评论:(0)  加入收藏
二维码改变了21世纪人类的面貌。人类通过二维码实现移动支付,二维码俨然已经成为了人类进入互联网时代的窗口。人类已经对二维码产生了依赖,全球范围内每天被扫掉的二维码,比人...【详细内容】
2021-04-20  Tags: 二维码  点击:(159)  评论:(0)  加入收藏
微信公众号渠道二维码是为了满足用户渠道推广分析和用户帐号绑定等场景的需要,公众平台提供了生成带参数二维码的接口。商家可以通过微渠道生成多个带参数的二维码,每一个二维...【详细内容】
2021-02-03  Tags: 二维码  点击:(159)  评论:(0)  加入收藏
说到移动支付,相信大家都会想到支付宝和微信支付,因为两者是目前主流的移动支付方式,大街小巷都有它们的踪影。在支付宝和微信支付的带领下,促使我国移动支付普及率已经达到了7...【详细内容】
2021-02-02  Tags: 二维码  点击:(112)  评论:(0)  加入收藏
二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据...【详细内容】
2021-01-19  Tags: 二维码  点击:(197)  评论:(0)  加入收藏
▌简易百科推荐
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  鳌拜的表哥熬夜    Tags:HTML5   点击:(343)  评论:(0)  加入收藏
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  趣谈前端    Tags:H5编辑器   点击:(90)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18      Tags:H5   点击:(228)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19      Tags:HTML5   点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20      Tags:HTML5   点击:(179)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29      Tags:H5应用   点击:(165)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24      Tags:XGPlayer   点击:(199)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12      Tags:H5DS   点击:(393)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12      Tags:HTML5   点击:(113)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10      Tags:app开发   点击:(109)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条