navigator.getDisplayMedia 不是 Angular 6 中的函数答案

【问题标题】：navigator.getDisplayMedia is not a function in angular 6navigator.getDisplayMedia 不是 Angular 6 中的函数
【发布时间】：2018-12-15 07:21:12
【问题描述】：

我正在尝试共享用户屏幕，需要使用getDisplayMedia，但在项目编译时出错

“导航器”类型上不存在属性“getDisplayMedia”

这里是代码

let stream = await navigator.getDisplayMedia({ video: true })

包版本如下

节点 v10.14.2
NPM v6.5.0
@angular/cli v6.1.5

【问题讨论】：

发布您的代码以更好地理解
好的，请稍等
问题正是错误信息所说的。没有这样的属性：developer.mozilla.org/en-US/docs/Web/API/Navigator
@WasiF 这个错误是在浏览器中发生还是在编译过程中发生？也许该方法在您尝试的浏览器中不可用。另外，您可以尝试通过window 对象访问导航器吗？
@AhmadAlfy 我在navigator 上有getDisplayMedia 属性。

标签： angular angular6 get-display-media

【解决方案1】：

根据documentation你需要使用navigator.mediaDevices.getDisplayMedia

您看到的错误是因为没有名为 getDisplayMedia

的 navigator 属性可用

【讨论】：

我认为你们俩都在打架，或者其他人正在这样做......我也很想知道
我没有这样做，只是为了澄清 :) 祝你有美好的一天@Sajeetharan
这个navigator 位于哪个包中，因为在我的VS Code 中它位于navigator.getDisplayMedia。那么应该更新什么？

【解决方案2】：

在Angular 6+

let stream = await navigator.getDisplayMedia({ video: true })
console.log(stream)

注意：要在Angular 6+中录屏，需要在chrome://flags中启用experimental web platform features，直到它正常启动，因为它处于开发和测试模式

详情见下图：

【讨论】：

【解决方案3】：

如果您使用 Angular，则不会使用导航器或 mediaDevices 获取 DisplayMedia。它在 getDisplayMedia 上显示错误。所以你可以做些什么来消除这个错误。

声明

nav: any;

那么你必须在哪里使用 getDisplayMedia()

this.nav = navigator;

stream = this.nav.mediaDevices.getDisplayMedia(your content)

【讨论】：

【解决方案4】：

getDisplayMedia 在navigator 中不再可用。已移至navigator.mediaDevices.getDisplayMedia。

Source

还要确保您已安装 navigator 的输入。

【讨论】：

我有 navigator 的输入，但在 getDisplayMedia 字下出现红色波浪线
这个导航器位于哪个包中，因为在我的 VS Code 中它位于 navigator.getDisplayMedia。那么应该更新什么？