Safari : Webcamjs ne capture pas avec précision les images en direct

Question

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
        
      }

Answer 1

Veuillez noter que je ne suis pas habitué à cette bibliothèque, alors peut-être qu'ils ont une façon plus propre de gérer cela.

La lecture automatique semble échouer sur Safari. Vous pouvez résoudre ce problème en appelant votre propre méthode <video> 的 play(), que la bibliothèque attachera à votre élément.
Notez que si vous ne souhaitez pas que l'élément soit visible sur la page, vous n'avez pas du tout besoin de l'inclure dans le DOM. Je recommanderais même de ne pas le faire puisque les navigateurs utilisent IntersectionObserver 实例来暂停不可见的静音 <video> 元素。但他们不会暂停分离的 <video>.

Vous pouvez donc supprimer votre <div> et le CSS associé et simplement faire quelque chose comme

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 mis à jour (gUM n'autorise pas l'utilisation de StackSnippets).