How to use getUserMedia from TypeScript

Question

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?

Answer 1

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

Answer 2

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?: bool; audio?: bool; }, 
        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.