最近公司做的一個(gè)H5項(xiàng)目，有個(gè)需求殖熟，就是要點(diǎn)擊某個(gè)div牵寺，直接喚起手機(jī)的拍照或者錄像功能。
這里需要注意的點(diǎn)是：
下面的方法在安卓手機(jī)上測(cè)試是可以的（只測(cè)試了華為手機(jī) 華為P10plus家肯、華為 P7-L09、華為Mate10）盟猖。
但是在蘋(píng)果手機(jī)上讨衣，需要分iOS系統(tǒng)，在iOS10及以上系統(tǒng)扒披，使用input的屬性capture='camera'值依，可以直接訪問(wèn)手機(jī)的相機(jī)功能，而在iOS9及以下系統(tǒng)碟案，使用input的屬性capture='camera'愿险，會(huì)從底部彈出actionSheet，讓用戶去選擇是拍照价说，還是選擇去相冊(cè)選擇辆亏。（測(cè)試了 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">
<!-- 使頁(yè)面適配手機(jī)屏幕 -->
<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>
<!-- 這里是通過(guò)點(diǎn)擊某個(gè)Div來(lái)隱式創(chuàng)建一個(gè) input 控件彻磁，然后實(shí)現(xiàn)直接訪問(wèn)相機(jī)的功能碍沐。-->
<div id="demoForClick">
<div id="btnID">這里是直接獲取iOS相機(jī)功能</div>
</div>
<!-- 換行 -->
<br/><br/><br/>
<div>
<!-- 直接訪問(wèn)相機(jī)功能進(jìn)行拍照 -->
<label>照相機(jī)</label>
<input type="file" id='image' accept="image/*" capture='camera'>
</div>
<!-- 換行 -->
<br/><br/><br/>
<div>
<!-- 直接喚起攝像頭進(jìn)行錄像 -->
<label>攝像機(jī)</label>
<input type="file" id='video' accept="video/*" capture='camcorder'>
</div>
<!-- 換行 -->
<br/><br/><br/>
<script>
// 隱式創(chuàng)建一個(gè)input控件，然后實(shí)現(xiàn)直接訪問(wèn)相冊(cè)
var inputUploadObj = '';
$("#btnID").on("click", function() {
inputUploadObj = document.createElement('input')
inputUploadObj.setAttribute('id', 'input_upload_ID');
inputUploadObj.setAttribute('type', 'file');
// 添加這個(gè)屬性衷蜓，就可以喚起相機(jī)的功能
inputUploadObj.setAttribute('capture', 'camera');
// 這里如果不加屬性 accept 是 "image/*" 或者 "video/*"累提，就默認(rèn)打開(kāi)攝像頭，既可以拍照也可以錄像
inputUploadObj.setAttribute('accept', 'image/*');
inputUploadObj.setAttribute("style", 'visibility:hidden');
// 這里將創(chuàng)建的隱式input控件拼接到body的最后面磁浇，會(huì)增加頁(yè)面的長(zhǎng)度斋陪，所以要在適當(dāng)?shù)臅r(shí)候，移除掉這個(gè)隱式創(chuàng)建的input控件
document.body.appendChild(inputUploadObj);
// 這里是模擬點(diǎn)擊了input控件
inputUploadObj.click();
});
</script>
</body>
</html>
效果圖如下：
下面三張圖為安卓的效果圖：
Android_001.png
Android_002.jpg
Android_003.jpg
下面三張圖為蘋(píng)果手機(jī) iPhone 6 iOS 9.3 的效果圖：
iOS_09_001.jpg
iOS_09_002.jpg
iOS_09_003.jpg
下面三張圖為蘋(píng)果手機(jī) iPhone 6Plus iOS 11.2 的效果圖：
iOS_10_11_001.jpg
iOS_10_11_002.jpg
iOS_10_11_003.jpg
