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

navigator.mediaDevices.getUserMedia is not working and neither does webkitGetUserMedia

提问by Michael P

I've been using webkitGetUserMedia method (getUserMedia through adapter.js) to get the camera nad microhpone for webRTC on my web app. My server is not secure (no SSL certificate). It all worked fine until I started getting an error saying : "getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGzfor more details."

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

I googled and I saw that now in Chrome I need to use navigator.mediaDevices.getUserMedia(). I'm using Chrome 47.0.2526.80 m, and on this page https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMediait says that this method should be supported for this version. However when I call navigator.mediaDevices.getUserMedia I get undefined. So now I cannot use either method in Chrome.

我用谷歌搜索，我现在在 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 中使用任何一种方法。

Can anyone please help me with this issue. Thanks

任何人都可以帮我解决这个问题。谢谢

回答by Mohammed Safeer

As per new chrome update (From Google Chrome 47), getUserMedia() is no longer supported in chrome browser over http:// (Unsecure Origin) , It will work on https:// (Secure Origin)

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

For development purpose,

出于开发目的，

1.localhost is treated as a secure origin over HTTP, so if you're able to run your server from localhost, you should be able to test the feature on that server.

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

2.You can run chrome with the --unsafely-treat-insecure-origin-as-secure="http://example.com"flag (replacing "example.com" with the origin you actually want to test), which will treat that origin as secure for this session. Note that you also need to include the --user-data-dir=/test/only/profile/dirto create a fresh testing profile for the flag to work.

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

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

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

回答by Kassav'

The last google-chrome update makes getUserMedia work only on secure origins. There is a method to make it work, but only for developing purposes. Just run chrome using cmd with thoses options

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

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

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

and this option to use a new user profile

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

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

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

FYI getUserMedia work on firefox until now, but in my opinion, it will recommend a secure origin like google-chrome.

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

回答by jib

You can still use the old method name in Chrome 47, as long as you use https. The name change is orthogonal to 47's new secure-origin requirement. See other answers.

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

On the missing methods: navigator.mediaDevices.getUserMediawas put back under a flagin Chrome, so you must either turn on chrome://flags/#enable-experimental-web-platform-featuresor use a recent version of adapter.js, like here: https://stackoverflow.com/a/34230983/918910.

关于缺少的方法：在 Chrome 中navigator.mediaDevices.getUserMedia被放回一个标志下，因此您必须打开chrome://flags/#enable-experimental-web-platform-features或使用最新版本的adapter.js，例如：https://stackoverflow.com/a/34230983/918910 。

回答by C-Note187

While testing on my phone on with a local server, I was struggling to get mic permissions for my pwa on android chrome. (Was working fine on my desktop.) Some of the above suggestions helped push me in the right direction, but I want clarify just a bit. ...Chrome on my phone was not allowing the permissions request to fire because the origin address was not secure. I found this article on the subject which was very helpful: Enabling the Microphone/Camera in Chrome for (Local) Unsecure Originsby Scott Carmichael.

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

He says,

他说，

1. Navigate via address-bar to chrome://flags/#unsafely-treat-insecure-origin-as-securein Chrome.

2. Find and enable the Insecure origins treated as securesection.

3. Add any addresses you want to ignore the secure origin policy for. (Include the port number if required.)

4. Save and restart Chrome.

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

2. 查找并启用视为安全的不安全来源部分。

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

4. 保存并重新启动 Chrome。