HTML5 实现实时扫描二维码并解析，支持 android 和 ios 平台？

html5

二维码

iOS

解析

13 replies • 2016-07-05 10:55:12 +08:00

pubby

Jul 5, 2016 via Android

1

微信内置浏览器调 js sdk

jacksyen

OP

Jul 5, 2016

2

@pubby 如果是在自己的应用内呢？

XianZaiZhuCe

Jul 5, 2016 via iPhone

3

如果哪位用 html5 实现了，麻烦 @我一下

dcty

Jul 5, 2016

4

@jacksyen 自己的应用不是更简单吗,bridge.

rekulas

Jul 5, 2016

5

html5 怎么可能实现,连摄像头都调不了吧？除非依赖于第三方库差不多比如 React apicloud...之类

sneezry

Jul 5, 2016

3

6

HTML5 解析二维码不是什么难事（ https://github.com/LazarSoft/jsqrcode ），这里难在获取 stream 。如果是用 HTML5 写 APP ，应该会有 stream 相关的 API ，如果是想在浏览器里实现，那么兼容性还很差： http://caniuse.com/#search=stream

移动端的 iOS Safari 目前完全不支持 stream ，所以无法达到“实时”的效果，要么拍照要么选照片。而 Chrome 和安卓浏览器支持得也十分有限，同时还需要在程序中指定前后摄像头（可能，但不确定，有些版本的浏览器只能使用前置摄像头用于 stream API ）。

jacksyen

OP

Jul 5, 2016

7

@rekulas 摄像头是可以调起的，只是不能实时扫描

3dwelcome

Jul 5, 2016

8

有了 emscripten ，凡是 c++能做的算法问题，基本上 js 都可以做到，神器。

learnshare

Jul 5, 2016

9

调起摄像头，拿到图像（可以录制视频并以一定频率截取图像），然后借助 https://github.com/cirocosta/qcode-decoder 之类的解析图像

不过性能肯定是不靠谱的

RosyGame

Jul 5, 2016

10

iOS 之前做过一个项目就有这个需求。纯 HTML5 应该是做不到的。
但是如果在自己应用内的话，我们的做法是:
在 HTML5 的 webview 内监听扫描二维码按钮，用户点击按钮后，之后的一系列调用 iOS 摄像头、扫描以及扫描结果都是 iOS 移动端开发做的，只需要把最后扫描结果调用 js 方法传给 HTML5 就行。

rekulas

Jul 5, 2016

11

@jacksyen 哦不过你要纯 js 来做这个感觉不大可能而且效率估计也是个问题

jacksyen

OP

Jul 5, 2016

12

@Kantoi 这样子的话 ios 和 android 都需要各自开发一套调起摄像头扫描的功能，还是想能不能借助 html5 的第三方库来实现

RosyGame

Jul 5, 2016

13

@jacksyen 嗯能纯 HTML5 那更好啊毕竟通用，我们当时也有你这个想法，但是最后研究发现不可行。具体难点 @sneezry 已经解释很清楚。