Safari：Webcamjs 无法准确捕获实时图像

Question

我正在开发一个监控系统，我们需要每 x 分钟拍摄一次用户的图像（在他们的许可下），并且网络摄像头 HTML 元素对用户不可见。

但是，有时拍摄的图像在 Safari 中会显示旧图像。我已经使用 webcamjs 创建了一个模拟应用程序，只有当网络摄像头节点从视口隐藏时，我才能在 safari 中重现此应用程序。

为了从视口隐藏网络摄像头元素，我使用了以下样式

#webcam{
  position: fixed;
  top: -10000px;
  left: -10000px;
}

重现步骤

规格

浏览器：Safari 版本 16.0 操作系统：MacOS 12.6 WebcamJS：1.0.26

• 在 Safari 中访问此网址。出于演示目的，我每 10 秒捕捉一次图像并将其渲染到 DOM 中。
• 您可以看到重复的图像渲染到 DOM 中

代码

function loadWebcamJS(){
        const webcam = document.getElementById("webcam");
        Webcam.set({
          width: 640,
          height: 480
        });
        Webcam.attach(webcam);
        Webcam.on('load', afterLoad);
      }
      const getTime = (d) =>
          `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;

      function snap(){
        Webcam.snap((dataURI) => {
          const results = document.getElementById('results');
          const date = new Date();
          const time = getTime(date);
          
          results.innerHTML += `
          <div class="image">
            <img src=${dataURI}
              alt="Snapped Image">
            <h4>${time}</h4>
          </div>
          
          `

        })
      }
      loadWebcamJS();
      function afterLoad(){
        
        setInterval(() => {
          snap();
        }, 1000 * 10); //Snap images every 10 seconds
        
      }

Answer 1

请注意，我不习惯这个库，所以也许他们有更干净的方法来处理这个问题。

Safari 上的自动播放似乎失败。您可以通过调用自己的 <video> 的 play() 方法来解决此问题，该库将附加到您的元素中。
请注意，如果您不希望该元素在页面中可见，则根本不需要将其包含在 DOM 中。我什至建议不要这样做，因为浏览器确实使用 IntersectionObserver 实例来暂停不可见的静音 <video> 元素。但他们不会暂停分离的 <video>。

所以你可以删除你的 <div> 和相关的 CSS，并且只做类似的事情

const webcam = document.createElement("div");
function loadWebcamJS() {
  Webcam.set({
    width: 640,
    height: 480
  });
  Webcam.attach(webcam);
  // force playing for Safari
  webcam.querySelector("video").play();
  Webcam.on("load", afterLoad);
}

更新了 codepen（gUM 不允许使用 StackSnippets）。