移动端H5拉起手机相机

移动端H5拉起手机相机

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

input 标签拉起相机

只要正确的配置acceptcapture就可以打开手机相册,相机,麦克风

<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协议

参考

转载于:https://juejin.im/post/5cf679c8e51d45777540fd6b

H5中的摄像头权限管理通常涉及到浏览器的同源策略和用户交互。当网页首次请求访问用户的摄像头时,会弹出一个确认对话框,询问用户是否允许。如果用户给予了许可,浏览器会存储一个临时的授权,以便后续页面在同一来源下可以继续使用。 如果你的网站需要在重新加载或跳转后再次使用摄像头,你需要处理好以下几个步骤: 1. **检查权限状态**:在尝试访问摄像头之前,通过JavaScript API `navigator.mediaDevices.getUserMedia()` 的`mediaDevices.enumerateDevices()`方法检查设备列表,看看是否有已授予的摄像头权限。 ```javascript async function checkCameraPermission() { const devices = await navigator.mediaDevices.enumerateDevices(); let cameraFound = false; for (const device of devices) { if (device.kind === 'videoinput') { cameraFound = true; break; } } return cameraFound; } ``` 2. **如果没有权限**,你需要向用户显示提示,让用户重新授予权限。这通常通过点击按钮触发,引导用户在浏览器设置中更改权限。 3. **用户授权后**,记得保存用户的授权状态,这样下次访问时可以直接使用。你可以将这个信息存储在本地存储或其他合适的持久化存储中。 4. **跨域问题要注意**:对于跨域请求,浏览器为了安全限制,可能会清除之前的权限。在这种情况下,用户需要在每个新的域名或路径上重新授权。 **相关问题--:** 1. H5如何避免用户关闭摄像头权限后无法再次获取? 2. 如何处理用户拒绝了摄像头权限的情况? 3. 是否有API可以在后台自动刷新摄像头权限?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值