navigator.mediaDevices.getUserMedia 不起作用，webkitGetUserMedia 也不起作用

Posted 2023-02-22

【中文标题】navigator.mediaDevices.getUserMedia 不起作用，webkitGetUserMedia 也不起作用

【英文标题】：navigator.mediaDevices.getUserMedia is not working and neither does webkitGetUserMedia

【发布时间】：2016-03-13 22:43:59

【问题描述】：

我一直在使用 webkitGetUserMedia 方法（通过 adapter.js 获取用户媒体）在我的网络应用程序上获取用于 webRTC 的摄像头和 microhpone。我的服务器不安全（没有 SSL 证书）。一切正常，直到我开始收到一条错误消息：“getUserMedia() 不再适用于不安全的来源。要使用此功能，您应该考虑将应用程序切换到安全来源，例如 HTTPS。有关更多详细信息，请参阅 https://goo.gl/rStTGz 。”

我搜索了一下，发现现在在 Chrome 中我需要使用 navigator.mediaDevices.getUserMedia()。我正在使用 Chrome 47.0.2526.80 m，并且在此页面上 https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia 它说此版本应支持此方法。但是，当我调用 navigator.mediaDevices.getUserMedia 时，我得到了未定义。所以现在我不能在 Chrome 中使用任何一种方法。

谁能帮我解决这个问题。 谢谢

【问题讨论】：

sites.google.com/a/chromium.org/dev/Home/chromium-security/…。这些不适用于非 https 网站

是的，我看到了，但是在 developer.mozilla.org/en-US/docs/Web/API/MediaDevices/… 上并没有说明该方法不适用于非安全来源。

实际上，在 Chrome 的脚注 3 中确实如此。

【参考方案1】：

根据新的 chrome 更新（来自 Google Chrome 47），getUserMedia() 在 chrome 浏览器中不再支持 http://（不安全来源），它将在 https://（安全来源）上工作

出于开发目的，

1.localhost 被视为通过 HTTP 的安全源，因此如果您能够从 localhost 运行您的服务器，您应该能够在该服务器上测试该功能。

2.您可以使用 --unsafely-treat-insecure-origin-as-secure="http://example.com" 标志运行 chrome（将“example.com”替换为您实际要测试的来源），这将把该来源视为本次会话的安全来源。请注意，您还需要包含 --user-data-dir=/test/only/profile/dir 以创建新的测试配置文件以使该标志起作用。

参考：https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

【讨论】：

这实际上不是我的问题。我已经看到并阅读了所有这些信息。我的问题是，如我所见， navigator.getUserMedia 已被弃用。但同时 navigator.MediaDevices.getUserMedia 是未定义的！那么当后继者不存在时，一种方法怎么会被弃用呢？第二个问题是，如果 navigator.getUserMedia 不能在非安全来源上工作，那会怎样？只有“--unsafely-treat-insecure-origin-as-secure="example.com" 方式？在 naviagtor.MediaDevices.getUserMedia 上尚不清楚该新方法是否适用于非安全来源！

它不适用于 Chrome 48.0.2564.116 Chrome 说：您正在使用不受支持的命令行标志：--unsafely-treat-insecure-origin-as-secure

是的，这些标志不再起作用，但 Firefox 仍然支持这个

@Mohammed Safeer 我在使用此命令时出错：“google chrome 无法读取和写入其数据目录：/test/only/profile/dir”

@Dash 这可能是由于权限问题。检查 chrome 的用户权限

【参考方案2】：

最新的 google-chrome 更新使 getUserMedia 仅在安全来源上工作。 有一种方法可以使它工作，但仅用于开发目的。 只需使用带有这些选项的 cmd 运行 chrome

--unsafely-treat-insecure-origin-as-secure="example.com"

此选项用于使用新的用户配置文件

--user-data-dir=/test/only/profile/dir

仅供参考 getUserMedia 在 firefox 上工作到现在，但在我看来，它会推荐像 google-chrome 这样的安全来源。

【讨论】：

我可以轻松地将这个参数添加到桌面浏览器。但是当我开发应用程序时，如何在我的手机上做到这一点？还是应该在我的本地主机上建立 https 连接？

只是在这里说，以防将来对某人有所帮助。您可以通过转到 chrome://flags/ 并搜索“不安全的来源视为安全”来访问 android Chrome 中的标志。

【参考方案3】：

在使用本地服务器在我的手机上进行测试时，我很难在 android chrome 上获得我的 pwa 的麦克风权限。 （在我的桌面上运行良好。）上面的一些建议帮助我朝着正确的方向前进，但我想澄清一下。 ...我手机上的 Chrome 不允许触发权限请求，因为源地址不安全。我发现这篇关于这个主题的文章非常有帮助： Enabling the Microphone/Camera in Chrome for (Local) Unsecure Origins Scott Carmichael。

他说，

通过地址栏导航到 Chrome 中的 chrome://flags/#unsafely-treat-insecure-origin-as-secure。

查找并启用 Insecure origins Treated as secure 部分。

添加您想要忽略其安全源策略的任何地址。 （如果需要，包括端口号。）

保存并重新启动 Chrome。

【参考方案4】：

您仍然可以在 Chrome 47 中使用旧方法名称，只要您使用 https。名称更改与 47 的新安全来源要求正交。查看其他答案。

关于缺少的方法：navigator.mediaDevices.getUserMedia 在 Chrome 中被添加了 back under a flag，因此您必须打开 chrome://flags/#enable-experimental-web-platform-features 或使用最新版本的 adapter.js，例如：https://***.com/a/34230983/918910。