前端实现识别条形码

wenxuehai 2021-09-04 原文

1、识别条形码

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

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

或者GitHub项目上有比较详细的例子：https://github.com/serratus/quaggaJS 项目文件里的 example 文件夹下有示例文件，简单的使用本地图片上传示例参考博客：https://www.cnblogs.com/yaotome/p/9450274.html

如何通过 HTML5 的接口调用摄像头拍照上传图片，参考：https://www.cnblogs.com/avon/p/5996368.html

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