1

I'm writing a .Net Core/Angular 8 app in Visual Studio.

Within the Angular (ClientApp) part of the application, my node_modules contains TypeScript 3.5.3, which has the following defined in lib.dom.d.ts:

interface NavigatorUserMedia {
    readonly mediaDevices: MediaDevices;
    getDisplayMedia(constraints: MediaStreamConstraints): Promise<MediaStream>;
    getUserMedia(constraints: MediaStreamConstraints, successCallback: NavigatorUserMediaSuccessCallback, errorCallback: NavigatorUserMediaErrorCallback): void;
}

So I should be able to call navigator.getDisplayMedia(...), however when I try this I get a redline under it saying getDisplayMedia is not a function of navigator.

Thus I clicked "Go To Definition" of navigator and it took me to the TypeScript defined in C:\Program Files (x86)\Microsoft SDKs\TypeScript, which is apparently TypeScript 3.8.3. This also seems to be the "TypeScript Version" defined under Project Properties > TypeScript Build. Looking in the lib.dom.d.ts file, it appears there is absolutely no getDisplayMedia function whatsoever.

I attempted to use NuGet to download TypeScript 3.5.3, which correctly changed the TypeScript version under Project Properties > TypeScript Build, and removed the redline which allowed me to properly build the project. However, when attempting to call the function, an error outputs to the browser console saying that getDisplayMedia is not a function of navigator...

What the hell is going on?

Note: I know that getDisplayMedia should be called from MediaDevices. However in lib.dom.d.ts for both TypeScript 3.5.3 and 3.8.3, MediaDevices does not contain getDisplayMedia.

2 Answers 2

1

Nevermind, this looks like it is an active issue with TypeScript:

https://github.com/microsoft/TypeScript/issues/33232

Current workaround is to define mediaDevices manually:

const mediaDevices = navigator.mediaDevices as any;
const stream = await mediaDevices.getDisplayMedia();
2
  • 1
    Your workaround is not defining the MediaDevices manually, but deactivating the type declarations at this object. Jul 27, 2020 at 9:04
  • 1
    I agree with @HolgerJeromin, although it works, the workaround above is similar to adding // @ts-ignore. Until this issue is fixed, people can also manually define the correct types using global type augmentations. The right syntax is given by @moonrailgun in the issue @shane-duffy liked above.
    – rickstaa
    Jul 24, 2021 at 21:08
0

The types are added in TypeScript 4.4:

https://github.com/microsoft/TypeScript/issues/33232#issuecomment-914594775 https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1029#issuecomment-869224737

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.