input調(diào)用設(shè)備錄像,相機(jī)等…
HTML5官方文檔解釋:capture屬性用于調(diào)用設(shè)備的攝像頭或麥克風(fēng)。
當(dāng)accept=”audio/或video/”時(shí)capture只有兩種值,一種是user,用于調(diào)用面向人臉的攝像頭(例如手機(jī)前置攝像頭),一種是environment,用于調(diào)用環(huán)境攝像頭(例如手機(jī)后置攝像頭)。
當(dāng)accept=”audio”時(shí),只要有capture就調(diào)用設(shè)備麥克風(fēng),忽略u(píng)ser和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)該按照如下開(kāi)發(fā)webview:
1.當(dāng)accept=”image/”時(shí),capture=”user”調(diào)用前置照相機(jī),capture=”其他值”,調(diào)用后置照相機(jī)
2. 當(dāng)accept=”video/”時(shí),capture=”user”調(diào)用前置錄像機(jī),capture=”其他值”,調(diào)用后置錄像機(jī)
3. 當(dāng)accept=”image/,video/”,capture=”user”調(diào)用前置攝像頭,capture=”其他值”,調(diào)用后置攝像頭,默認(rèn)照相,可切換錄像
4. 當(dāng)accept=”audio/*”時(shí),capture=”放空或者任意值”,調(diào)用錄音機(jī)
5. 當(dāng)input沒(méi)有capture時(shí),根據(jù)accppt類型給出文件夾選項(xiàng)以及攝像頭或者錄音機(jī)選項(xiàng)
6. input含有multiple時(shí)訪問(wèn)文件夾可勾選多文件,調(diào)用系統(tǒng)攝像頭或者錄音機(jī)都只是單文件
7. 無(wú)multiple時(shí)都只能單文件
判斷設(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(/iPhone\sOS/i) == "iphone os") {
return true;
} else {
return false;
}
}
</script>
到此這篇關(guān)于Html5在手機(jī)端調(diào)用相機(jī)的方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Html5手機(jī)端調(diào)用相機(jī)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!