Screen Capture API pozwala przechwycić całą bieżącą kartę. Interfejs Element Capture API umożliwia przechwycenie i zapisanie konkretnego elementu HTML. Przekształca ono zrzut całej karty w zrzut konkretnego poddrzewa DOM, obejmując tylko bezpośrednich potomków elementu docelowego. Inaczej mówiąc, przycina i usuwa zarówno zasłaniające, jak i zasłaniane treści.
Dlaczego warto korzystać z funkcji Przechwytywanie elementów?
Zapoznanie się z wymaganiami aplikacji do wideokonferencji może pomóc Ci zrozumieć, w jakich sytuacjach Element Capture jest przydatny. Jeśli masz aplikację do rozmów wideo, która umożliwia umieszczanie aplikacji innych firm w iframe, możesz czasem chcieć przechwycić ten iframe jako film i przesłać go do uczestników zdalnych.
Wywołanie getDisplayMedia() i umożliwienie użytkownikowi wyboru bieżącej karty spowoduje przesłanie całej bieżącej karty. Prawdopodobnie przesyła ona użytkownikom ich własne filmy. Możesz je przyciąć, korzystając z funkcji Zrzut obszaru.
Co jednak, jeśli prowadzący korzysta z aplikacji do wideokonferencji, a niektóre treści, na przykład lista rozwijana, są wyświetlane na materiale, który ma być rejestrowany?
W tym przypadku funkcja Region Capture nie pomoże. Część tej listy może być widoczna na ekranach uczestników zdalnych.
Fakt, że regionowa rejestracja obrazu rejestruje w ten sposób części elementów (tzw. zakrywanie treści), powoduje wiele problemów:
- Zasłonięcie treści może uniemożliwić wyświetlenie treści, które użytkownik chce udostępnić.
- Zasłonięte treści mogą być prywatne (np. powiadomienia na czacie).
- Wykluczanie treści może być mylące. (np. ponowne rozmieszczenie aplikacji może na chwilę wyświetlić filmy uczestników zdalnych na uchwyconym obszarze).
Interfejs Element Capture API rozwiązuje wszystkie te problemy, umożliwiając kierowanie reklam na udostępniany element.
Jak korzystać z funkcji Przechwytywanie elementów?
captureTarget to element na stronie, który zawiera treści, które użytkownik chce uchwycić. Chcesz, aby aplikacja internetowa do rozmów wideo rejestrowała captureTarget i udostępniała ją uczestnikom zdalnym. Uzyskujesz więc wartość RestrictionTarget z zakresu captureTarget. Po ograniczeniu ścieżki wideo za pomocą tego elementu RestrictionTarget klatki na ścieżce wideo składają się teraz tylko z pikseli stanowiących część elementu captureTarget i jego bezpośrednich elementów podrzędnych DOM.
Jeśli captureTarget zmieni rozmiar, kształt lub lokalizację, ścieżka wideo będzie podążać za śladem użytkownika, nie wymagając żadnych dodatkowych działań z aplikacji internetowej. Również treści, które się pojawiają, znikają lub poruszają, nie trzeba w żaden sposób traktować.
Jeszcze raz wykonaj te czynności:
Zacznij od zezwolenia użytkownikowi na przechwycenie bieżącej karty.
// Ask the user for permission to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();
Określ RestrictionTarget, wywołując funkcję RestrictionTarget.fromElement() z wybranym przez siebie elementem jako danymi wejściowymi.
// Associate captureTarget with a new RestrictionTarget
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);
Następnie wywołaj funkcję restrictTo() na ścieżce wideo, podając jako dane wejściowe funkcję RestrictionTarget. Gdy ostatnie obietnice zostaną spełnione, wszystkie kolejne ramki zostaną ograniczone.
// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);
// Enjoy! Transmit remotely.
Szczegółowa analiza
Wykrywanie cech
Aby sprawdzić, czy RestrictionTarget.fromElement() jest obsługiwana, użyj:
if ("RestrictionTarget" in self && "fromElement" in RestrictionTarget) {
// Deriving a restriction target is supported.
}
Wyprowadzenie obiektu RestrictionTarget
Zwróć uwagę na element o nazwie captureTarget. Aby wyodrębnić z niego element RestrictionTarget, wywołaj RestrictionTarget.fromElement(captureTarget). W przypadku powodzenia zwrócona obietnica zostanie rozwiązana za pomocą nowego obiektu RestrictionTarget. W przeciwnym razie zostanie odrzucony, jeśli uzyskasz nieuzasadnioną liczbę RestrictionTarget obiektów.
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);
W przeciwieństwie do obiektu Element obiekt RestrictionTarget można zserializować. Może on zostać przekazany do innego dokumentu za pomocą na przykład Window.postMessage().
Kierowanie ograniczone
Podczas przechwytywania karty ścieżka wideo ujawnia restrictTo(). Podczas rejestrowania bieżącej karty można wywołać funkcję restrictTo() z parametrami null lub dowolnym parametrem RestrictionTarget pochodzącym z elementu na bieżącej karcie.
Wywołania funkcji restrictTo(restrictionTarget) zmieniają ścieżkę wideo na uchwyt captureTarget, tak jakby była ona rysowana samodzielnie, niezależnie od reszty modelu DOM. Wszystkie potomki elementu captureTarget są też rejestrowane; elementy pokrewne do captureTarget są eliminowane z rejestrowania. W efekcie wszystkie klatki dostarczone na ścieżce wyglądają tak, jakby były przycięte do kontur captureTarget, a zasłonięte i zasłonięte treści są usuwane.
// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);
Wywołania restrictTo(null) przywracają ścieżkę do jej pierwotnego stanu.
// Stop restricting.
await track.restrictTo(null);
Jeśli wywołanie metody restrictTo() zakończy się pomyślnie, zwrócona obietnica zostanie rozwiązana, gdy będzie można zagwarantować, że wszystkie kolejne klatki filmu będą ograniczone do captureTarget.
Jeśli nie uda się tego zrobić, obietnica zostanie odrzucona. Nieudane połączenie z numerem restrictTo() może być spowodowane jednym z tych powodów:
- Jeśli
restrictionTargetzostał wygenerowany na innej karcie niż ta, która została zarejestrowana. (za pomocą przycisku „Udostępnij tę kartę” użytkownicy mogą w dowolnym momencie zmienić kartę, która ma być przechwycona). - Jeśli
restrictionTargetpochodzi z elementu, który już nie istnieje. - Jeśli utwór ma klony. (zobacz problem 1509418).
- Jeśli bieżąca ścieżka nie jest ścieżką wideo z własnym nagraniem.
- Jeśli element, z którego pochodzi
restrictionTarget, nie kwalifikuje się do ograniczenia.
Ważne informacje o samodzielnym rejestrowaniu
Gdy aplikacja wywołuje funkcję getDisplayMedia(), a użytkownik decyduje się zarejestrować jej własną kartę, nazywamy to „zrobieniem własnym”.
Metoda restrictTo() jest dostępna na dowolnym ścieżce wideo z przechwytem karty, a nie tylko w przypadku przechwytu własnego. Element Capture jest obecnie dostępny tylko do samodzielnego nagrywania. Dlatego przed próbą zablokowania utworu należy sprawdzić, czy użytkownik wybrał bieżącą kartę. Użyj nicka przechwytywania. Można też poprosić przeglądarkę, aby zachęcała użytkownika do samodzielnego wykonania zdjęcia, używając preferCurrentTab.
Przejrzystość
Klatki wideo, które aplikacja dociera przez getDisplayMedia(), nie zawierają kanału alfa. Jeśli aplikacja ma częściowo przezroczyste pole do przechwytywania, usunięcie kanału alfa może mieć pewne możliwe konsekwencje:
- Kolory mogą się zmienić. Częściowo przezroczyste elementy docelowe rysowane na jasnym tle mogą być ciemniejsze po usunięciu kanału alfa, a te na ciemnym tle – jaśniejsze.
- Kolory, które były niewidoczne lub niewidoczne dla użytkownika przy ustawionym maksymalnym poziomie kanału alfa, będą widoczne po usunięciu kanału alfa. Może to na przykład prowadzić do nieoczekiwanych czarnych obszarów na zarejestrowanych klatkach, jeśli przezroczyste sekcje mają kod RGBA
rgba(0, 0, 0, 0).
Niekwalifikujące się cele przechwytywania
W każdej chwili możesz zacząć ograniczać ścieżkę do dowolnego prawidłowego celu przechwytywania. Jednak w pewnych warunkach nie będą one generowane, np. gdy element lub jego przodek ma wartość display:none. Główne uzasadnienie jest takie, że ograniczenie dotyczy tylko elementu, który składa się z jednego, spójnego, dwuwymiarowego, prostokątnego obszaru, którego piksele można określić logicznie niezależnie od elementów nadrzędnych lub potomnych.
Ważną kwestią, którą należy wziąć pod uwagę, aby mieć pewność, że element podlega ograniczeniom, musi tworzyć własny kontekst grupowania. Aby to zrobić, możesz ustawić właściwość CSS isolation na isolate.
<div id="captureTarget" style="isolation: isolate;"></iframe>
Pamiętaj, że element docelowy może w dowolnym momencie stać się odpowiedni lub nieodpowiedni do ograniczenia, np. gdy aplikacja zmieni właściwości CSS. Aplikacja musi używać odpowiednich celów przechwytywania i nie zmieniać ich właściwości w nieoczekiwany sposób. Jeśli element docelowy nie spełnia kryteriów, nowe klatki nie będą emitowane na ścieżce, dopóki element docelowy nie będzie ponownie spełniał kryteriów ograniczenia.
Włączanie Element Capture
Interfejs Element Capture API jest dostępny w Chrome na komputerach za pomocą flagi Element Capture i można go włączyć na stronie chrome://flags/#element-capture.
Ta funkcja wchodzi w ramach próby wersji źródłowej w Chrome 121 na komputery, co pozwala deweloperom włączyć ją dla odwiedzających ich witryny, aby zbierać dane od rzeczywistych użytkowników. Więcej informacji o testach pochodzenia znajdziesz w artykule Pierwsze kroki z testami pochodzenia.
Bezpieczeństwo i prywatność
Aby dowiedzieć się więcej o kosztach związanych z bezpieczeństwem, przeczytaj sekcję Uwzględnianie prywatności i zabezpieczeń w specyfikacji Element Capture.
Przeglądarka Chrome rysuje niebieską ramkę wokół krawędzi przechwyconych kart.
Prezentacja
Możesz wypróbować Element Capture, uruchamiając demo na Glitch. Pamiętaj, aby sprawdzić kod źródłowy.
Prześlij opinię
Zespół Chrome i społeczność zajmująca się standardami internetowymi chce poznać Twoje wrażenia z korzystania z Element Capture.
Opowiedz nam o projekcie
Czy coś w funkcji Region Capture 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 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 wystąpił błąd związany z implementacją 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.
Przydatne linki
Poświadczenia
Zdjęcie: Paul Skorupskas, Unsplash