前端實現識別條形碼

 

一、識別條形碼

識別條形碼能夠使用 quaggaJS 模塊來識別，而使用 quaggaJS 接口來識別條形碼，有兩種方法，一種是識別靜態圖像文件，另外一種是直接在攝像頭上實時識別（即不用拍照，攝像頭對着條碼便可識別）。可是第二種方法必須用到瀏覽器的 navigator.getUserMedia 接口，而在大多數瀏覽器中要想訪問該接口，域名只能是 localhost 或者使用 HTTPS 協議訪問，在本地真機調試時沒法達到條件，因此我使用的是第一種方法。不過第一種方法也可分爲兩種方式，一種是直接獲取本地的圖片，另外一種是能夠經過調用 HTML5 的接口來實時拍照，第二種很明顯顯得更加智能一點。

quaggaJS 的使用能夠參考：https://www.npmjs.com/package/quagga，

或者GitHub項目上有比較詳細的例子：https://github.com/serratus/quaggaJS 項目文件裏的 example 文件夾下有示例文件，簡單的使用本地圖片上傳示例參考博客：http://www.javashuo.com/article/p-qrllhdmw-dc.html

如何經過 HTML5 的接口調用攝像頭拍照上傳圖片，參考：http://www.javashuo.com/article/p-ekakplbm-cw.html

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，