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）。