1、识别条形码

识别条形码可以使用 quaggaJS 模块来识别,而使用 quaggaJS 接口来识别条形码,有两种方法,一种是识别静态图像文件,另一种是直接在摄像头上实时识别(即不用拍照,摄像头对着条码即可识别)。但是第二种方法必须用到浏览器的 navigator.getUserMedia 接口,而在大多数浏览器中要想访问该接口,域名只能是 localhost 或者使用 HTTPS 协议访问,在本地真机调试时无法达到条件,所以我使用的是第一种方法。不过第一种方法也可分为两种方式,一种是直接获取本地的图片,另一种是可以通过调用 HTML5 的接口来实时拍照,第二种很明显显得更加智能一点。

quaggaJS 的使用可以参考:https://www.npmjs.com/package/quagga

或者GitHub项目上有比较详细的例子:https://github.com/serratus/quaggaJS 项目文件里的 example 文件

1.1、关于 getUserMedia 接口

关于使用 getUserMedia 接口在 quaggaJS 模块上也有介绍:

Important: Accessing getUserMedia requires a secure origin in most browsers, meaning that http:// can only be used on localhost. All other hostnames need to be served via https://

大致意思是:getUserMedia在大多数浏览器中,访问需要安全的来源,这意味着协议只能使用localhost,或者使用https协议。

详情看:https://www.npmjs.com/package/quagga

HTML5如何通过 getUserMedia 调取摄像头可以参考:https://wow.techbrood.com/fiddle/16018