Safari: Webcamjs가 실시간 이미지를 정확하게 캡처하지 않습니다.

Question

저는 x분마다 사용자의 이미지를 촬영하고(허가를 받아) 웹캠 HTML 요소를 사용자에게 보이지 않게 만드는 감시 시스템을 개발 중입니다.

그러나 캡처된 이미지가 Safari에서 오래된 이미지로 표시되는 경우가 있습니다. 나는 웹캠 js를 사용하여 모의 애플리케이션을 만들었고 웹캠 노드가 뷰포트에서 숨겨진 경우에만 Safari에서 이 애플리케이션을 재현할 수 있습니다.

뷰포트에서 웹캠 요소를 숨기기 위해 다음 스타일을 사용했습니다

으아아아

재현 단계

사양

브라우저: Safari 버전 16.0 운영 체제: MacOS 12.6 WebcamJS: 1.0.26

• Safari에서 이 URL을 방문하세요. 데모를 위해 10초마다 이미지를 캡처하여 DOM에 렌더링합니다.
• DOM에 렌더링된 중복 이미지를 볼 수 있습니다

코드

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

Answer 1

저는 이 라이브러리에 익숙하지 않기 때문에 이 라이브러리를 처리하는 더 깔끔한 방법이 있을 수도 있습니다.

Safari에서 자동 재생이 실패하는 것 같습니다. 라이브러리가 요소에 첨부할 고유한 <video> 的 play() 메서드를 호출하여 이 문제를 해결할 수 있습니다.
요소가 페이지에 표시되는 것을 원하지 않으면 해당 요소를 DOM에 전혀 포함할 필요가 없습니다. 브라우저는 IntersectionObserver 实例来暂停不可见的静音 <video> 元素。但他们不会暂停分离的 <video>를 사용하므로 이 작업을 수행하지 않는 것이 좋습니다.

따라서 <div> 및 관련 CSS를 제거하고

과 같은 작업을 수행할 수 있습니다. 으아악

업데이트된 코드펜(gUM에서는 StackSnippets 사용을 허용하지 않습니다).