Last Updated: February 25, 2016
·
2.166K
· 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.