H5移动端调用相机/相册

来源:互联网 发布:java gc机制 编辑:程序博客网 时间:2024/06/05 00:56

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