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
        
      }