webrtc - 渐进式 Web 应用程序：访问 navigator.mediaDevices.getUserMedia 时出错？

Question

我的应用程序出于 webrtc 的目的访问相机，并且可以正常工作。

我正在使用pwacompatGoogle Labspwa向我的网络应用程序添加功能。

将应用程序作为 . 运行时pwa，一切正常，直到我访问相机。然后我得到这个 console.log 错误：

getUserMedia failedObject {type: "error", msg: "undefined is not an object (evalating 'navigat..."}

getUserMedia 失败类型：错误消息：未定义不是对象（评估“navigator.mediaDevices.getUserMedia”）

我错过了什么？

Answer 1

更新 - 2020 年 11 月 19 日

WKWebView 可以在 iOS 14.3 beta 1 中使用 getUserMedia。

• https://bugs.webkit.org/show_bug.cgi?id=208667
• https://bugs.chromium.org/p/chromium/issues/detail?id=752458

更新 - 2019 年 9 月 14 日

iOS 13 和 Safari 13 上的 Safari 发生了变化：https ://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

SFSafariViewController 获得了 getUserMedia 功能（!!!，但是我需要确认这一点，请参阅下面的报告以了解它的工作情况）

• https://bugs.webkit.org/show_bug.cgi?id=183201

但是 WKWebView 似乎没有获得 getUserMedia 功能：

• https://bugs.chromium.org/p/chromium/issues/detail?id=752458
• https://bugs.webkit.org/show_bug.cgi?id=185448

iOS 13 和 Safari 13 发行说明：

• https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes
• https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

编辑

简而言之：将不允许 PWA 或在原生 Safari 应用程序之外的 iOS 上使用的任何网站访问 getUserMedia，因为 Apple 出于“安全问题”故意阻止访问。这包括保存到主屏幕和/或在 Facebook 等其他应用程序中查看的任何网站。相同的限制适用于 Android，但在 Android 上，应用程序开发人员可以请求相机权限并解决此问题。（这意味着，如果您是网站开发人员并且需要相机功能，则需要询问 Facebook 等，以重建他们的应用程序以允许在 Android 上使用此功能）。

在此处查看他们的错误跟踪器：http ://www.openradar.me/33571214和https://forums.developer.apple.com/thread/88052

---

从基于 Web 的 Safari 体验到原生 Android 等。我在 Web 和原生中制作跨平台应用程序以谋生。使用 getUserMedia 会遇到几个潜在的问题。要检查导致潜在问题的原因，您应该遵循此列表以创建成功的应用程序。

您的问题具体是 1. 因为您没有成功查询 API。尽管如此，来自 getUserMedia 的 MediaCapture 应该会失败，因为在修复 1. 之后，您将遇到 2. 和 3.

1. API Polyfil - 始终确保包含最新的getUserMedia 适配器，以阻止 getUserMedia API 中的任何跨平台不一致。一些浏览器可能使用旧的 getUserMedia API（通过 'navigator.getUserMedia）并且尚未更新（使用 navigator.mediaDevices.getUserMedia）。您还应该检查此链接以获取其他所需的 polyfill。
2. 支持 - 检查CanIUse 以获得对您的目标受众的 getUserMedia 支持，并确保您有必要的后备。您的后备if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { return true; } else return false;返回 false，如果 getUserMedia 抛出和错误理想情况下应该是相同的。
3. 权限 - 即使您包含pwacompat这并不意味着浏览器窗口具有访问相机的权限。这是因为并非所有浏览器都是平等的！iOS 11 仅允许在原生 Safari 应用程序内访问 getUserMedia。但是，您无法在 iOS 11 WKWebView 或 UIWebViews 上访问 getUserMedia。当您将应用程序保存到主页时，它托管在 WKWebView 中。因此，在 Safari 内部运行的体验在保存到主屏幕或其他应用程序时将无法运行。令人困惑是吗？...！因此，如果您希望您的体验发挥作用，您需要在用户打开另一个应用程序时告诉他们，他们必须在 safari 中打开网站才能实时访问相机。没有办法解决这个问题。在 Android 上，应用程序制造商可以覆盖此权限并允许访问 getUserMedia。
4. 安全性 - HTTPS 网站只能访问摄像头（除非在本地主机上）。检查位置协议'(location.protocol === 'https:') ? true : false;'以查看是否允许您获得成功的MediaCapture请求

以下是我用于平台支持的测试链接： https ://github.com/marcusbelcher/wasm-asm-camera-webgl-test

在我的 GitHub 中，还有 Android 和 React-native getUserMedia 解决方案