在 iPhone 上的 iOS Safari 中访问相机

Question

我有 Single Page Webapp (SPA) 验证用户作为注册过程的一部分。验证的一部分是捕获用户的 selfie。为此，我实现了以下代码的一个版本，以将 camera 输入到网页上的 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）。你可以试试here.

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

奇怪的是，它在 iPad 上运行良好（示例：iPad Pro（11 英寸），iOS 14.7.1），但在任何 iPhone 我试过了。

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

有人知道吗？

干杯，S t u a r t。

Answer 1

我在其他服务上 post 编辑了这个问题，最终通过一个单独的 Discord 收到了一个名为 Ravavyr 的用户的回复渠道。回复将我指向这篇提供答案的文章。

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

似乎 iOS Safari 需要更多配置才能正常工作。

从原始 post 链接的 CodePen 已经更新，包括使其工作的更改。

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

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

在 iPhone 上的 iOS Safari 中访问相机

Accessing the camera in iOS Safari on an iPhone

javascript

iphone

safari

camera

ios