HTML5如何在手機端呼叫相機？-html教學-PHP中文網

首頁

web前端

html教學

HTML5如何在手機端呼叫相機？

Guanhui

Jun 23, 2020 pm 06:07 PM

html5 手機端

HTML5如何在手機端呼叫相機？

input呼叫裝置錄影
HTML5官方文件解釋：capture屬性用於呼叫裝置的相機或麥克風。
當accept=”audio/或video/”時capture只有兩種值，一種是user，用於調用面向人臉的攝像頭(例如手機前置攝像頭)，一種是environment，用於調用環境相機(例如手機後置相機)。
當accept=”audio」時，只要有capture就呼叫裝置麥克風，忽略user和environment值。
至於網路上提到的camera和filesystem，官方沒提。
官方文件：www.w3.org/TR/2018/REC-html-media-capture-20180201/

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(&#39;input&#39;);
        if (getIos()) {
            file.removeAttribute("capture"); //如果是ios设备就删除"capture"属性
        }
        function getIos() {
            var ua=navigator.userAgent.toLowerCase();
            if (ua.match(/iPhone\sOS/i) == "iphone os") {
                return true;
            } else {
                return false;
            }
        }
</script>

登入後複製

推薦教學：《HTML教學》

以上是HTML5如何在手機端呼叫相機？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn