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 elementem uchwytu, czyli 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 ilustrujących 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ą osadzone bezpośrednio w aplikacji internetowej do wideokonferencji, więc użytkownik nie musi wielokrotnie przełączać się między kartą wideokonferencji a kartą prezentowaną. Dzięki temu użytkownik może się bardziej skoncentrować 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ą interfejsu Capture Handle można wykrywać i zmniejszać ryzyko samofilmowania, na przykład przez wyłączenie podglądu lokalnego w aplikacji internetowej.

Ilustracja efektu labiryntu lustrzanego

Informacje o uchwycie do przechwytywania

Uchwyt do nagrywania składa się z 2 uzupełniających się części:

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.

Przechwycony bok

Aplikacje internetowe mogą udostępniać informacje aplikacjom internetowym, które mogą je przechwytywać. Robi to, wywołując navigator.mediaDevices.setCaptureHandleConfig() z opcjonalnym obiektem zawierającym te elementy:

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 dla aplikacji do przechwytywania aplikacji internetowych.
permittedOrigins: prawidłowe wartości to: (i) pusty tablica, (ii) tablica z jednym elementem "*" lub (iii) tablica źródeł. Jeśli permittedOrigins składa się z pojedynczego elementu "*", to CaptureHandle jest widoczne dla wszystkich aplikacji internetowych rejestrujących. W przeciwnym razie jest widoczna tylko w przypadku aplikacji internetowych, których źródło znajduje się w permittedOrigins.

Ten przykład pokazuje, jak ujawnić losowo wygenerowany identyfikator UUID jako identyfikator użytkownika i źródło do dowolnej 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 chmurowej).

Strona przechwytywania

Aplikacja internetowa do przechwytywania przechowuje film MediaStreamTrack i może odczytać informacje o uchwycie, wywołując funkcję getCaptureHandle() w obiekcie 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 parametr exposeOrigin ma wartość true. W przeciwnym razie nie jest zdefiniowany.

Ten przykład pokazuje, jak odczytać informacje o uchwycie z ś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 dzięki umieszczeniu w przechwyczonej aplikacji internetowej „magicznych pikseli” 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 w HTTPS).

Przykład

Możesz eksperymentować z uchwytem do rejestrowania, uruchamiając próbkę w Glitch. Sprawdź kod źródłowy.

Prezentacje

Niektóre wersje demonstracyjne są dostępne pod tymi adresami:

Wykrywanie cech

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

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

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

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:

Region Capture pozwoli przyciąć ścieżkę wideo utworzoną na podstawie przechwycenia ekranu 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 projektowaniu

Czy coś w przycisku „Złap” 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żyć funkcji przechwytywania? 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

Podziękowania

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