Lepsze udostępnianie kart dzięki funkcji Region Capture

François Beaufort

Elad Alon

Platforma internetowa umożliwia już aplikacji internetowej rejestrowanie ścieżki wideo z bieżącej karty. Teraz zawiera on mechanizm Region Capture, który umożliwia przycinanie tych ścieżek wideo. Aplikacja internetowa wyznacza część bieżącej karty jako swój obszar zainteresowań i przeglądarka przycina wszystkie piksele poza ten obszar.

Wcześniej aplikacje internetowe mogły przycinać ścieżki wideo „ręcznie”. Oznacza to, że mogły one bezpośrednio manipulować każdym pojedynczym kadrem. Nie był on ani wystarczająco wydajny, ani niezawodny. Funkcja rejestrowania regionu eliminuje te niedociągnięcia. Aplikacja internetowa może teraz poprosić przeglądarkę o wykonanie zadania w jej imieniu.

Informacje o zapisie obszaru

Udało Ci się stworzyć witrynę z Dynamic ContentTM. To najlepsza aplikacja internetowa, a użytkownicy nie mogą przestać jej używać – często przy współpracy. Następnym krokiem jest wbudowanie funkcji rozmów wirtualnych. Postanawiasz to zrobić. Współpracujesz z dostawcą usług rozmów wideo, umieszczając jego aplikację internetową jako element iframe w innej domenie. Aplikacja internetowa do rozmów wideo rejestruje bieżącą kartę jako ścieżkę wideo i przesyła ją do uczestników zdalnych.

Nie za szybko... Przecież nie chcesz chyba przesyłać filmów z filmów innych użytkowników, prawda? Lepiej przytnij tę część. Ale jak? Osadzony element iframe nie wie, jakie treści i gdzie chcesz wyświetlić, więc nie może przyciąć obrazu bez pomocy. Teoretycznie można przekazać żądane współrzędne. Co się jednak stanie, jeśli użytkownik zmieni rozmiar okna? Przewija widoczny obszar? Powiększanie lub pomniejszanie? Czy użytkownik wchodzi w interakcję ze stroną w sposób, który powoduje zmianę układu? Nawet jeśli prześlesz nowe współrzędne do iframe do przechwytywania, problemy z synchronizacją mogą spowodować nieprawidłowe przycinanie niektórych klatek.

Użyjemy więc zrzutu obszaru ekranu. Na Twojej stronie znajduje się Element (może to być <div>) zawierający główną treść. Nazwijmy ją mainContentArea. Chcesz, aby aplikacja internetowa do rozmów wideo rejestrowała i udostępniała zdalnie obszar określony przez pole ograniczające tego elementu. W ten sposób uzyskujesz CropTarget z mainContentArea. Przekazujesz ten CropTarget do internetowej aplikacji do rozmów wideo. Po przycięciu ścieżki wideo za pomocą tego CropTarget ramki na tej ścieżce zawierają tylko piksele, które znajdują się w ramce ograniczającej mainContentArea. Jeśli mainContentArea zmieni rozmiar, kształt lub lokalizację, ścieżka wideo będzie się zmieniać razem z nim, bez konieczności wprowadzania dodatkowych danych przez żadną z aplikacji internetowych.

Powtórz te czynności:

W swojej aplikacji internetowej definiujesz CropTarget, wywołując funkcję CropTarget.fromElement() z elementem wybranym przez siebie jako dane wejściowe.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Przekazujesz CropTarget do aplikacji internetowej do rozmów wideo.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

Aplikacja internetowa do obsługi rozmów wideo prosi przeglądarkę o przycięcie ścieżki do obszaru zdefiniowanego przez funkcję CropTarget, wywołując funkcję cropTo() na samodzielnie nagranej ścieżce wideo z docelowym przycięciem otrzymanym z głównej aplikacji internetowej.

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

Et voilà! Gotowe.

Szczegółowa analiza

Wykrywanie cech

Aby sprawdzić, czy CropTarget.fromElement() jest obsługiwana, użyj:

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

Uzyskiwanie elementu docelowego przyrodniczego

Skupmy się na elemencie o nazwie mainContentArea. Aby uzyskać z niego wartość CropTarget, wywołaj funkcję CropTarget.fromElement(mainContentArea). W przypadku powodzenia zwrócona obietnica zostanie rozwiązana za pomocą nowego obiektu CropTarget. W przeciwnym razie zostanie odrzucony, jeśli wyemitujesz nieuzasadnione ilości obiektów CropTarget.

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

W przeciwieństwie do Element obiekt CropTarget podlega serializacji. Może on zostać przekazany do innego dokumentu za pomocą na przykład Window.postMessage().

Przycinanie

Podczas przechwytywania kart ścieżka wideo jest tworzona jako BrowserCaptureMediaStreamTrack, który należy do podklasy MediaStreamTrack. Ta podklasa udostępnia cropTo(). Wywołaj funkcję track.cropTo(cropTarget), aby rozpocząć przycinanie do kontur elementu mainContentArea (elementu, z którego pochodzi obiekt docelowy cropTarget).

Jeśli obietnica się powiedzie, obietnica zostanie zrealizowana, gdy będzie można mieć pewność, że wszystkie kolejne klatki filmu będą składać się z pikseli mieszczących się w ramce ograniczającej mainContentArea.

