Safari: Webcamjs tidak menangkap imej langsung dengan tepat

Question

Saya sedang membangunkan sistem pengawasan di mana kami perlu mengambil imej pengguna setiap x minit (dengan kebenaran mereka) dan menjadikan elemen HTML kamera web tidak kelihatan kepada pengguna.

Namun, kadangkala imej yang ditangkap menunjukkan imej lama dalam Safari. Saya telah mencipta aplikasi olok-olok menggunakan webcamjs dan saya boleh mengeluarkan semula aplikasi ini dalam safari hanya apabila nod webcam disembunyikan daripada port pandangan.

Untuk menyembunyikan elemen kamera web daripada port pandangan, saya menggunakan gaya berikut

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

Langkah untuk membiak

Spesifikasi

Pelayar: Safari versi 16.0 Sistem pengendalian: MacOS 12.6 WebcamJS: 1.0.26

• Lawati URL ini dalam Safari. Untuk tujuan demonstrasi, saya menangkap imej setiap 10 saat dan memaparkannya ke dalam DOM.
• Anda boleh melihat imej pendua yang diberikan ke dalam DOM

Kod

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

Sila ambil perhatian bahawa saya tidak biasa dengan perpustakaan ini, jadi mungkin mereka mempunyai cara yang lebih bersih untuk menangani perkara ini.

Automain nampaknya gagal di Safari. Anda boleh menyelesaikan masalah ini dengan memanggil kaedah <video> 的 play() anda sendiri, yang akan dilampirkan oleh perpustakaan pada elemen anda.
Ambil perhatian bahawa jika anda tidak mahu elemen itu kelihatan pada halaman, anda tidak perlu memasukkannya dalam DOM sama sekali. Saya juga akan mengesyorkan agar tidak melakukan ini kerana pelayar memang menggunakan IntersectionObserver 实例来暂停不可见的静音 <video> 元素。但他们不会暂停分离的 <video>.

Jadi anda boleh mengalih keluar <div> anda dan CSS yang berkaitan dan hanya melakukan sesuatu seperti

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);
}

Pen kod yang dikemas kini (gUM tidak membenarkan penggunaan StackSnippet).