求教H5识别二维码比较成熟的方案

Question

需求是不借助微信或者其他app，纯H5调用手机摄像头来识别二维码。

大佬们有好的方案吗？我看有借助插件的，还有video播放，然后chanvas画的但是好像挺卡的

Answer 1

之前正好做过，简单讲下做法。

1. 调用 mediaDevices.getUserMedia 接口调用用户摄像头
2. 把返回的 stream attach 到一个 video 元素上播放出来
3. 创建一个隐藏的 canvas 然后用 drawImage 定时把视频画面画到这个 canvas 上
4. 把 canvas 数据交给识别二维码的库去识别

以上许多步骤可以省略，比如说直接找一个第三方识别二维码库，比如 https://github.com/nimiq/qr-s...，可以帮你解决很多问题。

性能问题没怎么遇到，播放个视频对大部分机型还是ok的，把视频数据画到 canvas 上也还好，然后识别这块可能稍微复杂点，一般找第三方库处理，有些会用到 Web Worker 提高性能，总的来说可以接受，体验也不错~

做的时候要注意下兼容性，mediaDevices.getUserMedia 需要 Chrome 53+ / iOS 11+。

Answer 2

我一直用的是这个html5-qrcode
在线例子