在 Chrome 或 Firefox v36 中看不到 getUserMedia 的 Firefox v41 问题

Question

我使用来自 (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) 的以下代码：

navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
   getUserMedia: function(c) {
     return new Promise(function(y, n) {
       (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n);
     });
   }
} : null);

设置麦克风以供使用。这在 Chrome (v45) 和 Firefox (v36) 中效果很好，但在 Firefox (v41) 中我在控制台中收到以下错误：

Error: setting a property that has only a getter
RecorderSvc.initAudio@http://fakewebsite.com/js/services/recorder.js:61:1

我可以通过以下方式解决问题：

if (navigator.mozGetUserMedia || navigator.webkitGetUserMedia) {
    navigator.mediaDevices.getUserMedia = function(c) {
        return new Promise(function(y, n) {
            (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n);
        });
    }
}

但这在 Chrome 或 Firefox (v36) 中不起作用。

• 在 Chrome 中，仅定义了 navigator.webkitGetUserMedia。
• 在 Firefox (v36) 中，仅定义了 navigator.mozGetUserMedia。
• 在 Firefox (v41) 中，navigator.mozGetUserMedia 和 navigator.mediaDevices 已定义。

我不知道如何在不破坏其中一个浏览器的情况下解决此问题。有什么想法吗？

Answer 1

您复制的代码（我偶然写的）做得很糟糕，试图将navigator.mediaDevices.getUserMedia 填充到本机还没有它的浏览器中。它已从您找到它的地方删除。感谢您发现它已损坏。

Polyfilling 是一项棘手的工作，因此我强烈建议您使用官方 WebRTC polyfill adapter.js，而不是尝试手动填充它。您可以使用最新版本的 adapter.js，或直接链接到最新版本，如下所示：

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

请参阅https://jsfiddle.net/srn9db4h/，了解适用于您提到的浏览器的示例。

我不会尝试更正您提到的代码，因为正确填充 navigator.mediaDevices 变得相当复杂。

这也是不够的，因为getUserMedia 的位置并不是the specification 中唯一改变的东西。 constraints 参数 has changed as well 的格式，这就是为什么 navigator.mediaDevices.getUsermedia 在 Chrome 45 中仍然落后于实验标志。

adapter.js 负责所有这些，直到浏览器赶上来。

Answer 2

如果您将语句包含在 Try Catch 块中，它将起作用。

if (navigator.mediaDevices || (navigator.mozGetUserMedia || navigator.webkitGetUserMedia)) {
  try {
    navigator.mediaDevices = {
      getUserMedia: function(c) {
        return new Promise(function(y, n) {
          (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n);
        });
      }
    };
  }
  catch(err) {
    navigator.mediaDevices.getUserMedia = function(c) {
      return new Promise(function(y, n) {
        (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n);
      });
    }
  }
} else {
  navigator.mediaDevices = null;
}