iOS | H5直接调用手机的摄像头进行拍照或录像

最近公司做的一个H5项目，有个需求，就是要点击某个div，直接唤起手机的拍照或者录像功能。

这里需要注意的点是：
下面的方法在安卓手机上测试是可以的（只测试了华为手机华为P10plus、华为 P7-L09、华为Mate10）。
但是在苹果手机上，需要分iOS系统，在iOS10及以上系统，使用input的属性capture='camera'，可以直接访问手机的相机功能，而在iOS9及以下系统，使用input的属性capture='camera'，会从底部弹出actionSheet，让用户去选择是拍照，还是选择去相册选择。（测试了 iPhone 6 iOS 9.3， iPhone 6s iOS 10.3， iPhone 6Plus iOS 11.1， iPhone 6 iOS 11.2）

代码如下：
代码中引用了 JQuery 方法，所以 JQuery 的js文件自己添加一下。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <!-- 使页面适配手机屏幕 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title></title>
        <!-- 引入JQuery的JS文件 -->
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    </head>

    <body>
        <!-- 这里是通过点击某个Div来隐式创建一个 input 控件，然后实现直接访问相机的功能。-->
        <div id="demoForClick">
            <div id="btnID">这里是直接获取iOS相机功能</div>
        </div>
        <!-- 换行 -->
        <br/><br/><br/>
        <div>
            <!-- 直接访问相机功能进行拍照 -->
            <label>照相机</label>
            <input type="file" id='image' accept="image/*" capture='camera'>
        </div>
        <!-- 换行 -->
        <br/><br/><br/>
        <div>
            <!-- 直接唤起摄像头进行录像 -->
            <label>摄像机</label>
            <input type="file" id='video' accept="video/*" capture='camcorder'>
        </div>
        <!-- 换行 -->
        <br/><br/><br/>
        <script>
            // 隐式创建一个input控件，然后实现直接访问相册
            var inputUploadObj = '';
            $("#btnID").on("click", function() {
                inputUploadObj = document.createElement('input')
                inputUploadObj.setAttribute('id', 'input_upload_ID');
                inputUploadObj.setAttribute('type', 'file');
                // 添加这个属性，就可以唤起相机的功能
                inputUploadObj.setAttribute('capture', 'camera');
                // 这里如果不加属性 accept 是 "image/*" 或者 "video/*"，就默认打开摄像头，既可以拍照也可以录像
                inputUploadObj.setAttribute('accept', 'image/*');
                inputUploadObj.setAttribute("style", 'visibility:hidden');
                // 这里将创建的隐式input控件拼接到body的最后面，会增加页面的长度，所以要在适当的时候，移除掉这个隐式创建的input控件
                document.body.appendChild(inputUploadObj);
                // 这里是模拟点击了input控件
                inputUploadObj.click();
            });
        </script>
    </body>
</html>

效果图如下：

下面三张图为安卓的效果图：

Android_001.png

Android_002.jpg

Android_003.jpg

下面三张图为苹果手机 iPhone 6 iOS 9.3 的效果图：

iOS_09_001.jpg

iOS_09_002.jpg

iOS_09_003.jpg

下面三张图为苹果手机 iPhone 6Plus iOS 11.2 的效果图：

iOS_10_11_001.jpg

iOS_10_11_002.jpg

iOS_10_11_003.jpg

iOS | H5直接调用手机的摄像头进行拍照或录像

推荐阅读更多精彩内容