Lepsze udostępnianie kart dzięki funkcji Region Capture

François Beaufort

Elad Alon

Platforma internetowa pozwala już aplikacji internetowej na przechwytywanie ścieżki wideo bieżącej karty. Teraz jest ona wyposażona w funkcję przechwytywania regionów, która służy do przycinania 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.

Aplikacje internetowe mogły wcześniej przycinać ścieżki wideo „ręcznie”. Oznacza to, że aplikacje internetowe mogą bezpośrednio manipulować każdą klatką. To nie było ani obszerne, ani skuteczne. Funkcja Region Capture rozwiązuje te braki. Aplikacja internetowa może teraz instruować przeglądarkę, aby wykonała pracę w jej imieniu.

Informacje o funkcji przechwytywania regionów

Masz już witrynę z technologią Dynamic ContentTM. To najlepsza aplikacja internetowa, a użytkownicy nie mogą przestać jej używać – często współpracują z innymi. Następnym krokiem jest wbudowanie funkcji rozmów wirtualnych. Ty decydujesz, że tak się stało. Łączysz siły z dotychczasowym dostawcą usługi do rozmów wideo, umieszczając jego aplikację internetową jako element iframe z innych domen. 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 innych osób, prawda? Lepiej przyciąć ten fragment. Ale jak? Umieszczony element iframe nie ma informacji o tym, jakie treści udostępniasz i gdzie udostępniasz, więc nie może go przyciąć bez pewnej pomocy. Teoretycznie można podać zamierzone współrzędne. Co się jednak stanie, jeśli użytkownik zmieni rozmiar okna? Przewija widoczny obszar? Powiększanie czy pomniejszanie? Wchodzi w interakcję ze stroną w sposób, który powoduje zmianę układu? Nawet jeśli wyślesz nowe współrzędne do elementu iframe przechwytywania, problemy z czasem mogą nadal powodować błędne przycięcie klatek.

Użyjmy więc zdjęcia regionu. Na Twojej stronie znajduje się Element (może to być <div>) zawierający główną treść. Nazwijmy ją mainContentArea. Chcesz, aby aplikacja internetowa do obsługi rozmów wideo przechwytywała i udostępniała zdalnie obszar zdefiniowany przez ramkę ograniczającą tego elementu. Uzyskujesz więc wartość CropTarget z zakresu mainContentArea. Przekazujesz ten element (CropTarget) aplikacji internetowej do rozmów wideo. Po przycięciu ścieżki wideo za pomocą tego elementu (CropTarget) klatki na tej ścieżce składają się teraz tylko z pikseli, które mieszczą się w ramce ograniczającej mainContentArea. Jeśli mainContentArea zmieni rozmiar, kształt lub lokalizację, ścieżka wideo podąża za nią, nie wymagając żadnych dodatkowych danych z aplikacji internetowej.

Powtórzmy te czynności:

Aby zdefiniować element CropTarget w aplikacji internetowej, wywołaj funkcję CropTarget.fromElement(), podając jako dane wejściowe wybrany przez siebie element.

// 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 prowadzenia 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.

I gotowe! Gotowe.

Szczegółowa analiza

Wykrywanie cech

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

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

Uzyskiwanie elementu docelowego przycięcia

Skupmy się na elemencie o nazwie mainContentArea. Aby wyodrębnić z niego element CropTarget, wywołaj CropTarget.fromElement(mainContentArea). Jeśli się powiedzie, zwrócona obietnica zostanie zrealizowana za pomocą nowego obiektu CropTarget. W przeciwnym razie zostanie odrzucony, jeśli uzyskasz nieuzasadnioną liczbę CropTarget obiektów.

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

W przeciwieństwie do Element obiekt CropTarget podlega serializacji. Można je przekazać do innego dokumentu, na przykład za pomocą narzędzia Window.postMessage().

Przycinanie

