iOS 设备上 HTML5 JavaScript 视频播放摄像头视频流解决方案：用户交互式播放

2024-03-05 21:32:42

iOS 设备上的 HTML5 JavaScript 视频无法触发“playing”事件

问题根源

在开发 HTML5 应用程序时，许多开发人员遇到这样的问题：在计算机上启动用户摄像头时，“playing”事件可以正常触发，但在 iOS 设备上（无论是使用 Chrome 还是 Safari），该事件却无法触发。这使得摄像头视频流无法播放，导致应用程序出现问题。

解决方案

经过一番探索，问题的根源在于 iOS 设备的安全机制。为了保护用户隐私，iOS 需要用户明确同意才能访问摄像头。因此，在 iOS 设备上播放摄像头视频流需要一个额外的用户交互步骤。

解决方法非常简单：在 iOS 设备上，用户需要点击视频元素才能播放摄像头视频流。

修改后的代码

要实现这一解决方案，可以在代码中添加一个 onclick 事件监听器，如下所示：

video.onclick = () => video.play();

当用户点击视频元素时，此事件监听器会触发 video.play()，从而开始播放摄像头视频流。

示例代码

以下是一个完整的示例代码，演示了如何在 iOS 设备上启动摄像头并播放视频流：

<!DOCTYPE html>

<html>
  <head></head>
  <body onload="pageLoaded()">
    <script>
      async function startCamera() {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: { facingMode: 'user' },
          audio: false,
        });
        if (!stream) return;
        const video = document.createElement('video');
        video.style.width = '400px';
        video.style.height = '400px';
        video.style.border = '1px solid red';
        document.body.appendChild(video);

        video.srcObject = stream;
        video.oncanplay = (ev) => {
          console.log('video can play');
          video.oncanplay = '';
        };
        video.onplaying = (ev) => {
          console.log('video is playing');
        };
        video.onclick = () => video.play();
      }

      function pageLoaded() {
        startCamera();
      }
    </script>
  </body>
</html>