Lepsze udostępnianie kart dzięki uchwytowi Capture

François Beaufort
François Beaufort
GitHub
Elad Alon

Obsługa przeglądarek

  • Chrome: 102.
  • Edge: 102.
  • Firefox: funkcja nieobsługiwana.
  • Safari: nieobsługiwane.

Platforma internetowa jest teraz wyposażona w uchwyt, który ułatwia współpracę między przechwytywaniem i rejestrowaniem aplikacji internetowych. Uchwyt przechwytywania umożliwia rejestrowanie aplikacji internetowej w celu ergonomicznego i pewnego zidentyfikowania zarejestrowanej aplikacji. (Jeśli przechwycona aplikacja internetowa wyraziła zgodę).

Korzyści te zilustrowano w kilku przykładach.

Przykład 1. Jeśli aplikacja internetowa do obsługi rozmów wideo nagrywa aplikację internetową z prezentacją, może ona udostępniać użytkownikowi elementy sterujące do poruszania się 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ą. Po zniesieniu obciążenia użytkownik może teraz skupić się na prezentacji.

Przykład 2: „sala luster” ma miejsce, gdy uchwycona powierzchnia pojawia się z powrotem w rejestrowanej lokalizacji. Zwłaszcza jeśli użytkownik zdecyduje się na przechwytywanie karty, na której odbywa się rozmowa wideo, a aplikacja internetowa do rozmów wideo renderuje lokalny podgląd, można zaobserwować spodziewany efekt. Za pomocą uchwytu przechwytywania można wykryć i ograniczyć samodzielne robienie zdjęć. np. przez zablokowanie podglądu lokalnego.

Ilustracja przedstawiająca efekt „Sala luster”

Informacje o nicku przechwytywania

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

  • Przechwycone aplikacje internetowe mogą wyrazić zgodę na udostępnianie określonych informacji niektórym źródłom przy użyciu navigator.mediaDevices.setCaptureHandleConfig().
  • Przechwytywanie aplikacji internetowych może następnie odczytywać te informacje za pomocą funkcji getCaptureHandle() na obiektach MediaStreamTrack.

Przechwycona strona

Aplikacje internetowe mogą udostępniać informacje, które mogłyby zostać przechwycone przez aplikacje internetowe. 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 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) pusta tablica, (ii) tablica z pojedynczym 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 można zarejestrować tylko aplikacje internetowe, których pochodzenie 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, czy została przechwycona. O ile nie jest to inaczej, aplikacja internetowa do nagrywania wykorzystuje informacje CaptureHandle do nawiązania komunikacji z przechwyconą aplikacją internetową (np. przy użyciu wiadomości wysyłanej przez instancję roboczą lub współdzielonej infrastruktury w chmurze).

Strona przechwytywania

Aplikacja internetowa do przechwytywania zawiera plik wideo MediaStreamTrack i może odczytać informacje o nicku przechwytywania, wywołując getCaptureHandle() na tym urządzeniu MediaStreamTrack. Jeśli nie ma dostępnego uchwytu przechwytywania lub aplikacja internetowa nie może go odczytać, wywołanie zwraca wartość null. Jeśli dostępny jest uchwyt przechwytywania, a aplikacja internetowa do zapisu zostanie dodana do permittedOrigins, wywołanie to zwróci obiekt z tymi elementami:

  • handle: wartość ciągu znaków ustawiona przez przechwyconą aplikację internetową za pomocą metody navigator.mediaDevices.setCaptureHandleConfig().
  • origin: pochodzenie przechwyconej aplikacji internetowej, jeśli zasada 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 stanu CaptureHandle, nasłuchując zdarzeń "capturehandlechange" w obiekcie MediaStreamTrack. Zmiany mają miejsce, gdy:

  • Przechwycona aplikacja internetowa wywołuje metodę navigator.mediaDevices.setCaptureHandleConfig().
  • W zarejestrowanej aplikacji internetowej odbywa się nawigacja między dokumentami.
videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Bezpieczeństwo i prywatność

Współpraca między przechwytywaniem i rejestrowaniem aplikacji internetowych jest obecnie teoretycznie możliwa dzięki osadzeniu „magicznych pikseli” np. w przechwyconej aplikacji internetowej lub w strumieniu wideo. Uchwyt przechwytywania to prostszy, bardziej niezawodny i bezpieczniejszy mechanizm. Umożliwia też przechwyconą aplikację internetową wybranie odbiorców – można wybrać źródła lub całą sieć.

Pamiętaj, że interfejs navigator.mediaDevices.setCaptureHandleConfig() jest dostępny tylko dla głównych ramek najwyższego poziomu w kontekście bezpiecznego przeglądania (tylko HTTPS).

Przykład

Możesz użyć uchwytu przechwytywania, uruchamiając próbkę w Glitch. Bądź zapoznaj się z kodem źródłowym.

Prezentacje

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

Wykrywanie cech

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

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 zapowiedź tego, czego można się spodziewać w najbliższej przyszłości, aby usprawnić udostępnianie ekranu w internecie:

  • Funkcja Zapis regionu umożliwia przycięcie ścieżki wideo pochodzącej z nagranej z niej bieżącej karty.
  • Ostrość warunkowa umożliwi aplikacji internetowej przechwytywanie instruowania przeglądarki, czy ma przełączyć zaznaczenie na przechwycony obszar wyświetlania, czy też uniknąć takiej zmiany ostrości.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chcą poznać Twoją opinię o korzystaniu z uchwytu do przechwytywania.

Opowiedz nam o projekcie

Czy jakiś uchwyt przechwytywania ekranu 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 pytanie lub komentarz na temat modelu zabezpieczeń?

Problem z implementacją?

Czy wystąpił błąd z implementacją Chrome? Czy implementacja różni się od specyfikacji?

  • Zgłoś błąd na https://new.crbug.com. Postaraj się podać jak najwięcej szczegółów oraz proste instrukcje odtwarzania filmu. Usługa Glitch świetnie nadaje się do szybkiego i łatwego udostępniania poprawek.

Pokaż wsparcie

Czy planujesz użyć nicku do przechwytywania? Twoja publiczna pomoc pomaga zespołowi Chrome ustalać priorytety funkcji i pokazywać innym dostawcom przeglądarek, jak ważne jest, aby wspierać te funkcje.

Wyślij tweeta na adres @ChromiumDev, aby poinformować nas, gdzie i jak go używasz.

Podziękowania

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