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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3062 天前的主题，其中的信息可能已经有所发展或是发生改变。

html5 能否实现呢？

html5

二维码

iOS

解析

13 条回复 • 2016-07-05 10:55:12 +08:00

pubby

2016-07-05 09:09:56 +08:00 via Android

微信内置浏览器调 js sdk

jacksyen

2016-07-05 09:12:12 +08:00

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

XianZaiZhuCe

2016-07-05 09:18:08 +08:00 via iPhone

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

dcty

2016-07-05 09:57:41 +08:00

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

rekulas

2016-07-05 10:03:33 +08:00

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

sneezry

2016-07-05 10:06:55 +08:00

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

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

jacksyen

2016-07-05 10:09:59 +08:00

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

3dwelcome

2016-07-05 10:12:17 +08:00

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

learnshare

2016-07-05 10:17:38 +08:00

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

不过性能肯定是不靠谱的

Kantoi

2016-07-05 10:29:58 +08:00

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

rekulas

2016-07-05 10:30:15 +08:00

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

jacksyen

2016-07-05 10:44:17 +08:00

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

Kantoi

2016-07-05 10:55:12 +08:00

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