移动端H5拉起手机相机

移动端H5拉起手机相机

目前浏览器拉起手机相机的有两种方式MediaDevices.getUserMedia()和使用input标签

input 标签拉起相机

只要正确的配置accept和capture就能够打开手机相册，相机，麦克风

<div>
  <h2>camear</h2>
  <input type="file" accept="image/*" capture="camera" />
  <br />
  <h2>camcorder</h2>
  <input type="file" accept="video/*" capture="camcorder" />
  <br />
  <h2>microphone</h2>
  <input type="file" accept="audio/*" capture="microphone" />
</div>
复制代码

注意踩坑

• 肯定App(嵌入webview的APP，或者所使用的浏览器）有对应的权限
• 你可能碰见安卓手机拉起相机失败只能打开相册此时你要修改webview中的一些配置具参考这篇文章

MediaDevices.getUserMedia()拉起相机

MediaDevices.getUserMedia()能够调用相机和音频等，只是兼容性不太好,好比阿里的人脸识别若是支持 MediaDevices 就是用 MediaDevices 不支持就用 input 标签

// 这里是MDN的小DEMO更多细节本身查阅吧
var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
复制代码

注意踩坑

• 肯定App(嵌入webview的APP，或者所使用的浏览器）有对应的权限
• 你在电脑上测试怎么都OK可用手机就很差使了，那么你极可能没有使用https协议在移动端测试要使用https协议

参考

• ios各系统市场占有量
• 安卓各版本系统市场占有量
• getUserMedia API及HTML5 调用手机摄像头拍照
• 腾讯人脸验证
• 百度活体检查