渐进式Web应用程序：访问navigator.mediaDevices.getUserMedia时出错？ [英] Progressive Web App: Error Accessing navigator.mediaDevices.getUserMedia?

问题描述

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

My app accesses the camera for purposes of webrtc, and works correctly.

我正在使用 pwacompat 来自Google Labs ，将 pwa 功能添加到我的网络应用中。

I'm using pwacompat from Google Labs to add pwa features to my web app.

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

When running the app as a pwa, everything works fine until I access the camera. Then I get this console.log error:

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

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

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

getUserMedia failed type: error msg: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')

我缺少什么？

推荐答案

更新- 14/09/2019

iOS 13和Safari 13上的Safari有所更改： https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

There are changes to Safari on iOS 13 & Safari 13: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

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

SFSafariViewController has gained getUserMedia functionality (!!!, however I need to confirm this, please see below for reports of it working)

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

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

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

However WKWebView does not seem to gain getUserMedia functionality:

• https://bugs.chromium.org/p/chromium/issues/detail?id=752458


• < a href = https://bugs.webkit.org/show_bug.cgi?id=185448 rel = nofollow noreferrer> https://bugs.webkit.org/show_bug.cgi?id=185448

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

iOS 13和Safari 13发行说明：

iOS 13 and Safari 13 release notes:

• 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

• 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

编辑

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

In short: A PWA or any website being used on iOS outside of the native Safari app will not be allowed access to getUserMedia as Apple is deliberately blocking access for "Security concerns". This includes any websites saved to the homescreen and/or viewed inside another application such as Facebook. The same restrictions apply to Android however on Android the app developer can ask for Camera permissions and get around this. (This means if you are a website developer and you need camera functionality, you will need to ask Facebook, etc, to rebuild their app to allow this on Android).

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

See their bug tracker here: http://www.openradar.me/33571214 and https://forums.developer.apple.com/thread/88052

从基于Web的Safari体验到Native Android等，我在网络和本地人为生。 getUserMedia会遇到几个潜在的问题。要锻炼可能导致潜在问题的原因，您应该遵循此列表以创建成功的应用程序。

From web based Safari experiences to Native Android, etc. I make crossplatform Apps in web and native for a living. There are several potential problems you will encounter with getUserMedia. To workout what is causing potential problems you should follow this list in order to create a successful application.

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

Your problem is specifically 1. because you are not successfully querying the API. Nevertheless the MediaCapture from getUserMedia should fail because after fixing 1. you will encounter 2. and 3.

1. API Polyfil-始终确保您包括最新的 getUserMedia适配器，以阻止getUserMedia API中的任何跨平台不一致之处。某些浏览器可能会使用旧的getUserMedia API（通过navigator.getUserMedia），而尚未更新（以使用navigator.mediaDevices.getUserMedia）。您还应该检查此链接以了解其他所需的polyfill。


2. 支持-检查 CanIUse for getUserMedia 对目标的支持观众，并确保您有必要的后备广告。您对 if（navigator&& navigator.mediaDevices&& navigator.mediaDevices.getUserMedia）的后备情况{返回true; } else返回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网站只能访问摄像头（除非在本地主机上）。检查位置协议（location.protocol ===‘https：’）吗？ true：false;'以查看是否允许您成功获得 MediaCapture 请求

1. API Polyfil - Always make sure you include the latest 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 for other needed polyfills.
2. Support - Check CanIUse for getUserMedia support for your target audience and make sure you have the necessary fallbacks. Your fallback for if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { return true; } else return false; returns false, and if getUserMedia throws and error ideally should be the same.
3. Permissions - Even though you include pwacompat it does not mean the browser window has the permissions to access the camera. This is because not all browsers are equal! iOS 11 allows getUserMedia access inside of the native Safari app only. However you cannot access getUserMedia on iOS 11 WKWebView or UIWebViews. When you save an app to the homepage it is hosted inside a WKWebView. Thus an experience which works inside of Safari will not work when saved to the homescreen or inside another application. Confusing eh?..! Thus if you want your experience to work you need to tell the user when they open upside another app that they must open the website in safari for real-time camera access. There is no way around this. On Android an app maker can override this permission and allow access to getUserMedia. If you use macOS or Windows you need to make sure the browser shell also has getUserMedia compatibility (e.g. Edge+, Chrome, Firefox, etc)
4. Security - HTTPS websites can only access the camera (unless on localhost). Check the location prototcol '(location.protocol === 'https:') ? true : false;' to see if you are allowed to get a successful MediaCapture request

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

The following is a test link I use for platform support: https://github.com/marcusbelcher/wasm-asm-camera-webgl-test

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

In my GitHub there are also Android and React-native getUserMedia solutions

这篇关于渐进式Web应用程序：访问navigator.mediaDevices.getUserMedia时出错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！