在 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

如果您将语句放在 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;
}

Answer 2

您复制的代码（我偶然编写的）在尝试将 navigator.mediaDevices.getUserMedia 填充到本机尚未支持的浏览器中时做得很糟糕。它已从您找到它的地方移除。感谢您发现它已损坏。

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

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

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

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

这也是不够的，因为 getUserMedia 的位置并不是 the specification. The format of the constraints argument 中唯一发生变化的东西，这就是为什么 navigator.mediaDevices.getUsermedia 在 Chrome 45.

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

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

Firefox v41 issue with getUserMedia not see in Chrome or Firefox v36

firefox

getusermedia