Lepsze udostępnianie kart dzięki uchwytowi Capture

François Beaufort

Elad Alon

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.

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:

• Pilot
• Wykrywanie samouczestnictwa

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

• Specyfikacja
• Wyjaśnienie
• Sprawdzanie tagów
• Błąd w Chromium
• Wpis na stronie ChromeStatus.com

Podziękowania

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