1. 程式人生 > >H5移動端呼叫相機/相簿

H5移動端呼叫相機/相簿

使用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; } }