H5移動端呼叫相機/相簿
阿新 • • 發佈:2019-02-06
使用html5自帶的 input ,純html5,並且不涉及到js ,可以實現移動端呼叫手機攝像頭。
capture表示,可以捕獲到系統預設的裝置,比如:camera照相機;camcorder攝像機;microphone錄音。accept表示,直接開啟系統檔案目錄。
<label>照相機</label>
<input type="file" id='image' accept="image/*" capture='camera'>
<br>
<label>攝像機</label>
<input type="file" id='video' accept="video/*" capture='camcorder'>
其實html5的input:file標籤還支援一個multiple屬性,表示可以支援多選
<input type="file" id="file" multiple>
在各個機型都可以點選 file 呼叫相簿 和 攝像頭拍照
1. 在老版本的安卓中,必須加上capture,否則只能呼叫相簿
2. 在IOS中 加了capture,就只能呼叫攝像頭不能呼叫相簿
解決辦法:
判斷ios,如果是ios就去掉capture屬性.
var file = document.querySelector('input');
if (getIos()) {
file.removeAttribute("capture");
}
function getIos() {
var ua=navigator.userAgent.toLowerCase();
if (ua.match(/iPhone\sOS/i) == "iphone os") {
return true ;
} else {
return false;
}
}