在 iPhone 上的 iOS Safari 中访问相机

Question

我有单页 Web 应用程序(SPA)，它可以在注册过程中验证用户。验证的一部分是捕获用户的自拍照。为此，我实现了以下代码的一个版本，以将相机输入到video网页上的元素中，然后我可以将图像采样到canvas.

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(localMediaStream => {
      if ('srcObject' in video) {
        video.srcObject = localMediaStream;
      } else {
        video.src = window.URL.createObjectURL(localMediaStream);
      }
      video.play();
    })
    .catch(err => {
      console.error(`Not available!!!!`, err);
    });

此代码基于 Wes Bos 的 JavaScript30 课程（#19 Unreal Webcam Fun）中的示例。你可以在这里尝试一下。

此代码似乎在大多数浏览器上都能正常工作，但iPhone 上 iOS 上的 Apple Safari 除外（例如：iPhone 12 Pro、iOS 14.7.1）。在 iPhone 上，我捕获了相机图像的第一帧，之后，该video元素显示一个黑色方块。

奇怪的是，它在 iPad 上运行良好（例如：iPad Pro（11 英寸）、iOS 14.7.1），但在我尝试过的任何 iPhone 上都运行不佳。

我在 StackOverflow 和其他地方看到了很多描述类似问题的讨论，但我还没有找到明确的答案，或者更好的解决方案。

有人有什么想法吗？

干杯，斯图尔特。

Answer 1

我在其他服务上发布了这个问题，并最终通过一个单独的 Discord 频道收到了一位名为Ravavyr的用户的回复。回复让我看到这篇文章，它提供了答案。

https://leemartin.dev/hello-webrtc-on-safari-11-e8bcb5335295

看来 iOS Safari 需要更多配置才能正常工作。

原始帖子链接的CodePen已更新，包含使其正常工作的更改。

// Fix for iOS Safari from https://leemartin.dev/hello-webrtc-on-safari-11-e8bcb5335295
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '')

我希望这对未来的读者有所帮助。