CODEWITHSUNDEEP
angular
Sriram
Sriram

Reputation: 303

Getting "Property 'getDisplayMedia' does not exist on type 'MediaDevices'" in Angular

In my Angular app, there is a requirement to record screen. I've used navigator.mediaDevices.getDisplayMedia to capture screen. It is working in local. But could see errors in the command line like Property 'getDisplayMedia' does not exist on type 'MediaDevices'.. Because of this error, I could not generate the build file.

Here is my code:

 const videoOptions = {
   video: {
    cursor: 'always'
   },
   audio: true,
 };

this.captureStream = await navigator.mediaDevices.getDisplayMedia(videoOptions);

I'm using

Thank you

Upvotes: 5

Views: 5377

Answers (3)

Ahmed Samir Elshazly
Ahmed Samir Elshazly

Reputation: 229

On a work around you can cast navigator as any and use it

var browser = <any>navigator;

Upvotes: 0

Yauhen
Yauhen

Reputation: 469

Now it's fixed at typescript 4.4. So you can just update it "npm i -D [email protected]" or "npm i -D typescript@latest"

Upvotes: 2

nicearma
nicearma

Reputation: 780

Like you can see the getDisplayMedia is not define in the typescript definitions

/** Provides access to connected media input devices like cameras and microphones, as well as screen sharing. In essence, it lets you obtain access to any hardware source of media data. */
interface MediaDevices extends EventTarget {
    ondevicechange: ((this: MediaDevices, ev: Event) => any) | null;
    enumerateDevices(): Promise<MediaDeviceInfo[]>;
    getSupportedConstraints(): MediaTrackSupportedConstraints;
    getUserMedia(constraints?: MediaStreamConstraints): Promise<MediaStream>;
    addEventListener<K extends keyof MediaDevicesEventMap>(type: K, listener: (this: MediaDevices, ev: MediaDevicesEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof MediaDevicesEventMap>(type: K, listener: (this: MediaDevices, ev: MediaDevicesEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

so you can use:

// @ts-ignore
await navigator.mediaDevices.getDisplayMedia...

You can find the problem here https://github.com/microsoft/TypeScript/issues/33232

Upvotes: 11

Related Questions