CODEWITHSUNDEEP
typescript
Igor Dvorkin
Igor Dvorkin

Reputation: 827

How to use getUserMedia from TypeScript

I'd like to call getUserMedia from TypeScript, something like: 

 return  navigator.getUserMedia()

However, TypeScript's definition of Navigator (in lib.d.ts) doesn't contain getUserMedia. How do I work around? Should I be modifying lib.d.ts? Where do I make this change?

Upvotes: 9

Views: 14242

Answers (5)

Buka
Buka

Reputation: 59

Now on mdn (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia) this method is marked as deprecated, so it is recommended to use navigator.mediaDevices.getUserMedia. It is also included in typescript definitions

Upvotes: 0

David Zulaica
David Zulaica

Reputation: 388

Importing type definitions has been simplified with TypeScript 2.0.

Install the webrtc definitions as a dev dependency with NPM

$ npm install —-save @types/webrtc

Once installed, use the reference directive at the top of the .ts file that works with getUserMedia:

/// <reference types="webrtc" />

const getUserMedia = navigator.mediaDevices.getUserMedia ||
                     navigator.getUserMedia ||
                     navigator.webkitGetUserMedia ||
                     navigator.mozGetUserMedia

That should do it!

Upvotes: 9

Fenton
Fenton

Reputation: 251082

The current practice for this is to add to the interface, rather than edit the lib.d.ts file.

You can add to the interface in your TypeScript file and when the lib.d.ts is updated, the compiler will tell you that you no longer need it. I have put it extra white-space to make the different parts of the declaration easier to read and I've added a sample call below the interface.

interface Navigator {
    getUserMedia(
        options: { video?: boolean; audio?: boolean; }, 
        success: (stream: any) => void, 
        error?: (error: string) => void
        ) : void;
}
    
navigator.getUserMedia(
    {video: true, audio: true}, 
    function (stream) {  },
    function (error) {  }
);

I would make this change in the class that uses getUserMedia. And I would try to restrict all usages of getUserMedia to that class.

Upvotes: 10

Jodo
Jodo

Reputation: 4773

As this is already quite old but people might still come here looking for an answer, here is an updated answer using typings to manage all definitely typed files:

install typings, Github Page, with these commands hacked into the command line (npm needs to be installed) and download mediastream.d.ts from there:

npm install typings --global
typings init
typings install mediastream --ambient --save

then either add the main.d.ts from the generated typings folder to your tsconfig.json file or add it directly to the typescript file you want it to use in with this line:

/// <reference path="typings/main.d.ts" />

Now typescript will recognize navigator.getUserMedia() and compile it correctly. And the cool part about it is, that whenever you have another javascript lib (more or less well known) you need typescript to recognize you can just use typings and you will have it added in some seconds.

Upvotes: 3

Igor Dvorkin
Igor Dvorkin

Reputation: 827

Instead of changing the definition you can cast to an any object an call with arbitray parameters e.g: 

    var n = <any>navigator;
    n.getUserMedia  = n.getUserMedia || n.webkitGetUserMedia || n.mozGetUserMedia || n.msGetUserMedia;
    return  n.getUserMedia({video: true, audio:true}, onSuccess, onFail);

Upvotes: 10

Related Questions