H5部署后navigator获取不到mediaDevices问题处理(navigator.mediaDevices为undefined)

问题产生

最近在开发过程中,有一个具体需要要使用摄像头内嵌到h5页面中实现拍照效果,相当于变相通过还H5调原生拍照、摄像等效果。
在这个过程中发现在开发环境时,各种访问媒体设备都没有问题,但是当部署到服务器上,手机和电脑浏览器都无法调起摄像头,比较郁闷,阅读了很多文章和原生文档后才知道原因并解决。

问题分析解决

这是由于浏览器的安全策略导致的,目前本人翻阅到的文档,有下面三种情况是可以调起设备的,也就是navigator.mediaDevices不为undefined:

  1. 地址为localhost:// 访问时
  2. 地址为https:// 时
  3. 为文件访问file:///

现实场景就是开发时将项目起在了localhost下,而部署项目部署到了http下,部署时不符合上面三种情况之一,所以浏览器处于安全考虑会禁掉通过代码调用媒体。
注: 如果有其他可以调用的设备请斧正

因国内没有比较优秀的H5页面内嵌摄像头的文章,后续会出一篇如何实现将《摄像头内嵌到H5页面》的文章,供大家查阅使用

有疑问请评论或私信

  • 10
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值