折腾前端条形码(Barcode)扫描识别, 笔记

@zxing/library 方案(不推荐)

本地勉强把 Demo 在 React 里面跑通, 但是不好控制开始结束, API 不明确.
实际识别率很低. 我是用手机屏幕放的条形码, 大概也有影响.

https://github.com/aleris/zxi...
https://github.com/zxing-js/l...
https://github.com/zxing-js/l...

Quagga2 方案(推荐)

• QuaggaJS

应该是 GitHub 上星星最多的, 但是没有人维护了.

https://serratus.github.io/qu...

• Quagga2

fork 版本的 QuaggaJS. 一直有更新, 但是没有维护全部的细节, 我在运行 examples 遇到了问题.

初步认为是传入到 Worker 里面执行的代码不完整. 没有把 Quagga 的源码提前传送过去.
后面作者先把 worker 功能关掉了.. 至少界面不报错了.

有一个用了旧版本的 React 组件的 demo https://github.com/ericblade/...

自己封装了一个版本
https://github.com/jimengio/q...

Barcode Detector 方案(兼容性问题)

Google 提供的方案, 内置 API, 但是只有 Chrome 支持, 而且手动测试发现需要 80 版本.

https://web.dev/shape-detection/
https://wicg.github.io/shape-...

这个方案不完整, 需要添加 API, 手动处理前面抓取图片的部分, API 已经比较完善的,

https://developers.google.com...
https://medium.com/@immanubha...

整理了一个 Demo
https://github.com/jimengio/j...

zbar + WebAssembly 方案(继续调研)

https://barkeywolf.consulting...
https://github.com/jjhbw/barc...

这个方案同时能识别条形码跟 QR Code, 这一点比较好.

https://barkeywolf.consulting...

不过 issue 里的问题似乎文章作者也没给修掉, 是否在维护也要考虑.

https://github.com/jjhbw/barc...

按着教程试了一下, 需要 docker 里跑 C 编译. 距离打包到 Webpack 里用还有距离.

其他

暂时先 Quagga2 吧. C 比较陌生, 要不然应该试一下 zbar 的, 远期看需要.

---

关于积梦前端的模块和工具可以查看我们的 GitHub 主页 https://github.com/jimengio .
招聘的计划和条件也在 GitHub 上有给出 https://github.com/jimengio/h... .