前端實(shí)現(xiàn)識(shí)別條形碼
1、識(shí)別條形碼
識(shí)別條形碼可以使用 quaggaJS 模塊來(lái)識(shí)別,而使用 quaggaJS 接口來(lái)識(shí)別條形碼,有兩種方法,一種是識(shí)別靜態(tài)圖像文件,另一種是直接在攝像頭上實(shí)時(shí)識(shí)別(即不用拍照,攝像頭對(duì)著條碼即可識(shí)別)。但是第二種方法必須用到瀏覽器的 navigator.getUserMedia 接口,而在大多數(shù)瀏覽器中要想訪問(wèn)該接口,域名只能是 localhost 或者使用 HTTPS 協(xié)議訪問(wèn),在本地真機(jī)調(diào)試時(shí)無(wú)法達(dá)到條件,所以我使用的是第一種方法。不過(guò)第一種方法也可分為兩種方式,一種是直接獲取本地的圖片,另一種是可以通過(guò)調(diào)用 HTML5 的接口來(lái)實(shí)時(shí)拍照,第二種很明顯顯得更加智能一點(diǎn)。
quaggaJS 的使用可以參考:https://www.npmjs.com/package/quagga,
或者GitHub項(xiàng)目上有比較詳細(xì)的例子:https://github.com/serratus/quaggaJS 項(xiàng)目文件里的 example 文件夾下有示例文件,簡(jiǎn)單的使用本地圖片上傳示例參考博客:http://www.rzrgm.cn/yaotome/p/9450274.html
如何通過(guò) HTML5 的接口調(diào)用攝像頭拍照上傳圖片,參考:http://www.rzrgm.cn/avon/p/5996368.html
1.1、關(guān)于 getUserMedia 接口
關(guān)于使用 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在大多數(shù)瀏覽器中,訪問(wèn)需要安全的來(lái)源,這意味著協(xié)議只能使用localhost,或者使用https協(xié)議。
詳情看:https://www.npmjs.com/package/quagga
HTML5如何通過(guò) getUserMedia 調(diào)取攝像頭可以參考:https://wow.techbrood.com/fiddle/16018

浙公網(wǎng)安備 33010602011771號(hào)