移動端H5拉起手機相機

時間 2019-12-05

標籤移動 h5 拉起手機相機欄目無線简体版

原文原文鏈接

移動端H5拉起手機相機

目前瀏覽器拉起手機相機的有兩種方式MediaDevices.getUserMedia()和使用input標籤html

input 標籤拉起相機

只要正確的配置accept和capture就能夠打開手機相冊，相機，麥克風android

<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>
複製代碼

注意踩坑ios

肯定App(嵌入webview的APP，或者所使用的瀏覽器）有對應的權限
你可能碰見安卓手機拉起相機失敗只能打開相冊此時你要修改webview中的一些配置具參考這篇文章

MediaDevices.getUserMedia()拉起相機

MediaDevices.getUserMedia()能夠調用相機和音頻等，只是兼容性不太好,好比阿里的人臉識別若是支持 MediaDevices 就是用 MediaDevices 不支持就用 input 標籤web

// 這裏是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();
  };
})
複製代碼