Je développe un système de surveillance où nous devons prendre une image de l'utilisateur toutes les x minutes (avec sa permission) et rendre l'élément HTML de la webcam invisible pour l'utilisateur.

Cependant, les images capturées affichent parfois d'anciennes images dans Safari. J'ai créé une application fictive à l'aide de webcamjs et je ne peux reproduire cette application dans Safari que lorsque le nœud de la webcam est masqué dans la fenêtre.

Pour masquer l'élément webcam de la fenêtre, j'ai utilisé le style suivant

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

Étapes pour reproduire

Spécifications

Navigateur : Safari version 16.0 Système d'exploitation : MacOS 12.6 WebcamJS : 1.0.26

• Visitez cette URL dans Safari. À des fins de démonstration, je capture une image toutes les 10 secondes et la restitue dans le DOM.
• Vous pouvez voir les images en double rendues dans le DOM

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
        
      }