站長資訊網(wǎng)
input調(diào)用設(shè)備錄像
HTML5官方文檔解釋：capture屬性用于調(diào)用設(shè)備的攝像頭或麥克風(fēng)。
當(dāng)accept=”audio/或video/”時capture只有兩種值，一種是user，用于調(diào)用面向人臉的攝像頭(例如手機前置攝像頭)，一種是environment，用于調(diào)用環(huán)境攝像頭(例如手機后置攝像頭)。
當(dāng)accept=”audio”時，只要有capture就調(diào)用設(shè)備麥克風(fēng)，忽略user和environment值。
至于網(wǎng)上提到的camera和filesystem，官方?jīng)]提。
官方文檔：www.w3.org/TR/2018/REC-html-media-capture-20180201/
iOS最遵守遵守HTML5規(guī)范，其次是X5內(nèi)核，安卓的webview基本忽略了capture。
理想情況下應(yīng)該按照如下開發(fā)webview：
1.當(dāng)accept=”image/”時，capture=”user”調(diào)用前置照相機，capture=”其他值”，調(diào)用后置照相機
2. 當(dāng)accept=”video/”時，capture=”user”調(diào)用前置錄像機，capture=”其他值”，調(diào)用后置錄像機
3. 當(dāng)accept=”image/,video/”，capture=”user”調(diào)用前置攝像頭，capture=”其他值”，調(diào)用后置攝像頭，默認(rèn)照相，可切換錄像
4. 當(dāng)accept=”audio/*”時，capture=”放空或者任意值”，調(diào)用錄音機
5. 當(dāng)input沒有capture時，根據(jù)accppt類型給出文件夾選項以及攝像頭或者錄音機選項
6. input含有multiple時訪問文件夾可勾選多文件，調(diào)用系統(tǒng)攝像頭或者錄音機都只是單文件
7. 無multiple時都只能單文件
判斷設(shè)備類型
var ua = navigator.userAgent.toLowerCase(); if(ua.match(/android/i)) == "android") { alert("android"); } if(ua.match(/iPhone/i)) == "iPhone") { alert("iPhone"); } if(ua.match(/iPad/i)) == "iPad") { alert("iPad"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="file" accept="image/*" capture="camera"> <input type="file" accept="video/*" capture="camcorder"> <input type="file" accept="audio/*" capture="microphone"> </body> </html> <script> var file = document.querySelector('input'); if (getIos()) { file.removeAttribute("capture"); //如果是ios設(shè)備就刪除"capture"屬性 } function getIos() { var ua=navigator.userAgent.toLowerCase(); if (ua.match(/iPhonesOS/i) == "iphone os") { return true; } else { return false; } } </script>
推薦教程：《HTML教程》
