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 obszar zainteresowania, a przeglądarka przycina wszystkie piksele poza tym obszarem.

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 zlecić przeglądarce wykonanie zadania w jej imieniu.

Informacje o zapisie obszaru

Utworzyłeś(-aś) witrynę z Dynamic Content™. To najlepsza aplikacja internetowa, z której użytkownicy nie mogą się oderwać, często pracując wspólnie. Kolejnym krokiem może być wbudowanie funkcji konferencji 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.

Główny obszar treści jest niebieski, a element iframe z innej domeny jest czerwony.

Nie tak szybko… Chyba nie chcesz, żeby ludzie oglądali własne filmy? 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ć odpowiednie 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 stronie znajduje się Element lub <div>, która zawiera główną treść. Nazwijmy go 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 wideokonferencji prosi przeglądarkę o przycięcie ścieżki do obszaru zdefiniowanego przez CropTarget, wywołując funkcję cropTo() na ścieżce wideo z własnym obrazem, przy użyciu celu przycięcia otrzymanego 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ługiwane, użyj:

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

Wyznaczanie celu uprawy

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 obiektu Element obiekt CropTarget można zserializować. Może on zostać przekazany do innego dokumentu za pomocą na przykład Window.postMessage().

Uwaga: przed wersją Chrome 106 CropTarget.fromElement(mainContentArea) odrzucała element, jeśli typ mainContentArea nie był <div> ani iframe.

Przycinanie

Podczas przechwytywania karty ścieżka wideo jest instancją BrowserCaptureMediaStreamTrack, która jest podklasą 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 to się uda, obietnica zostanie spełniona, gdy będzie można zagwarantować, że wszystkie kolejne klatki filmu będą składać się z pikseli, które mieszczą się w ramce 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. (zobacz 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 przechwytywaniem karty, a nie tylko w przypadku przechwytywania obrazu z kamery. Dlatego przed przycięciem ścieżki należy sprawdzić, czy użytkownik wybrał bieżącą kartę. Można to zrobić za pomocą funkcji chwytania uchwytu. Można też poprosić przeglądarkę o zachęcenie użytkownika do samodzielnego wykonania zdjęcia za pomocą preferCurrentTab.

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

Aby wrócić do nieprzyciętego stanu, wywołaj funkcję cropTo() z parametrem 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ą zarejestrowane.

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.

Zachowanie funkcji Region Capture w przypadku treści zasłoniętych.

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.

Aplikacja internetowa zawierająca slajdy i notatki dla prelegenta.
Udostępnianie notatek zdalnie jest wysoce niepożądane. Zdjęcie obszaru z wskazówką.

Pamiętaj, że w przypadku tworzenia kopii regionalnej nie ma żadnych gwarancji bezpieczeństwa. Gdy przekazujesz ścieżkę do innego dokumentu, odbiorca dokumentu może ją odzyskać i uzyskać dostęp do wszystkich pikseli przechwyconego elementu.

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

Prezentacja

Możesz wypróbować funkcję Region Capture, uruchamiając demonstrację na stronie Glitch. Sprawdź kod źródłowy.

Obsługa przeglądarek

Obsługa przeglądarek

• 104
• 104
• x
• x

Funkcja Region Capture jest dostępna w Chrome 104 tylko na komputerach.

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:

• Zdjęcie fragmentu będzie obsługiwać zrzuty 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 coś w funkcji Region Capture 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żywać funkcji Zrzut obszaru? Twoje publiczne wsparcie pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

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.