渐进式 Web 应用程序：访问 navigator.mediaDevices.getUserMedia 时出错？
Progressive Web App: Error Accessing navigator.mediaDevices.getUserMedia?
我的应用程序出于 webrtc 的目的访问相机，并且工作正常。
我正在使用 pwacompat from Google Labs 向我的网络应用程序添加 pwa 功能。
当 运行 应用程序作为 pwa 时，一切正常，直到我访问相机。然后我得到这个 console.log 错误：
getUserMedia failedObject {type: "error", msg: "undefined is not an object (evaluating 'navigat…"}
getUserMedia failed type: error msg: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')
我错过了什么？
更新 - 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 功能（!!!，但是我需要确认这一点，请参阅下面的工作报告）
但是 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 或在 iOS 上使用的本机 Safari 应用程序之外的任何网站将不允许访问 getUserMedia，因为 Apple 出于“安全问题”故意阻止访问。这包括在其他应用程序（如 Facebook）中查看的保存到主屏幕 and/or 的任何网站。同样的限制适用于 Android，但是在 Android 上，应用开发者可以请求相机权限并绕过这个问题。 （这意味着如果您是网站开发人员并且需要相机功能，则需要请求 Facebook 等重建他们的应用程序以在 Android 上允许此功能）。
在此处查看他们的错误跟踪器：http://www.openradar.me/33571214 and https://forums.developer.apple.com/thread/88052
从基于 Web 的 Safari 体验到原生 Android 等。我以开发跨平台的 Web 和原生应用程序为生。使用 getUserMedia 时会遇到几个潜在的问题。要找出导致潜在问题的原因，您应该遵循此列表以创建成功的应用程序。
您的问题具体是 1. 因为您没有成功查询 API。尽管如此，getUserMedia 中的 MediaCapture 应该会失败，因为在修复 1. 之后你会遇到 2. 和 3.
- API Polyfil - 始终确保为其他所需的 polyfill 添加最新的 getUserMedia adapter to stop any cross-platform inconsistencies in the getUserMedia API. Some browsers might use the old getUserMedia API (via 'navigator.getUserMedia) and have not been updated (to use navigator.mediaDevices.getUserMedia). You should also check this link。
- 支持 - 检查 CanIUse for getUserMedia 对您的目标受众的支持，并确保您有必要的后备支持。
if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { return true; } else return false; returns false 的回退，如果 getUserMedia 抛出错误，理想情况下应该是相同的。
- 权限 - 即使您包含 pwacompat 也不意味着浏览器 window 具有访问相机的权限。这是因为并非所有浏览器都是平等的！ iOS 11 仅允许在本机 Safari 应用程序内部访问 getUserMedia。但是，您无法在 iOS 11 WKWebView 或 UIWebViews 上访问 getUserMedia。当您将应用程序保存到主页时，它会托管在 WKWebView 中。因此，在 Safari 内部工作的体验在保存到主屏幕或其他应用程序时将无法工作。令人困惑吗？..！因此，如果您希望您的体验有效，您需要在用户打开另一个应用程序时告诉他们，他们必须在 safari 中打开网站以进行实时摄像头访问。没有办法解决这个问题。在 Android 上，应用程序开发者可以覆盖此权限并允许访问 getUserMedia。如果您使用 macOS 或 Windows，您需要确保浏览器 shell 也具有 getUserMedia 兼容性（例如 Edge+、Chrome、Firefox 等）
- 安全 - HTTPS 网站只能访问摄像头（除非在本地主机上）。检查位置协议
'(location.protocol === 'https:') ? true : false;' 以查看是否允许您获得成功的 MediaCapture 请求
以下是我用于平台支持的测试link：
https://github.com/marcusbelcher/wasm-asm-camera-webgl-test
在我的GitHub中还有Android和React-native getUserMedia解决方案
我的应用程序出于 webrtc 的目的访问相机，并且工作正常。
我正在使用 pwacompat from Google Labs 向我的网络应用程序添加 pwa 功能。
当 运行 应用程序作为 pwa 时，一切正常，直到我访问相机。然后我得到这个 console.log 错误：
getUserMedia failedObject {type: "error", msg: "undefined is not an object (evaluating 'navigat…"}
getUserMedia failed type: error msg: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')
我错过了什么？
更新 - 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 功能（!!!，但是我需要确认这一点，请参阅下面的工作报告）
但是 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 或在 iOS 上使用的本机 Safari 应用程序之外的任何网站将不允许访问 getUserMedia，因为 Apple 出于“安全问题”故意阻止访问。这包括在其他应用程序（如 Facebook）中查看的保存到主屏幕 and/or 的任何网站。同样的限制适用于 Android，但是在 Android 上，应用开发者可以请求相机权限并绕过这个问题。 （这意味着如果您是网站开发人员并且需要相机功能，则需要请求 Facebook 等重建他们的应用程序以在 Android 上允许此功能）。
在此处查看他们的错误跟踪器：http://www.openradar.me/33571214 and https://forums.developer.apple.com/thread/88052
从基于 Web 的 Safari 体验到原生 Android 等。我以开发跨平台的 Web 和原生应用程序为生。使用 getUserMedia 时会遇到几个潜在的问题。要找出导致潜在问题的原因，您应该遵循此列表以创建成功的应用程序。
您的问题具体是 1. 因为您没有成功查询 API。尽管如此，getUserMedia 中的 MediaCapture 应该会失败，因为在修复 1. 之后你会遇到 2. 和 3.
- API Polyfil - 始终确保为其他所需的 polyfill 添加最新的 getUserMedia adapter to stop any cross-platform inconsistencies in the getUserMedia API. Some browsers might use the old getUserMedia API (via 'navigator.getUserMedia) and have not been updated (to use navigator.mediaDevices.getUserMedia). You should also check this link。
- 支持 - 检查 CanIUse for getUserMedia 对您的目标受众的支持，并确保您有必要的后备支持。
if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { return true; } else return false;returns false 的回退，如果 getUserMedia 抛出错误，理想情况下应该是相同的。 - 权限 - 即使您包含 pwacompat 也不意味着浏览器 window 具有访问相机的权限。这是因为并非所有浏览器都是平等的！ iOS 11 仅允许在本机 Safari 应用程序内部访问 getUserMedia。但是，您无法在 iOS 11 WKWebView 或 UIWebViews 上访问 getUserMedia。当您将应用程序保存到主页时，它会托管在 WKWebView 中。因此，在 Safari 内部工作的体验在保存到主屏幕或其他应用程序时将无法工作。令人困惑吗？..！因此，如果您希望您的体验有效，您需要在用户打开另一个应用程序时告诉他们，他们必须在 safari 中打开网站以进行实时摄像头访问。没有办法解决这个问题。在 Android 上，应用程序开发者可以覆盖此权限并允许访问 getUserMedia。如果您使用 macOS 或 Windows，您需要确保浏览器 shell 也具有 getUserMedia 兼容性（例如 Edge+、Chrome、Firefox 等）
- 安全 - HTTPS 网站只能访问摄像头（除非在本地主机上）。检查位置协议
'(location.protocol === 'https:') ? true : false;'以查看是否允许您获得成功的 MediaCapture 请求
以下是我用于平台支持的测试link： https://github.com/marcusbelcher/wasm-asm-camera-webgl-test
在我的GitHub中还有Android和React-native getUserMedia解决方案