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 にレンダリングされた重複画像が表示されます

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

P粉144705065 · Answer

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

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