Webcamjs: Live images are not getting captured properly in safari

I'm developing a monitoring system where we need to take images of our user(under their permission ofc) every x minute and the webcam HTML element wouldn't be visible to the user.

But, sometimes the snapped images are giving old images in Safari. I've created a mock app with webcamjs and I could able to reproduce this in safari only when the webcam node is hidden from the viewport.

For hiding webcam element from viewport, I've used the following style

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

Steps to reproduce

Specifications

Browser: Safari version 16.0 OS: MacOS 12.6 WebcamJS: 1.0.26

• Access this url in Safari. For demo purpose, I've snapped the images every 10 seconds and rendered it into the DOM.
• You could see repeated images rendered into the 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
        
      }

from Webcamjs: Live images are not getting captured properly in safari