navigator.getDisplayMedia 不是 angular 中的函数 6

Question

我正在尝试共享用户屏幕并需要使用 getDisplayMedia 但在项目编译期间出现错误

Property 'getDisplayMedia' does not exist on type 'Navigator'

这是代码

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

包版本如

Answer 1

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

您看到的错误是因为 navigator 没有可用的属性名为 getDisplayMedia

Answer 2

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

还要确保安装了 navigator 的类型。

Answer 3

在Angular 6+

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

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

详情见下图：

Answer 4

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

声明

nav: any;

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

this.nav = navigator;

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

navigator.getDisplayMedia is not a function in angular 6