CODEWITHSUNDEEP
angulartypescriptvisual-studionpm
Shane Duffy
Shane Duffy

Reputation: 1147

getDisplayMedia is not specified in TypeScript 3.8

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.

Upvotes: 2

Views: 2461

Answers (2)

HolgerJeromin
HolgerJeromin

Reputation: 2462

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

Upvotes: 0

Shane Duffy
Shane Duffy

Reputation: 1147

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();

Upvotes: 1

Related Questions