javascript - 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(...)