這篇文章主要介紹了Html5在手機端調用相機的方法實現，文中通過示例代碼介紹的非常詳細，對大家的網頁設計具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
input調用設備錄像，相機等…
HTML5官方文檔解釋：capture屬性用于調用設備的攝像頭或麥克風。
當accept=”audio/或video/”時capture只有兩種值，一種是user，用于調用面向人臉的攝像頭(例如手機前置攝像頭)，一種是environment，用于調用環境攝像頭(例如手機后置攝像頭)。
當accept=”audio”時，只要有capture就調用設備麥克風，忽略user和environment值。
至于網上提到的camera和filesystem，官方沒提。
iOS最遵守遵守HTML5規范，其次是X5內核，安卓的webview基本忽略了capture。
理想情況下應該按照如下開發webview：
1.當accept=”image/”時，capture=”user”調用前置照相機，capture=”其他值”，調用后置照相機
2. 當accept=”video/”時，capture=”user”調用前置錄像機，capture=”其他值”，調用后置錄像機
3. 當accept=”image/,video/”，capture=”user”調用前置攝像頭，capture=”其他值”，調用后置攝像頭，默認照相，可切換錄像
4. 當accept=”audio/*”時，capture=”放空或者任意值”，調用錄音機
5. 當input沒有capture時，根據accppt類型給出文件夾選項以及攝像頭或者錄音機選項
6. input含有multiple時訪問文件夾可勾選多文件，調用系統攝像頭或者錄音機都只是單文件
7. 無multiple時都只能單文件
判斷設備類型
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設備就刪除"capture"屬性
? ? ? ? }
? ? ? ? function getIos() {
? ? ? ? ? ? var ua=navigator.userAgent.toLowerCase();
? ? ? ? ? ? if (ua.match(/iPhonesOS/i) == "iphone os") {
? ? ? ? ? ? ? ? return true;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? }
? ? ? ? }
</script>
到此這篇關于Html5在手機端調用相機的方法實現的文章就介紹到這了
