Lepsze udostępnianie kart dzięki uchwytowi Capture

François Beaufort
François Beaufort
GitHub
Elad Alon
Elad Alon
GitHub

Obsługa przeglądarek

  • 102
  • 102
  • x
  • x

Platforma internetowa jest teraz wyposażona w mechanizm Capture Handle, który ułatwia współpracę między nagrywaniem i przechwytywaniem aplikacji internetowych. Uchwyt przechwytywania umożliwia ergonomiczną i pewną identyfikację przechwyconej aplikacji internetowej aplikacji internetowej (jeśli przechwycona aplikacja internetowa wyraziła zgodę).

Kilka przykładów ilustruje korzyści.

Przykład 1. Jeśli aplikacja internetowa do obsługi rozmów wideo rejestruje aplikację internetową do prowadzenia rozmów wideo, może ona udostępnić użytkownikowi elementy sterujące na potrzeby 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ą rozmowy wideo a prezentowaną kartą. Teraz użytkownik może spokojniej skoncentrować się na realizacji prezentacji.

Przykład 2. Efekt „sala luster” występuje, gdy przechwycona powierzchnia jest renderowana z powrotem do nagrywanej lokalizacji. W szczególności dotyczy to sytuacji, gdy użytkownik zdecyduje się zarejestrować kartę, na której odbywa się rozmowa wideo, a aplikacja internetowa do rozmów wideo renderuje podgląd lokalny. Za pomocą uchwytu przechwytywania można wykrywać i ograniczać możliwość robienia zdjęć samodzielnie, na przykład przez aplikację internetową blokującą lokalny podgląd.

Ilustracja efektu Sala luster

Informacje o uchwycie przechwytywania

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

  • Przechwycone aplikacje internetowe mogą zgodzić się na ujawnienie pewnych informacji źródłom za pomocą navigator.mediaDevices.setCaptureHandleConfig().
  • Przechwytywane aplikacje internetowe mogą następnie odczytywać te informacje za pomocą getCaptureHandle() w obiektach MediaStreamTrack.

Zarejestrowana strona

Aplikacje internetowe mogą udostępniać informacje, aby przechwytywać aplikacje internetowe. Aby to zrobić, wywołuje dyrektywę navigator.mediaDevices.setCaptureHandleConfig() z opcjonalnym obiektem zawierającym te elementy:

  • handle: może to być dowolny ciąg znaków o długości nieprzekraczającej 1024 znaków.
  • exposeOrigin: jeśli ma wartość true, źródło przechwyconej aplikacji internetowej może być narażone na przechwytywanie aplikacji internetowych.
  • permittedOrigins: prawidłowe wartości to (i) pusta tablica, (ii) tablica z pojedynczym elementem "*" lub (iii) tablica źródeł. Jeśli permittedOrigins składa się z 1 elementu "*", wszystkie aplikacje internetowe mogą rejestrować CaptureHandle. W przeciwnym razie jest obserwowalna tylko w celu przechwytywania aplikacji internetowych, których pochodzenie znajduje się w permittedOrigins.

Poniższy przykład pokazuje, jak udostępnić losowo wygenerowany identyfikator UUID jako nick i źródło dla każdej aplikacji internetowej przechwytującej.

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

Pamiętaj, że przechwycona aplikacja internetowa nie wie, czy jest przechwycona. Chyba że aplikacja internetowa do przechwytywania używa informacji CaptureHandle do nawiązania komunikacji z przechwyconą aplikacją internetową (np. przy użyciu wiadomości przesyłanych przez instancję roboczą lub współdzielonej infrastruktury w chmurze).

Rejestruję stronę

Aplikacja internetowa przechwytująca zawiera film MediaStreamTrack i może odczytać informacje z nicka, wywołując metodę getCaptureHandle() na tym urządzeniu MediaStreamTrack. To wywołanie zwraca null, jeśli nie jest dostępny uchwyt przechwytywania lub jeśli aplikacja internetowa przechwytująca nie ma uprawnień do jego odczytu. Jeśli uchwyt przechwytywania jest dostępny, a aplikacja internetowa przechwytująca zostanie dodana do permittedOrigins, to wywołanie zwróci obiekt z następującymi elementami:

  • handle: ciąg znaków ustawiona przez przechwyconą aplikację internetową za pomocą parametru navigator.mediaDevices.setCaptureHandleConfig().
  • origin: źródło przechwyconej aplikacji internetowej, jeśli zasada exposeOrigin ma wartość true. W przeciwnym razie nie jest ona definiowana.

Poniższy przykład pokazuje, jak odczytywać informacje z nicka zapisu 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 CaptureHandle, nasłuchując zdarzeń "capturehandlechange" w obiekcie MediaStreamTrack. Zmiany mają miejsce, gdy:

  • Przechwycona aplikacja internetowa wywołuje funkcję navigator.mediaDevices.setCaptureHandleConfig().
  • Nawigacja między dokumentami ma miejsce w przechwyconej aplikacji internetowej.
videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Prywatność i bezpieczeństwo

Współpraca między przechwytywaniem i przechwytywaniem aplikacji internetowych jest dziś teoretycznie możliwa dzięki umieszczeniu „magicznych pikseli” w przechwyconej aplikacji internetowej lub umieszczeniu kodów QR w strumieniu wideo. Uchwyt przechwytujący jest prostszy, bardziej niezawodny i bezpieczniejszy. Umożliwia też przechwyconej aplikacji internetowej wybranie odbiorców – może to być źródło lub cała sieć.

Pamiętaj, że funkcja navigator.mediaDevices.setCaptureHandleConfig() jest dostępna tylko dla ramek głównych najwyższego poziomu w kontekstach bezpiecznego przeglądania (tylko HTTPS).

Przykład

Możesz pobawić się uchwytem przechwytywania, uruchamiając sample w Glitch. Pamiętaj, aby przejrzeć kod źródłowy.

Przykłady

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

Wykrywanie funkcji

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

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

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

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

Co dalej

Oto zapowiedź tego, co w najbliższej przyszłości udoskonali udostępnianie ekranu w internecie:

  • Przechwytywanie regionu umożliwia przycięcie ścieżki wideo wygenerowanej na podstawie momentu przechwytywania wyświetlanej karty.
  • Skupienie warunkowe pozwoli aplikacji internetowej przechwytywać informacje o przejściu ostrości na wyświetlaną powierzchnię ekranu lub uniknięciu takiej zmiany ostrości.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chcą poznać Twoją opinię na temat korzystania z uchwytu Capture Handle.

Opowiedz nam o projekcie

Czy coś w nicku przechwytywania nie działa zgodnie z 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 użyć uchwytu przechwytywania? 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.

Podziękowania

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