Podczas przechwytywania kart ścieżka wideo jest tworzona jako BrowserCaptureMediaStreamTrack, który należy do podklasy MediaStreamTrack. Ta podklasa ujawnia cropTo(). Wywołaj funkcję track.cropTo(cropTarget), aby rozpocząć przycinanie do konturów mainContentArea (elementu, z którego pochodzi element 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 się nie uda, obietnica zostanie odrzucona. Może się tak zdarzyć, jeśli:

• CropTarget został wygenerowany w innej karcie. (na razie wkrótce).
• Wartość CropTarget została pobrana z elementu, który już nie istnieje.
• Utwór ma klony. (Patrz problem 1509418).
• Obecna ścieżka nie jest ścieżką wideo nagranych przez Ciebie. patrz niżej.

Metoda cropTo() jest widoczna w przypadku każdej ścieżki wideo utworzonej za pomocą karty, a nie tylko w przypadku samonagrania. Dlatego przed próbą przycięcia ścieżki warto sprawdzić, czy użytkownik wybrał bieżącą kartę. Użyj nicka przechwytywania. Możesz też poprosić przeglądarkę o zachęcenie użytkownika do samodzielnego zdjęcia za pomocą 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);

Wykluczanie i blokowanie treści

W przypadku przechwytywania regionów tylko pozycja i rozmiar sprawy docelowej, a nie z-index. Zostanie przechwycone piksele otaczające cel. Wykluczone części celu nie zostaną zarejestrowane.

Wynika to z faktu, że funkcja zdjęcia regionu jest przycinana. Jedną z alternatywnych rozwiązań, które w przyszłości będzie interfejs API, jest Przechwytywanie na poziomie elementu. oznacza to, że rejestruje tylko piksele powiązane z celem, bez względu na przesłonięcie. W takim interfejsie API obowiązują inne wymagania dotyczące bezpieczeństwa i prywatności niż proste przycinanie.

Bezpieczeństwo i prywatność

Funkcja przechwytywania regionów umożliwia aplikacji internetowej, która już rejestruje wszystkie piksele na karcie, dobrowolne usunięcie niektórych z tych pikseli. Jest to bezpieczne rozwiązanie, ponieważ nie można uzyskać żadnych nowych informacji.

Zapis regionów pozwala ograniczyć zakres informacji wysyłanych do uczestników zdalnych. Możesz na przykład udostępnić kilka slajdów, ale nie swoje 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ół przyciętego celu.

Prezentacja

Możesz wypróbować funkcję Region Capture, uruchamiając wersję demonstracyjną aplikacji Glitch. Bądź zapoznaj się z kodem źródłowym.

Obsługa przeglądarek

Funkcja rejestrowania regionów jest dostępna od Chrome 104 tylko na komputerach.

Co dalej?

Oto zapowiedź tego, czego można oczekiwać w najbliższej przyszłości, aby usprawnić udostępnianie ekranu w internecie:

• Funkcja przechwytywania regionów obsługuje zrzuty ekranu z innych kart.
• Skupienie warunkowe umożliwia przechwytywaniem ostrości aplikacji internetowej nakazującej przeglądarce włączenie fokusu na rejestrowanym obszarze wyświetlacza lub unikanie takiej zmiany ostrości.
• Możesz udostępnić interfejs Capture API na poziomie elementu.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chcą poznać Twoją opinię o funkcji Region Capture.

Opowiedz nam o projekcie

Czy jest coś, co w funkcji Zrób zdjęcie regionu nie działa zgodnie z oczekiwaniami? A może brakuje Ci metod lub właściwości, które pozwolą Ci zrealizować Twój pomysł? Masz pytanie lub komentarz na temat modelu zabezpieczeń?

• Zgłoś problem ze specyfikacją w repozytorium GitHub lub opisz swój problem.

Problem z implementacją?

Czy wystąpił błąd z implementacją Chrome? Czy implementacja różni się od specyfikacji?

• Zgłoś błąd na https://new.crbug.com. Postaraj się podać jak najwięcej szczegółów oraz proste instrukcje odtwarzania filmu. Usługa Glitch świetnie nadaje się do szybkiego i łatwego udostępniania poprawek.

Pokaż wsparcie

Czy planujesz użyć funkcji przechwytywania regionów? 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 na adres @ChromiumDev, aby poinformować nas, gdzie i jak go używasz.

Przydatne linki

• Specyfikacja
• Wyjaśnienie
• Ocena TAG
• Błąd Chromium
• Wpis na temat ChromeStatus.com

Podziękowania

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