Ta strona została przetłumaczona przez Cloud Translation API.

Lepsze udostępnianie kart dzięki uchwytowi Capture

François Beaufort

Elad Alon

Obsługa przeglądarek

Platforma internetowa jest teraz dostarczana z uchwytem do przechwytywania – mechanizmem, który ułatwia współpracę między aplikacjami do przechwytywania i przechwyconymi aplikacjami internetowymi. Uchwyt umożliwia aplikacji internetowej uchwytającej uchwytanie ergonomiczne i pewne zidentyfikowanie uchwytanej aplikacji internetowej (jeśli uchwycona aplikacja internetowa została zarejestrowana).

Oto kilka przykładów korzyści.

Przykład 1: jeśli aplikacja internetowa do wideokonferencji rejestruje aplikację internetową z prezentacją, może udostępnić użytkownikowi elementy sterujące do przechodzenia między slajdami. Elementy sterujące są umieszczone bezpośrednio w aplikacji internetowej do rozmów wideo, więc użytkownik nie musi wielokrotnie przełączać się między kartą rozmów wideo a otwartą kartą. Dzięki temu użytkownik może się w większym stopniu skupić na prowadzeniu prezentacji.

Przykład 2. Efekt „hali luster” występuje, gdy uchwycona powierzchnia jest renderowana z powrotem do miejsca, w którym została uchwycona. Jeśli użytkownik zdecyduje się uchwycić kartę, na której odbywa się wideokonferencja, a aplikacja internetowa do wideokonferencji wyrenderuje podgląd lokalny, ten niechciany efekt będzie widoczny. Za pomocą uchwytu przechwytywania obrazu można wykryć i zminimalizować samodzielne robienie zdjęć, np. przez zablokowanie lokalnego podglądu przez aplikację internetową.

Ilustracja przedstawiająca efekt „Sala luster”

Informacje o uchwycie do przechwytywania

Uchwyt przechwytywania składa się z 2 części, które się uzupełniają:

Przechwycone aplikacje internetowe mogą zezwalać na udostępnianie określonych informacji niektórym źródłom za pomocą navigator.mediaDevices.setCaptureHandleConfig().
Aplikacje do przechwytywania danych z sieci mogą odczytywać te informacje za pomocą getCaptureHandle() w przypadku obiektów MediaStreamTrack.

Przechwycona strona

Aplikacje internetowe mogą udostępniać informacje aplikacjom internetowym, które mogą je przechwytywać. Aby to zrobić, wywołuje metodę navigator.mediaDevices.setCaptureHandleConfig() za pomocą opcjonalnego obiektu złożonego z tych elementów:

handle: może to być dowolny ciąg znaków o długości do 1024 znaków.
exposeOrigin: jeśli true, pochodzenie przechwyconej aplikacji internetowej może być widoczne w rejestrowaniu aplikacji internetowych.
permittedOrigins: prawidłowe wartości to: (i) pusty tablica, (ii) tablica z jednym elementem "*" lub (iii) tablica źródeł. Jeśli permittedOrigins zawiera pojedynczy element "*", wartość CaptureHandle jest rejestrowana przez wszystkie przechwytujące aplikacje internetowe. W przeciwnym razie jest widoczna tylko w przypadku aplikacji internetowych, których źródło znajduje się w permittedOrigins.

Z przykładu poniżej dowiesz się, jak udostępnić losowo wygenerowany identyfikator UUID jako nick oraz źródło każdej aplikacji internetowej do przechwytywania.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Pamiętaj, że przechwycona aplikacja internetowa nie wie, że jest przechwycona. Chyba że aplikacja internetowa do przechwytywania używa informacji CaptureHandle do nawiązania komunikacji z aplikacją internetową, która została przechwycona (np. za pomocą wiadomości wysyłanej przez pracownika lub za pomocą wspólnej infrastruktury chmury).

Strona przechwytywania

Aplikacja internetowa do przechwytywania zawiera film MediaStreamTrack i może odczytać informacje o uchwycie, wywołując funkcję getCaptureHandle() w tym MediaStreamTrack. Ten wywołanie zwraca null, jeśli nie ma dostępnego uchwytu przechwytywania lub jeśli aplikacja internetowa przechwytywania nie ma uprawnień do jego odczytu. Jeśli identyfikator przechwytywania jest dostępny, a aplikacja internetowa do przechwytywania jest dodana do permittedOrigins, wywołanie zwraca obiekt z tymi elementami:

handle: wartość ciągu znaków ustawiona przez przechwyconą aplikację internetową za pomocą navigator.mediaDevices.setCaptureHandleConfig().
origin: pochodzenie przechwyconej aplikacji internetowej, jeśli pole exposeOrigin ma wartość true. W przeciwnym razie nie jest zdefiniowany.

Z przykładu poniżej dowiesz się, jak odczytać informacje o nicku przechwytywania ze ścieżki wideo.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

Monitoruj zmiany w CaptureHandle, nasłuchując zdarzeń "capturehandlechange" w obiekcie MediaStreamTrack. Zmiany są wprowadzane, gdy:

Przechwycona aplikacja internetowa wywołuje navigator.mediaDevices.setCaptureHandleConfig().
W przechwyconej aplikacji internetowej występuje nawigacja między dokumentami.

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Bezpieczeństwo i prywatność

Współpraca między aplikacjami do przechwytywania i przechwyconymi aplikacjami internetowymi jest teoretycznie możliwa, np. przez umieszczenie „magicznych pikseli” w przechwyconej aplikacji internetowej lub kodów QR w strumieniach wideo. Capture Handle to prostszy, bardziej niezawodny i bezpieczniejszy mechanizm. Umożliwia też aplikacji internetowej wybranie odbiorców – wybranych źródeł lub całej sieci.

Pamiętaj, że navigator.mediaDevices.setCaptureHandleConfig() jest dostępna tylko w przypadku głównych ramek najwyższego poziomu w kontekście przeglądania w trybie bezpiecznym (tylko HTTPS).

Przykład

Możesz użyć uchwytu przechwytywania, uruchamiając próbkę w Glitch. Sprawdź kod źródłowy.

Prezentacje

Niektóre wersje demonstracyjne są dostępne na tych stronach:

Wykrywanie cech

Aby sprawdzić, czy getCaptureHandle() jest obsługiwana, użyj:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

Aby sprawdzić, czy navigator.mediaDevices.setCaptureHandleConfig() jest obsługiwany, użyj polecenia:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

Co dalej?

Oto kilka nowości, które pojawią się w najbliższej przyszłości i poprawią udostępnianie ekranu w internecie:

Funkcja Zapis regionu umożliwia przycięcie ścieżki wideo pochodzącej z nagranej z niej bieżącej karty.
Warunkowe skupienie pozwoliłoby aplikacji do przechwytywania obrazu nakazać przeglądarce przełączenie punktu skupienia na przechwyconą powierzchnię wyświetlania lub uniknięcie takiej zmiany.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chce poznać Twoje wrażenia związane z użyciem narzędzia do przechwytywania.

Opowiedz nam o projekcie

Czy coś w przycisku „Złapać” 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 pytanie lub komentarz na temat 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ż wsparcie

Czy planujesz użyć funkcji przechwytywania? Twoja publiczna pomoc 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

Podziękowania

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