相机无法在 iOS 上运行，getUserMedia 出错

Posted 2023-02-23

【中文标题】相机无法在 iOS 上运行，getUserMedia 出错

【英文标题】：Camera not working on iOS, error in getUserMedia

【发布时间】：2018-09-27 17:45:59

【问题描述】：

我正在努力理解，我很确定问题不在于它告诉我的内容。

我正在使用 Vue.js 构建 PWA。当我初始化相机时，它在 ios (v11+) 上不起作用。我尝试了很多变体，但不知道后面发生了什么以及如何在 Safari 开发人员工具中正确调试已编译的代码（断点不起作用）。

代码如下：

async init () 

    // Media Device settings
    const constraints = 
      audio: false,
      video: 
        facingMode: (this.camera.mode === 'front') ? 'user' :  exact: 'environment' ,
        width: this.camera.size.width,
        height: this.camera.size.height
      
    

    try 
      const stream = await navigator.mediaDevices.getUserMedia(constraints)
      this.tracks = stream.getVideoTracks()
      this.video.srcObject = stream

      // Toggle the camera state
      this.toggleCamera(true)

      // Check for realtime validation
      if (this.realtime) 
        this.validatePhotoRealtime()
      
     catch (e) 
      this.handleErrorMessage(`getUserMedia error: $e.name`, e)
    
  

这是我在控制台窗口中得到的：

Trying to call getUserMedia from an insecure document.

知道如何调试这个错误吗？

==== 更新 ====

在本地主机上开发并且没有可用于开发环境的 https，执行 yarn server 并通过网络连接到服务 IP

我为 WebRTC 启用了一个选项：

但这无济于事。

【问题讨论】：

您需要通过 https 为应用程序提供服务。

@DigitalDrifter - 问题已更新！它以前工作过，具有与我的问题块中所示相同的配置。但它突然停止了。

你在混合http和https吗？当您这样做时，通常会发生这种错误，例如，主页在 https 上，并且您尝试在 http 路由下查找库，它会失败。

【参考方案1】：

不幸的是，当您将应用用作 PWA 时，Apple 不允许使用 WebRTC。 看看这个链接。

getUserMedia() in PWA on iOS 11.3.1

https://github.com/webrtc/samples/issues/933

【讨论】：

谢谢，我会检查它，但我相信它有效。我为此制作了一个 github repo 页面，在 iPhone 上查看。 danieltorscho.github.io/vue-pwa-camera 即使使用 manifest standalone 模式 - 它也有效。

我试了一下还是不行，可能是start_url有问题。当我将它作为 PWA 打开时，我得到一个 404。看看，如果你成功了，我很感兴趣！！

独立的相机支持已在 iOS 13.5.1 中修复。 bugs.webkit.org/show_bug.cgi?id=185448

【参考方案2】：

在上一版本的 safari 中，您可以从 Web 检查器窗口中允许不安全的站点。看到这个回复：https://***.com/a/59770868/2440064