H5端掃描二維碼
一、背景介紹
前段時間做了個H5的webapp項目,由於目前所在的公司是做WMS、OMS、TMS相關的物流行業,昨天項目經理提了個需求:能否實現二維碼掃描功能。
實現這個功能項目的價格可以加5萬以上,所以項目經理很急切也很激進,迫切需要知道是否有技術可行,然後就輪到我來研究可行性,這就像建造一座橋梁時遇到技術難題一樣的,首先要考慮有沒有這樣技術的,再來考慮可行性。
H5端掃描二維碼要解決兩個問題:一是喚起攝像頭掃描,二是掃描完成後解析。H5端掃描還存在一個問題,是用靜態掃描還是實時掃描,靜態就是圖片,動態就是直接開攝像頭。
二、研究過程
(1)H5喚起攝像頭掃描
①MediaDevices.getUserMedia()
------------------------------------------------------API-------------------------------------------------------
MediaDevices.getUserMedia的mozilla網站API,網址:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
------------------------------------------------------兼容性問題-------------------------------------------------------
----------------------------------------------------結論---------------------------------------------------
兼容性不夠好,不適宜在生產環境中使用(待編碼驗證)
②navigator.getUserMedia()
-----------------------------------------------------API----------------------------------------------------
navigator.getUserMedia的mozilla網站API,網址:https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/getUserMedia
----------------------------------------------兼容性問題----------------------------------------
------------------------------------------------------結論----------------------------------------------------
兼容性不夠好,不適宜在生產環境中使用(待編碼驗證)
③input type=‘file‘
<!--調用手機拍照--> <input type="file" id="file" accept="image/*" capture="camera" /> <!--調用手機攝像頭--> <input type="file" id="file" accept="video/*" capture="camcorder" /> <!--調用錄用功能--> <input type="file" id="file" accept="audio/*" capture="microphone" />
用安卓手機測試兼容性問題,在QQ瀏覽器、UC瀏覽器和chrome瀏覽器上都可以正常調用手機拍照功能。(博主用的小米Note1,蘋果手機需進一步測試)
(2)掃描完成二維碼解析
H5端掃描二維碼