TypeError：在未实现接口 MediaDevices 的对象上调用了“getUserMedia”答案

【问题标题】：TypeError: 'getUserMedia' called on an object that does not implement interface MediaDevicesTypeError：在未实现接口 MediaDevices 的对象上调用了“getUserMedia”
【发布时间】：2016-06-07 07:24:34
【问题描述】：

我正在尝试使用视频标签在网站中实现网络摄像头。它适用于 Chrome，但 FireFox 和 IE 在控制台中返回错误。任何人有任何想法为什么？谢谢！

代码：

navigator.getMedia =    navigator.getUserMedia ||
                                navigator.webkitGetUserMedia ||
                                navigator.mediaDevices.getUserMedia ||
                                navigator.msGetUserMedia ||
                                OTPlugin.getUserMedia;

Firefox 错误：TypeError：在未实现 MediaDevices 接口的对象上调用了“getUserMedia”。

IE 错误：无法获取未定义或空引用的属性“getUserMedia”

【问题讨论】：

标签： video webcam getusermedia

【解决方案1】：

您忘记了 Firefox 的 navigator.mozGetUserMedia。 IE 没有（虽然 MS Edge 有）。

此外，请从该列表中删除 navigator.mediaDevices.getUserMedia，因为它的工作方式不同。

我的建议： 跳过前缀混乱，试试adapter.js，这是官方的 WebRTC polyfill。然后只使用navigator.mediaDevices.getUserMedia，因为其他所有内容都已弃用。

示例（在 Chrome 中使用 https fiddle）：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => video.srcObject = stream)
  .catch(e => console.log(e.name + ": "+ e.message));

<video id="video" width="160" height="120" autoplay></video><br>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

【讨论】：

你说的因为它的工作方式不同是什么意思？我认为 webrtc 现在返回一个承诺，而不是在其参数中接受回调。我还缺少什么吗？
@choz 是的，在实践中，像 OP 那样用一个代替另一个是行不通的，因为你必须以不同的方式称呼它们。