Last Updated: February 25, 2016
·
2.387K
· leemachin

Call native functions dynamically in the correct scope

Chances are you've, at some point, tried to use a 'native' browser function in a dynamic way, and received an illegal invocation error as thanks for it.

var userMedia = (function() {
  navigator.getUserMedia() || navigator.webkitGetUserMedia()
})();

userMedia.call(this, args...);
// => illegal invocation error

Between creating userMedia and calling it as a function, the two getUserMedia functions are no longer bound to the correct scope. The fix is simple:

var userMedia = (function() {
  navigator.getUserMedia().bind(navigator) ||
  navigator.webkitGetUserMedia().bind(navigator)
})();

Explicitly binding these methods to their original context will solve the problem.

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside