Safari: Webcamjs がライブ画像を正確にキャプチャしない

Question

私は監視システムを開発しています。このシステムでは、x 分ごとにユーザーの画像を撮影し (ユーザーの許可を得て)、Web カメラの HTML 要素をユーザーに非表示にする必要があります。

ただし、Safari ではキャプチャした画像に古い画像が表示されることがあります。 webcamjs を使用してモック アプリケーションを作成しました。Webcam ノードがビューポートから非表示になっている場合にのみ、このアプリケーションを Safari で再現できます。

ウェブカメラ要素をビューポートから非表示にするために、次のスタイルを使用しました

リーリー ＃＃＃再現する手順＃＃＃ ＃＃＃＃＃＃仕様＃＃＃＃＃＃

ブラウザ: Safari バージョン 16.0 オペレーティングシステム: MacOS 12.6 ウェブカメラJS: 1.0.26

Safari でこの URL にアクセスします。デモンストレーションの目的で、10 秒ごとに画像をキャプチャし、DOM にレンダリングします。

DOM にレンダリングされた重複画像が表示されます

＃＃＃コード＃＃＃ ああああ

Answer 1

私はこのライブラリに慣れていないので、これを処理するもっときれいな方法があるかもしれないことに注意してください。

Safari では自動再生が失敗しているようです。この問題を回避するには、要素にアタッチされる <video> ライブラリの独自の play() メソッドを呼び出します。
要素をページに表示したくない場合は、その要素を DOM に含める必要はまったくないことに注意してください。ブラウザは IntersectionObserver インスタンスを使用して、非表示のミュート <video> 要素を一時停止するため、これを行わないことをお勧めします。ただし、分割された <video> は一時停止しません。

したがって、<div> と関連する CSS を削除して、

のようなことを実行するだけです。 リーリー

コードペンを更新しました (gUM では StackSnippets の使用が許可されていません)。