H5移动端调用相机/相册/录制

最新推荐文章于 2022-02-17 16:54:16 发布

转载最新推荐文章于 2022-02-17 16:54:16 发布 · 878 阅读

js 专栏收录该内容

54 篇文章

订阅专栏

本文介绍如何使用HTML5的input标签实现移动端调用手机摄像头功能，包括不同设备的兼容性处理，如在iOS和Android上的差异及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1
在各个机型都可以点击 file 调用相册和摄像头拍照

在老版本的安卓中，必须加上capture，否则只能调用相册
在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;
        }
    }

原文：https://blog.youkuaiyun.com/github_38516987/article/details/77988182