在 iPhone 上的 iOS Safari 中访问相机

I have 单页网络应用程序（SPA）那个verifies用户作为注册过程的一部分。验证的一部分是捕获selfie用户的。为此，我实现了以下代码的一个版本来获取camera输入到一个video网页上的元素，然后我可以从中sample图像转化为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）中的示例。你可以尝试一下here https://codepen.io/s5b/project/editor/ZmqneL.

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

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

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

有人有什么想法吗？

干杯，斯图尔特。

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

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

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

The CodePen https://codepen.io/s5b/project/editor/ZmqneL原始帖子中的链接已更新，以包含使其发挥作用的更改。

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

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