識別條形碼能夠使用 quaggaJS 模塊來識別,而使用 quaggaJS 接口來識別條形碼,有兩種方法,一種是識別靜態圖像文件,另外一種是直接在攝像頭上實時識別(即不用拍照,攝像頭對着條碼便可識別)。可是第二種方法必須用到瀏覽器的 navigator.getUserMedia 接口,而在大多數瀏覽器中要想訪問該接口,域名只能是 localhost 或者使用 HTTPS 協議訪問,在本地真機調試時沒法達到條件,因此我使用的是第一種方法。不過第一種方法也可分爲兩種方式,一種是直接獲取本地的圖片,另外一種是能夠經過調用 HTML5 的接口來實時拍照,第二種很明顯顯得更加智能一點。html
quaggaJS 的使用能夠參考:https://www.npmjs.com/package/quagga,git
或者GitHub項目上有比較詳細的例子:https://github.com/serratus/quaggaJS 項目文件裏的 example 文件夾下有示例文件,簡單的使用本地圖片上傳示例參考博客:http://www.javashuo.com/article/p-qrllhdmw-dc.htmlgithub
如何經過 HTML5 的接口調用攝像頭拍照上傳圖片,參考:http://www.javashuo.com/article/p-ekakplbm-cw.htmlnpm
關於使用 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協議
ui
詳情看:https://www.npmjs.com/package/quagga調試
HTML5如何經過 getUserMedia 調取攝像頭能夠參考:https://wow.techbrood.com/fiddle/16018,code