Safari: Webcamjs erfasst Livebilder nicht genau

Question

Ich entwickle ein Überwachungssystem, bei dem wir alle x Minuten ein Bild des Benutzers machen müssen (mit seiner Erlaubnis) und das Webcam-HTML-Element für den Benutzer unsichtbar machen müssen.

Allerdings zeigen die aufgenommenen Bilder manchmal alte Bilder in Safari. Ich habe mit webcamjs eine Scheinanwendung erstellt und kann diese Anwendung in Safari nur reproduzieren, wenn der Webcam-Knoten im Ansichtsfenster ausgeblendet ist.

Um das Webcam-Element aus dem Ansichtsfenster auszublenden, habe ich den folgenden Stil verwendet

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

Schritte zur Reproduktion

Spezifikationen

Browser: Safari-Version 16.0 Betriebssystem: MacOS 12.6 WebcamJS: 1.0.26

• Besuchen Sie diese URL in Safari. Zu Demonstrationszwecken nehme ich alle 10 Sekunden ein Bild auf und rendere es im DOM.
• Sie können die doppelten Bilder sehen, die im DOM gerendert werden

Code

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