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

Question

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

我正在使用pwacompat from Google Labs向我的Web应用添加pwa功能。

以pwa身份运行该应用程序时，一切正常，直到我访问相机。然后我收到这个console.log错误：

  

getUserMedia failedObject {type：“ error”，msg：“未定义不是对象（正在评估'navigat…”）}

     

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

我想念什么？

Answer 1

修改

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

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

---

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

您的问题特别是1.，因为您没有成功查询API。但是，由于修复了1.之后，您将遇到2.和3。因此，getUserMedia中的MediaCapture应该会失败。

1. API Polyfil-始终确保包含最新的getUserMedia adapter，以阻止getUserMedia API中的任何跨平台不一致之处。某些浏览器可能使用旧的getUserMedia API（通过'navigator.getUserMedia）并且尚未更新（以使用navigator.mediaDevices.getUserMedia）。您还应该检查this链接以获取其他所需的polyfill。
2. 支持-检查CanIUse for 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内部使用的体验将无法正常工作。令人困惑的嗯？因此，如果您希望自己的体验发挥作用，则需要告诉用户何时打开另一个应用程序，他们必须在野生动物园中打开网站才能实时访问摄像头。没有办法解决这个问题。在Android上，应用程序制造商可以覆盖此权限，并允许访问getUserMedia。如果您使用macOS或Windows，则需要确保浏览器外壳也具有getUserMedia兼容性（例如Edge +，Chrome，Firefox等）
4. 安全性-HTTPS网站只能访问摄像机（除非在localhost上）。检查位置协议'(location.protocol === 'https:') ? true : false;'，以查看是否允许您成功发送MediaCapture请求

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

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