Platforma internetowa umożliwia już aplikacji internetowej przechwytywanie ścieżki wideo z bieżącej karty. Obecnie jest ona wyposażona w funkcji przechwytywanie regionu, która służy do przycinania ścieżek wideo. Aplikacja internetowa wyznacza część bieżącej karty jako interesujący ją obszar, a przeglądarka usuwa wszystkie piksele poza tym obszarem.
Aplikacje internetowe mogły wcześniej przycinać ścieżki wideo „ręcznie”. Oznacza to, że aplikacje internetowe mogły bezpośrednio modyfikować każdą klatkę. Nie było to ani wydajne, ani wydajne. Funkcja Przechwytywanie regionów danych eliminuje te braki. Aplikacja internetowa może teraz polecić przeglądarce wykonanie zadania w jej imieniu.
Informacje o przechwytywaniu regionu
Masz już stronę internetową z funkcją Dynamic ContentTM. To najlepsza aplikacja internetowa na świecie, której użytkownicy po prostu nie mogą przestać z niej korzystać, często wspólnie. Kolejnym krokiem jest dodanie możliwości prowadzenia wirtualnych rozmów wideo. Decydujesz się na to. Współpracujesz z dotychczasowym dostawcą usługi rozmów wideo i umieszczasz jego aplikację internetową jako element iframe z innych domen. Aplikacja internetowa do obsługi rozmów wideo przechwytuje bieżącą kartę jako ścieżkę wideo i przesyła ją do uczestników zdalnych.
Nie tak szybko... Naprawdę nie chcesz przesyłać do nich własnych filmów, prawda? Lepiej przyciąć ten fragment. Ale jak? Osadzony element iframe nie wie, jakie treści i gdzie udostępniasz, dlatego nie może przyciąć obrazu bez pomocy. Możesz teoretycznie przekazywać zamierzone współrzędne. Ale co się stanie, jeśli użytkownik zmieni rozmiar okna? Przewinąć widoczny obszar? Powiększać lub pomniejszać? 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 prowadzić do błędnie przyciętych klatek.
Użyjmy w takim razie zdjęcia regionu. Na Twojej stronie znajduje się element Element (może to być element <div>), który zawiera 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 CropTarget z mainContentArea. Ten element (CropTarget) jest przekazywany do aplikacji internetowej do wideokonferencji. Po przycięciu ścieżki wideo za pomocą tego komponentu (CropTarget) klatki na tej ścieżce będą teraz składać się tylko z pikseli znajdujących się w ramce ograniczającej mainContentArea. Jeśli mainContentArea zmieni rozmiar, kształt lub lokalizację, ścieżka wideo będzie podążać za tym, nie wymagając przy tym żadnych dodatkowych działań z aplikacji internetowej.
Powtórzmy te kroki:
Definiujesz element CropTarget w aplikacji internetowej, wywołując metodę CropTarget.fromElement() z wybranym przez Ciebie elementem jako danymi wejściowymi.
// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
Przekazujesz dokument 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 rozmów wideo prosi przeglądarkę o przycięcie ścieżki do obszaru zdefiniowanego przez CropTarget, wywołując cropTo() w przypadku ścieżki wideo nagranej samodzielnie z miejscem docelowym przycięcia pobranym 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.
Gotowe! Gotowe.
Szczegółowa analiza
Wykrywanie funkcji
Aby sprawdzić, czy funkcja CropTarget.fromElement() jest obsługiwana, użyj:
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
Uzyskiwanie celu CropTarget
Skupmy się na elemencie o nazwie mainContentArea. Aby uzyskać z niego CropTarget, wywołaj funkcję CropTarget.fromElement(mainContentArea). Jeśli operacja się uda, zwrócona obietnica zostanie rozpatrzona za pomocą nowego obiektu CropTarget. W przeciwnym razie zostanie ona odrzucona, jeśli wygenerujesz nieuzasadnioną liczbę obiektów CropTarget.
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
W przeciwieństwie do obiektu Element obiekt CropTarget jest możliwy do sserializowania. Można go na przykład przekazać do innego dokumentu za pomocą Window.postMessage().
Przycinanie
Podczas przechwytywania kart ścieżka wideo jest tworzona jako instancja BrowserCaptureMediaStreamTrack, która jest podklasą klasy MediaStreamTrack. Ta podklasa ujawnia cropTo(). Wywołaj track.cropTo(cropTarget), aby rozpocząć przycinanie do konturu elementu mainContentArea (elementu, z którego pochodzi funkcja cropTarget).
Jeśli operacja się uda, obietnica zostanie zrealizowana, gdy będzie można zagwarantować, że wszystkie kolejne klatki wideo będą składały się z pikseli znajdujących się w ramce ograniczającej element mainContentArea.
Jeśli się nie powiedzie, obietnica zostanie odrzucona. Dzieje się tak, jeśli:
- Element
CropTargetzostał wygenerowany w innej karcie. (Prosimy o cierpliwość). - Wartość
CropTargetpochodzi z elementu, który już nie istnieje. - Utwór ma klony. (patrz numer 1509418).
- Bieżąca ścieżka wideo nie zawiera samodzielnie nagranych ścieżek wideo; patrz poniżej.
Metoda cropTo() jest widoczna w przypadku każdej ścieżki wideo nagranej za pomocą karty, a nie tylko przy robieniu zdjęć samodzielnie. Dlatego przed próbą przycięcia ścieżki warto sprawdzić, czy użytkownik wybrał bieżącą kartę. Możesz to zrobić za pomocą nicka przechwytywania. Możesz też poprosić przeglądarkę o zachęcenie użytkownika do zrobienia zdjęcia samodzielnie 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 cropTo(), używając metody null.
// Stop cropping.
await track.cropTo(null);
Umieszczanie treści
W przypadku przechwytywania regionu brana jest pod uwagę tylko pozycja i rozmiar obiektu docelowego, a nie wartość z-index. Zostaną zarejestrowane piksele zasłaniające cel. Zamknięte części celu nie zostaną przechwycone.
To następstwo procesu przycinania zdjęć w funkcji Region Capture. Jedną z alternatywnych funkcji, która w przyszłości będzie własny interfejs API, jest przechwytywanie na poziomie elementu, czyli przechwytywanie tylko pikseli powiązanych z celem, niezależnie od przesłonięcia. Taki interfejs API ma inny zestaw wymagań w zakresie bezpieczeństwa i prywatności niż proste przycinanie.
Prywatność i bezpieczeństwo
Przechwytywanie regionu pozwala aplikacji internetowej, która już obserwuje wszystkie piksele na karcie, na dobrowolne usunięcie niektórych z nich. Jest to bezpieczne, ponieważ nie można uzyskać żadnych nowych informacji.
Przechwytywanie regionu pozwala ograniczyć zakres informacji wysyłanych do użytkowników zdalnych. Może na przykład chcesz udostępnić kilka slajdów, ale nie notatki.
Zdalnie nie zalecamy udostępniania notatek. Rejestrowanie regionu wstawienia reklamy.
Pamiętaj, że lokalnie Capture nie daje żadnych gwarancji bezpieczeństwa. Podczas przekazywania ścieżki do innego dokumentu odbierający dokument może ją cofnąć przycięcie i uzyskać dostęp do wszystkich przechwyconych pikseli karty.
Chrome rysuje niebieskie obramowanie wokół krawędzi przechwyconych kart. Podczas przycinania Chrome zazwyczaj rysuje niebieskie obramowanie wokół przyciętego miejsca docelowego.
Wersja demonstracyjna
Możesz zagrać w Region Capture, uruchamiając prezentację Glitch. Pamiętaj, aby przejrzeć kod źródłowy.
Obsługiwane przeglądarki
Obsługa przeglądarek
- 104
- 104
- x
- x
Funkcja Przechwytywanie regionów jest dostępna tylko w Chrome 104 na komputerach.
Co dalej
Oto zapowiedź tego, co w najbliższej przyszłości udoskonali udostępnianie ekranu w internecie:
- Funkcja Przechwytywanie regionu będzie obsługiwać przechwytywanie innych kart.
- Skupienie warunkowe umożliwia aplikacji internetowej przechwytywanie instruowania przeglądarki, aby przełączyła ostrość na przechwyconą powierzchnię wyświetlacza lub aby nie zmieniała ostrości.
- Może być dostępny interfejs Capture API na poziomie elementu.
Prześlij opinię
Zespół Chrome i społeczność zajmująca się standardami internetowymi chcą poznać Twoje wrażenia z korzystania z funkcji Region Capture.
Opowiedz nam o projekcie
Czy jest coś, co nie działa zgodnie z Twoimi oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do realizacji swojego pomysłu? Masz pytanie lub komentarz na temat modelu zabezpieczeń?
- Zgłoś problem ze specyfikacją w repozytorium GitHub lub dodaj swoje uwagi na temat istniejącego problemu.
Problem z implementacją?
Czy wystąpił 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 odtworzenia. Glitch to doskonały sposób na szybkie i łatwe udostępnianie kopii.
Okaż wsparcie
Czy zamierzasz korzystać z funkcji Region Capture? Twoja publiczna pomoc pomaga zespołowi Chrome priorytetowo traktować te funkcje i pokazuje innym dostawcom, jak ważne jest ich wsparcie.
Wyślij tweeta na adres @ChromiumDev i daj nam znać, gdzie i jak używasz tego narzędzia.
Przydatne linki
Podziękowania
Dziękujemy Joe Medley za przeczytanie tego artykułu.