JavaScript中的getUserMedia()在浏览器中规范化.非法调用

Question

当我尝试执行以下操作时:

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

它在Chrome中引发错误"非法调用".

但如果我这样做:

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

我尝试了一下,我读到它是一个上下文问题.但我仍然无法理解那是什么意思.在第一个例子中,getUserMedia变量最终获得对不是不可取的函数的引用(即,在chrome的情况下,它是webkitGetUserMedia),那么为什么我不能使用这个变量调用它呢？

_{(这实际上是一个普遍的JavaScript问题,不是WebRTC特有的.)}

Answer 1

显然,navigator无论出于何种原因,它都需要将上下文作为对象.我注意到了同样的事情console.log- 它需要console上下文.

执行此操作时navigator.getUserMedia,上下文将自动设置为navigator,与您在对象上调用方法的任何其他时间一样.如果您这样做getUserMedia,上下文(默认情况下)是全局的,因此它会引发非法调用错误.

如果您仍想将其保存为变量,可以在运行时使用正确的上下文调用它:

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

您还可以使用bind变量保存上下文,这样您就不必每次都调用它:

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