CODEWITHSUNDEEP
angularangular6get-display-media
WasiF
WasiF

Reputation: 28899

navigator.getDisplayMedia is not a function in angular 6

I am trying to share user screen and need to use getDisplayMedia but getting error during project compile time

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

Here is the code

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

Package versions are as

  1. Node v10.14.2
  2. NPM v6.5.0
  3. @angular/cli v6.1.5

Upvotes: 2

Views: 5070

Answers (4)

susan shrestha
susan shrestha

Reputation: 91

If you are in angular you don't getDisplayMedia with navigator or mediaDevices. It shows error on getDisplayMedia. So what you can do to remove the error is.

Declare

nav: any;

then where you have to use getDisplayMedia()

this.nav = navigator;

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

Upvotes: 3

WasiF
WasiF

Reputation: 28899

In Angular 6+

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

Note: To record the screen in Angular 6+, you need to enable experimental web platform features in chrome://flags until it is launched properly because it is in development and testing mode

see the below image for details:

enter image description here

Upvotes: 2

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

getDisplayMedia is no longer available in navigator. It was moved to navigator.mediaDevices.getDisplayMedia.

Source

Also make sure you have the typing for the navigator installed.

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222682

According to the documentation you need to use navigator.mediaDevices.getDisplayMedia

The error you are seeing it because there is no property available with navigator named getDisplayMedia

Upvotes: 3

Related Questions