Jeśli nie uda się tego zrobić, obietnica zostanie odrzucona. Sytuacja taka może mieć miejsce, jeśli:

• CropTarget została wyemitowana na innej karcie. (Na razie bądź na bieżąco).
• Wartość CropTarget została utworzona na podstawie elementu, który już nie istnieje.
• Utwór ma klony. (Patrz problem 1509418).
• Bieżąca ścieżka nie jest ścieżką wideo z własnym filmem (patrz poniżej).

Metoda cropTo() jest dostępna na dowolnym ścieżce wideo z przechwytem karty, a nie tylko w przypadku przechwytu własnego. Dlatego przed przycięciem ścieżki należy sprawdzić, czy użytkownik wybrał bieżącą kartę. Można to zrobić za pomocą funkcji Zapisywanie uchwytu. Można też poprosić przeglądarkę, aby zachęcała użytkownika do samodzielnego wykonania zdjęcia, używając preferCurrentTab.

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

Aby przywrócić nieprzycięty stan, wywołaj funkcję cropTo() za pomocą null.

// Stop cropping.
await track.cropTo(null);

Zasłonięcie i zasłonięte treści

W przypadku funkcji Region Capture liczy się tylko pozycja i rozmiar celu, a nie indeks Z. Piksele zakrywające obiekt zostaną uchwycone. Zasłonięte części obiektu nie zostaną uwzględnione.

Jest to konsekwencja tego, że zrzut obszaru ekranu jest w istocie przycinaniem. Jedną z możliwości, która będzie miała własny interfejs API, jest przechwytywanie na poziomie elementów. Polega ono na przechwytywaniu tylko pikseli powiązanych z celem, niezależnie od zasłonięcia. Taki interfejs API ma inny zestaw wymagań dotyczących bezpieczeństwa i prywatności niż w przypadku zwykłego przycinania.

Bezpieczeństwo i prywatność

Funkcja przechwytywania regionu umożliwia aplikacji internetowej, która już obserwuje wszystkie piksele na karcie, dobrowolne usunięcie niektórych z nich. Jest to całkowicie bezpieczne, ponieważ nie można uzyskać żadnych nowych informacji.

Za pomocą funkcji rejestrowania obszaru możesz ograniczyć informacje wysyłane do uczestników zdalnych. Możesz na przykład udostępnić slajdy, ale nie notatki.

Pamiętaj, że funkcja przechwytywania regionów nie zapewnia żadnej gwarancji bezpieczeństwa. Gdy przekazujesz ścieżkę do innego dokumentu, dokument odbierający może cofnąć przycięcie ścieżki i uzyskać dostęp do wszystkich pikseli przechwyconych kart.

Chrome rysuje niebieskie obramowanie wokół krawędzi przechwyconych kart. Podczas przycinania Chrome zwykle rysuje niebieskie obramowanie wokół przycinanego obiektu.

Prezentacja

Funkcję Region Capture możesz wypróbować, uruchamiając prezentację na stronie Glitch. Koniecznie zapoznaj się z kodem źródłowym.

Obsługa przeglądarek

Funkcja przechwytywania regionów jest dostępna od Chrome 104 tylko na komputerze.

Co dalej?

Oto kilka nowości, które pojawią się w najbliższej przyszłości i zwiększają użyteczność udostępniania ekranu w internecie:

• Funkcja przechwytywania regionów obsługuje zrzuty ekranu z innych kart.
• Warunkowe skupienie pozwoli aplikacji do przechwytywania obrazu polecić przeglądarce przełączenie fokusa na przechwyconą powierzchnię wyświetlacza lub uniknięcie takiej zmiany.
• Może zostać udostępniony interfejs Capture API na poziomie elementu.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chce poznać Twoje wrażenia związane z funkcja Capture Region.

Opowiedz nam o projektowaniu

Czy jest coś, co w funkcji Zrób zdjęcie regionu nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do wdrożenia swojego pomysłu? Masz pytania lub uwagi dotyczące modelu zabezpieczeń?

• Zgłoś problem ze specyfikacją w repozytorium GitHub lub podziel się opinią na temat istniejącego problemu.

Problem z implementacją?

Czy znalazłeś/znalazłaś błąd w implementacji Chrome? A może implementacja różni się od specyfikacji?

• Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów i proste instrukcje odtwarzania problemu. Glitch to świetne narzędzie do szybkiego i łatwego udostępniania informacji o powtarzających się problemach.

Pokaż pomoc

Czy planujesz użyć funkcji Zrzut obszaru? Twoja publiczna pomoc pomaga zespołowi Chrome ustalać priorytety funkcji i pokazywać innym dostawcom przeglądarek, jak ważne jest, aby wspierać te funkcje.

Wyślij tweeta do @ChromiumDev i powiedz nam, gdzie i jak z niego korzystasz.

Przydatne linki

• Specyfikacja
• Wyjaśnienie
• Sprawdzanie tagów
• Błąd w Chromium
• Wpis na stronie ChromeStatus.com

Podziękowania

Dziękujemy Joe Medley za sprawdzenie tego artykułu.