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

user_6050592 0
Viewed 3516

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

  • Angular CLI: 11.0.2
  • TS: 4.0.5

Thank you

angular
3 Answers

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

user_12317670

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

user_122324120

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

var browser = <any>navigator;
user_57583160
Related