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

Question

我的应用程序访问相机以用于webrtc,并且正常工作.

我正在使用pwacompatGoogle实验室pwa为我的网络应用添加功能.

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

getUserMedia failedObject {type:"error",msg:"undefined不是对象(评估'navigat ..."}

getUserMedia失败类型:错误消息:undefined不是对象(评估'navigator.mediaDevices.getUserMedia')

我错过了什么？

Answer 1

编辑

简而言之:由于Apple故意阻止访问"安全问题",因此不允许在原生Safari应用程序之外的iOS上使用的PWA或任何网站访问getUserMedia.这包括保存到主屏幕和/或在另一个应用程序(如Facebook)中查看的任何网站.同样的限制也适用于Android,但在Android上,应用程序开发人员可以要求获取相机权限并解决此问题.(这意味着如果您是网站开发人员并且您需要相机功能,则需要请求Facebook等重建他们的应用以在Android上允许此操作).

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

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

您的问题具体是1.因为您没有成功查询API.然而,来自getUserMedia的MediaCapture应该会失败,因为在修复之后你会遇到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.如果您使用macOS或Windows,则需要确保浏览器外壳还具有getUserMedia兼容性(例如Edge +,Chrome,Firefox等)
4. 安全性 - HTTPS网站只能访问摄像头(除非在本地主机上).检查位置prototcol '(location.protocol === 'https:') ? true : false;'以查看是否允许您获得成功的MediaCapture请求

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

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