iOS | H5直接调用手机的摄像头进行拍照或录像
2018-09-20 本文已影响1513人
Rickie_Lambert
最近公司做的一个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
