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

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

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

• 地址为localhost:// 访问时
• 地址为https:// 时
• 为文件访问file:///
  现实场景就是开发时将项目起在了localhost下，而部署项目部署到了http下，部署时不符合上面三种情况之一，所以浏览器处于安全考虑会禁掉通过代码调用媒体。
  原文链接：https://blog.csdn.net/zf2014122891/article/details/108753502