一、背景介紹

　　前段時間做了個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端掃描二維碼