移動端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協議