getUserMedia() in JavaScript normalizes across browsers. Illegal Invocation

Question

When I try to do the following:

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// now I try to invoke it with some parameters:
getUserMedia(...) // not working!

It throws an error "Illegal Invocation" in Chrome.

But if I do:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// now invoke it with the navigator
navigator.getUserMedia(..) // Works

I've tried searching a bit, and I read it's a context issue. But I still couldn't understand what's the meaning of that. In the first example, the getUserMedia variable ends up getting a reference to the function which is not undefiend (i.e, in case of chrome, it's webkitGetUserMedia), so why cannot I invoke it using this variable?

_{(This is actually a general JavaScript question, not specific to WebRTC.)}

Answer 1

Apparently, it needs the context to be the navigator object, for whatever reason. I've noticed the same thing with console.log - it needs the console context.

When you do navigator.getUserMedia, the context is automatically set to navigator, as with any other time you invoke a method on an object. If you just do getUserMedia though, the context (by default) is global, and so it throws an Illegal Invocation error.

If you still want to save it as a variable, you can call it with the correct context at runtime:

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// now I try to invoke it with some parameters:  
getUserMedia.call(navigator, ...)

You could also use bind to save the context with the variable, so that you don't have to call it each time:

var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia).bind(navigator);
// now I try to invoke it with some parameters:  
getUserMedia(...)