Zwiększenie wydajności przechwytywania Webcam poprzez ukrycie video

Witam,
W mojej aplikacji react wykorzystuję React Webcam do przechwytywania obrazu z kamerki. Raz na jakiś czas używam getScreenshot funkcji, aby pobrać uri obrazu. Chciałbym dodać tryb zwiększonej wydajności, który ukryje obraz z kamerki na żywo (żeby nie musiało go co chwilę odświeżać) oraz robiło screenshota w wyznaczonym momencie. I teraz pytanie - w jaki sposób ukryć video z obrazem z kamerki, żeby:
a) ograniczyć zużycie procesora na odświeżanie go na stronie
b) nadal można było pobrać screenshota

Czy display none wystarczy? Czytałem o tym rozwiązaniu na SO, pisali, że zmiana display może być zasobożerna, jednak w mojej aplikacji raczej działo by się to raz podczas wybierania opcji minimalnego zużycia. Jakie jest najlepsze rozwiązanie dla mnie?

Gouda105 napisał(a):

a) ograniczyć zużycie procesora na odświeżanie go na stronie

Jakie masz zużycie procesora? Czy sprawdzasz zużycie procesora za pomocą profilera (np. używając Chrome Dev Tools)? Powinieneś, bo inaczej to będą spekulacje (które czasem będą sensowne, czasem nie).

W mojej aplikacji react wykorzystuję React Webcam do przechwytywania obrazu z kamerki.

Z tego co widzę, to ten React Webcam to po prostu wrapper na WebRTC. https://github.com/mozmorris/react-webcam/blob/master/src/react-webcam.tsx

Więc jeśli chcesz jakichś optymalizacji dokonywać, to najlepiej byłoby nie bawić się we wrappery, tylko napisać w czystym WebRTC, gdzie miałbyś więcej elastyczności.

Ideałem byłoby, gdyby dało się w ogóle pominąć canvas i łapać po prostu zdjęcie z kamery.

Tyko nie wiem, czy się tak da. Tutorial na MDN o tym, jak łapać zdjęcia, robi coś podobnego jak React Webcam, tj. łapie getUserMedia(), pobiera video stream, rysuje klatkę na canvas i dopiero z canvasa pobiera zdjęcie:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos
Czy więc użycie canvas to jest jedyne wyjście? Nie wiem.

Tym niemniej jeśli dobrze pamiętam, to element canvas nie musi wcale być dołączony do strony, można by utworzyć canvas w pamięci po prostu. Teraz patrzę w MDN i jest coś takiego jak OffscreenCanvas https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

pisali, że zmiana display może być zasobożerna, jednak w mojej aplikacji raczej działo by się to raz podczas wybierania opcji minimalnego zużycia. Jakie jest najlepsze rozwiązanie dla mnie?

Czy mierzysz to zużycie (albo czy widać gołym okiem spadek wydajności), czy tylko boisz się, że tak będzie? I gdzie tak pisali?

Zużycie sprawdzałem przy użyciu Chrome Task Manager. Moja aplikacja co 10 sekund wywołuje żądanie API fetch. Normalnie zużycie procesora wynosi 1,5%-4%, a kiedy api jest wywoływane podnosi się na 1-2 sekundy do 9-15%.. Spadku wydajności nie widzę w aplikacji, ale jej zadaniem jest działanie w tle, czyli im mniej procesora ciągnie tym lepiej.
Spodziewałem się, że z React webcam może być trudno, więc zabiorę się za pisanie własnego komponenetu. Czyli najlepiej ominąć canvas, a jeśli nie będzie się dało to przynajmniej go nie renderować?