Chrome：navigator.mediaDevices.getUserMedia 不是函数

Posted 2023-03-14

【中文标题】Chrome：navigator.mediaDevices.getUserMedia 不是函数

【英文标题】：Chrome: navigator.mediaDevices.getUserMedia is not a function

【发布时间】：2016-09-15 20:52:29

【问题描述】：

我在本地主机上并尝试在 Chrome 中使用 MediaDevices.getUserMedia 方法。我收到标题错误。我知道在 Chrome 中只能使用安全来源的这个功能，并且 localhost 被认为是安全的来源。此外，这适用于 Firefox。

这就是我使用它的方式，如 Google Developers 网站 https://developers.google.com/web/updates/2015/10/media-devices?hl=en 所示：

var constraints = window.constraints = 
            audio: false,
            video: true
;


navigator.mediaDevices.getUserMedia(constraints).then(function(stream) 
            callFactory.broadcastAssembly(stream);
            ...
);

【问题讨论】：

我认为你需要有 HTTPS 才能让它工作。

@Tom 在本地主机上服务是特别允许的：chromium.org/Home/chromium-security/…

@Nateowami 不是在我写评论的时候。

【参考方案1】：

在一些最新的浏览器上navigator.getUserMedia 表现不佳。所以，尝试使用navigator.mediaDevices.getUserMedia。或者，最好检查navigator.mediaDevices.getUserMedia 是否可用于浏览器使用navigator.mediaDevices.getUserMedia 或使用navigator.getUserMedia。

navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.mediaDevices.getUserMedia) 
    navigator.mediaDevices.getUserMedia(  audio: true, video: true )
    .then(function (stream) 
                  //Display the video stream in the video object
     )
     .catch(function (e)  logError(e.name + ": " + e.message); );

else 
navigator.getWebcam( audio: true, video: true , 
     function (stream) 
             //Display the video stream in the video object
     , 
     function ()  logError("Web cam is not accessible."); );

希望这能解决您的问题。

【参考方案2】：

尝试启用：chrome://flags/#enable-experimental-web-platform-features

在铬中为我工作

【讨论】：

也为我工作。 navigator.mediaDevices.getUserMedia 是在 Chrome 中定义但不是在 Chromium 中定义？ MDN warns against using 已弃用的 navigator.getUserMedia，警告“它可能随时中断”。我试图不使用它，但如果不更改该标志，navigator.mediaDevices.getUserMedia 在 Chromium 中不可用。编辑：与我读到的相反，didn't come out until Chrome 53（我使用的是 Chromium 52）。

我在 MDN 的脚注中找到了答案：From version 47 to 52, the promise-based interface was only available through the adapter.js polyfill, or using the flag chrome://flags/#enable-experimental-web-platform-features. Starting with version 53, the promise-based interface is on by default, though that interface is still not available through navigator.

我正在使用版本 71.0.3578.98（官方构建）（64 位），#enable-experimental-web-platform-features 没有帮助我使用 Twilio：github.com/TwilioDevEd/client-quickstart-js/blob/…。

该死。我又回来了，没有阅读我上面的评论并在 Brave (Brave is up to date Version 1.22.71 Chromium: 89.0.4389.114 (Official Build) (64-bit)) 中再次尝试，但仍然没有用。

【参考方案3】：

我的 chrome 浏览器也有同样的问题。 首先通过在https://test.webrtc.org/ 中测试来检查您的手机是否受支持

如果您的手机通过了所有案例，请检查第 2 步

第 2 步： 如果您托管网页或运行第三方网页，请查看您的手机是否启用了摄像头权限。

另外一个主要问题是WEBRTC 在HTTP 站点中不受支持，仅在HTTPS 站点中受支持

This is the https site which allows web This is the http site which gives a error

【讨论】：

没错，这也是我的问题（+1）

【参考方案4】：

我陷入了同样的问题。一种解决方案是关注并下载@ellerynz 在上述评论中分享的扩展Web Server for Chrome，或者

如果你安装了python，你也可以这样做

python -m SimpleHTTPServer [port]

按回车后，您应该会看到以下消息：

Serving HTTP on 0.0.0.0 port 8000 ...

打开浏览器放

http://127.0.0.1:[port]

【讨论】：

优秀 - 使用SimpleHTTPServer 正好遇到这个问题；将 IP 从 0.0.0.0 更改为 127.0.0.1 解决了它

【参考方案5】：

您是否尝试过包含 adapter.js polyfill ？检查此页面： https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Browser_compatibility

Chrome 需要像这样或根据@Simon Malone 的说明启用chrome://flags/#enable-experimental-web-platform-features。

【参考方案6】：

我也遇到了这个问题，更改标志似乎不起作用。我在 Google 的 WebRTC tutorial 中遇到了这个 chrome 扩展程序 - Web Server for Chrome，这似乎可以解决问题。

【参考方案7】：

请改用navigator.getUserMedia()。

navigator.getUserMedia(constraints, successCallback, errorCallback);

【讨论】：

我希望使用 MediaDevices.getUserMedia，因为 Navigator.getUserMedia 在 Mozilla 上被列为已弃用。我仍然很困惑为什么前者对我不起作用。

你可以使用你想要的，但你必须写一些 polyfill。