web资源部署后navigator获取不到mediaDevices实例的解决方案（navigator.mediaDevices为undefined）

问题

最近在开发中，有一个功能需要实现录制屏幕的功能，我这边使用了recordrtc库，在过程中本地开发都没有问题，部署到线上环境时出现 navigator.mediaDevices为undefined，查找了不少文章和官方文章才得以解决

原因和解决方案

由于浏览器的安全策略导致了这个问题，目前经尝试，在以下几种情况中 navigator.mediaDevices 可以正常使用

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

// 注：如果有其他方案欢迎指正

另附上 recordrtc 使用源码以供参考 (参考源码使用了element UI)

index.vue

ScreenRecorder.vue

recordrtc库参考文档：https://github.com/muaz-khan/RecordRTC