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

<div class =“post-text”itemprop =“text”>
  
    的
      编辑
    </强>
  
  
    简而言之：由于Apple故意阻止访问“安全问题”，因此不允许在原生Safari应用程序之外的iOS上使用的PWA或任何网站访问getUserMedia。这包括保存到主屏幕和/或在另一个应用程序（如Facebook）中查看的任何网站。同样的限制也适用于Android，但在Android上，应用程序开发人员可以要求获取相机权限并解决此问题。 （这意味着如果您是网站开发人员并且您需要相机功能，则需要请求Facebook等重建他们的应用以在Android上允许此操作）。
  
  
    在这里查看他们的错误跟踪器：
    <a href="http://www.openradar.me/33571214" rel="nofollow noreferrer">
      http://www.openradar.me/33571214
    </A>
     和
    <a href="https://forums.developer.apple.com/thread/88052" rel="nofollow noreferrer">
      https://forums.developer.apple.com/thread/88052
    </A>
  
  <HR />
  
    从基于Web的Safari体验到Native Android等。我在网络和原生中制作跨平台应用程序以谋生。 getUserMedia会遇到几个潜在的问题。要解决导致潜在问题的原因，您应该遵循此列表以创建成功的应用程序。
  
  
    您的问题具体是1.因为您没有成功查询API。然而，来自getUserMedia的MediaCapture应该会失败，因为在修复之后你会遇到2.和3。
  
  <OL>
    <LI>
      API Polyfil - 始终确保包含最新的
      <a href="https://github.com/webrtc/adapter" rel="nofollow noreferrer">
        getUserMedia适配器
      </A>
       停止getUserMedia API中的任何跨平台不一致。某些浏览器可能使用旧的getUserMedia API（通过'navigator.getUserMedia）并且尚未更新（使用navigator.mediaDevices.getUserMedia）。你也应该检查一下
      <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" rel="nofollow noreferrer">
        这个
      </A>
       链接其他所需的polyfill。
    </LI>
    <LI>
      支持 - 检查
      <a href="https://caniuse.com/#feat=stream" rel="nofollow noreferrer">
        CanIUse for getUserMedia
      </A>
       支持您的目标受众，并确保您有必要的后备。你的后备
       <code>
 if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { return true; } else return false;
 </code>
       返回false，如果getUserMedia抛出，理想情况下错误应该是相同的。
    </LI>
    <LI>
      权限 - 即使你包括
      <a href="https://github.com/GoogleChromeLabs/pwacompat" rel="nofollow noreferrer">
        pwacompat
      </A>
       这并不意味着浏览器窗口具有访问摄像头的权限。这是因为并非所有浏览器都是平等的！ iOS 11仅允许在本机Safari应用程序内访问getUserMedia。但是，您无法在iOS 11 WKWebView或UIWebViews上访问getUserMedia。将应用程序保存到主页时，它将托管在WKWebView中。因此，当保存到主屏幕或其他应用程序内时，在Safari内部工作的体验将不起作用。令人困惑的呃？..！因此，如果您希望自己的体验有效，则需要告诉用户当他们打开另一个应用程序时，他们必须在Safari中打开网站以进行实时摄像头访问。没有办法解决这个问题。在Android上，应用程序制造商可以覆盖此权限并允许访问getUserMedia。如果您使用macOS或Windows，则需要确保浏览器外壳还具有getUserMedia兼容性（例如Edge +，Chrome，Firefox等）
    </LI>
    <LI>
      安全性 - HTTPS网站只能访问摄像头（除非在本地主机上）。检查位置prototcol
       <code>
 '(location.protocol === 'https:') ? true : false;'
 </code>
       看看你是否被允许获得成功
      <a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API" rel="nofollow noreferrer">
        MediaCapture
      </A>
       请求
    </LI>
  </醇>
  
    以下是我用于平台支持的测试链接：

<a href="https://github.com/marcusbelcher/wasm-asm-camera-webgl-test" rel="nofollow noreferrer">
      https://github.com/marcusbelcher/wasm-asm-camera-webgl-test
    </A>
  
  
    在我的GitHub中还有Android和React-native getUserMedia解决方案
  
</DIV>