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