Cannot read property ‘getDisplayMedia‘ of undefined

今天在把项目部署到服务器上的时候，突然发现直播功能失效了，在本地跑是没有问题的，找了半天终于知道是什么原因了，即 Cannot read property ‘getDisplayMedia’ of undefined今天就来分享一下这个原因出现的问题和一些解决思路。

一、问题出现原因

我们使用腾讯云直播虽然使用了第三方库，但是其背后还是用的是浏览器自己的一些实现方法，对其进行了一个封装，详情可以看我之前写的博客共享屏幕(带声音)
现在就来说一下具体问题吧
浏览器为了用户隐私和安全，使用navigator.getDisplayMedia 获取用户多媒体权限时，它只能在三种场景下工作
1、本地（即localhost或者127.0.0.1开头）
2、HTTPS开头
3、使用file://打开的本地文件
其他情况下navigator.getDisplayMedia获取的值就是undefined

二、解决方法

方法一：

部署服务器的人给服务器申请一个SSL证书，这个方法并不难，但是得靠后端的去费点事

方法二：

这个方法就是让用户设置一下，以谷歌浏览器为例（其实Edge方法差不多）
在浏览器地址栏复制下边的代码

 chrome://flags/#unsafely-treat-insecure-origin-as-secure

会出现这个

之后把需要直播的网站站链接复制到框里边，如果是多个连接，连接之间用逗号隔开

之后点击右边的框

将其改为Enable,改完就右下角就会出现一个按钮

点击后会自动重启浏览器，之后就可以使用了
Edge也是一样的操作方法，只不过输入地址栏的代码不同

edge://flags/#unsafely-treat-insecure-origin-as-secure

三、其他注意事项

第二个方法执行完，部署到服务器上后，如果用户执行了方法二的操作，前端可以通过判断typeof navigator.mediaDevices是否为‘undefined’来判断用户是否执行过方法二操作，这样不用每次都提醒用户去执行了
操作了