Chrome 中的 WebRTC getUserMedia 承诺 api 支持答案

【问题标题】：WebRTC getUserMedia promise api support in ChromeChrome 中的 WebRTC getUserMedia 承诺 api 支持
【发布时间】：2015-12-10 10:28:11
【问题描述】：

chrome 是否支持基于 Promise 的 WebRTC API？我无法让基于 getUserMedia() 承诺的 API 在 Chrome 中运行。

<!DOCTYPE html>
<html>
    <head>
        <title> Mitel WebRTC client </title>
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src='dist/webrtc.min.js'></script>

        <script type="text/javascript">
            function startUp() {

                var options = {
                    audio: true,
                    video: true
                };
                if (getUserMedia) {
                    getUserMedia(options)
                    .then(function (stream) {
                        console.log("Acquired audio and video!");
                    })
                    .catch(function (err) {
                        console.log(err.name + ": " + err.message);
                    });
                } else {
                    alert("WebRTC not supported on this browser");
                }
            }
        </script>
    </head>

    <body onload="startUp();">
        <h1>WebRTC Promise API Client Application</h1>
    </body>
</html>

在控制台上，我看到以下错误

This appears to be Chrome
adapter-latest.js:32 chrome: {"audio":true,"video":true}
adapter-latest.js:410 Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': The callback provided as parameter 2 is not a function.

我想使用基于 Promise 的 API。我错过了什么吗？

【问题讨论】：

在提供上述代码时（使用适配器 shim），我在 Firefox 上也遇到了同样的错误。 Firefox 表示它支持基于 Promise 的 API here
"Deprecated This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.".
@Kevin 我正在使用垫片/适配器。而且我认为它利用了 Navigator.MediaDevices.getUserMedia
@Kevin - 你指的是正确的问题。如果我不使用 getUserMedia()，而是使用 navigator.mediaDevices.getUserMedia()，那么基于 Promise 的 API 就可以工作。我假设适配器/垫片层将处理此类问题，并将别名为适当的 API（在本例中为 navigator.mediaDevices.getUserMedia()）。你能把它作为答案，以便我接受吗？
我不确定你的问题是什么，所以我无法制定一个有利于未来用户的正确答案。但是你可以回答你自己的问题并接受它，你可以准确地解释你做了什么来使它起作用。

标签： google-chrome webrtc getusermedia

【解决方案1】：

它还没有在 Chrome 中实现，但是如果你使用官方的adapter.jsWebRTC polyfill：https://jsfiddle.net/srn9db4h/

var constraints = { video: true, audio: true };

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(e => console.error(e));

Firefox 和 Edge 原生支持 FWIW。

更新： Chrome (50) 现在似乎支持此功能。 Chrome 52 甚至支持srcObject。

【讨论】：

正如@kevin 前面也提到的，正确的方法是使用命名空间api，即navigator.mediaDevices.getUserMedia()。如果底层浏览器支持更新的命名空间 API，我的错误印象是 adapter.js 会自动将 getUserMedia() 调用转换为 navigator.mediaDevices.getUserMedia()。
@sthustfo 对，这本来很聪明，但据我了解，adapter.js 正试图摆脱非标准的辅助函数，纯粹地填充规范。
但是Safari不支持！
@AniruddhaShevle It works in Safari Technology Preview。
@jib 是的，正如您所说的，它适用于 Safari 技术预览版。但是有什么办法可以在基本的 Safari 上工作！

【解决方案2】：

虽然不建议这样做，但您仍然可以尝试通过禁用媒体安全来测试您的项目。

chrome://flags/#unsafely-treat-insecure-origin-as-secure

您可以添加您的 IP，chrome 会将其视为安全的。

【讨论】：

在 chrome 中哪里添加这个？
在地址栏中像 url 一样输入这个。这将直接带你到那里。

【解决方案3】：

要访问 navigator.mediaDevices，您必须使用 HTTPS 连接来连接您的站点。无法通过 HTTP 访问此功能。

https://developers.google.com/web/fundamentals/media/capturing-images/

警告：直接访问相机是一项强大的功能。它需要用户的同意，并且您的网站必须位于安全来源 (HTTPS)。

【讨论】：

【解决方案4】：

如果您在 http 中运行 Chrome 应用程序，您也可能会收到此错误。如果是这样，您应该以 https 运行您的应用程序。 Chrome 仅支持带有 http 的 localhost 网址。

`http://jsfiddle.net/jib1/srn9db4h/ `
// not working

`https://jsfiddle.net/jib1/srn9db4h/`
//working with https

【讨论】：