最近公司做的一个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文件自己添加一下。

// 隐式创建一个input控件，然后实现直接访问相册

【【微信】】 = '';

$("#btnID").on("click", function() {

inputUploadObj = document.createElement('input')

inputUploadObj.setAttribute('id', 'input_upload_ID');

inputUploadObj.setAttribute('type', 'file');

// 添加这个属性，就可以唤起相机的功能

inputUploadObj.setAttribute('capture', 'camera');

// 这里如果不加属性 【【微信】】 是 "image/*" 或者 "video/*"，就默认打开摄像头，既可以拍照也可以录像

inputUploadObj.setAttribute('【【微信】】', 'image/*');

inputUploadObj.setAttribute("style", '【【微信】】:hidden');

// 这里将创建的隐式input控件拼接到body的最后面，会增加页面的长度，所以要在适当的时候，移除掉这个隐式创建的input控件

document.body.appendChild(inputUploadObj);

// 这里是模拟点击了input控件

inputUploadObj.click();

});

效果图如下：

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

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

OPPO K11x 5G手机亮相参数 OPPO K11x 5G手机正面

京公网安备11010602100083  | 电信与信息服务业务经营许可证：京ICP证160379号  | 京ICP备12048526号-2

营业性演出许可证 京演（机构）[2020]4453号 | 互联网药品信息服务资格证书 (京)-非经营性-2022-0049 | 营业执照 

广播电视节目制作经营许可证（京）字第07726号 | 北京市诚信创建企业

违法和不良信息举报/涉未成年人及举报电话：【【手机】】-9 | 违法和不良信息举报邮箱：【【邮箱】】 

? copyright 2010-2022 值得买科技. All rights reserved. 版权所有 本站内容未经书面许可,禁止一切形式的转载。