Lepsze udostępnianie kart dzięki uchwytowi Capture

François Beaufort

Elad Alon

Platforma internetowa zawiera teraz Capture Handle, mechanizm, który ułatwia współpracę między aplikacjami internetowymi przechwytującymi i przechwytywanymi. Interfejs Capture Handle umożliwia aplikacji internetowej przechwytującej ergonomiczne i pewne identyfikowanie przechwytywanej aplikacji internetowej (jeśli ta ostatnia wyraziła na to 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 prezentacji, może udostępniać użytkownikowi elementy sterujące do przełączania slajdów. Ponieważ elementy sterujące są osadzone bezpośrednio w aplikacji internetowej do wideokonferencji, użytkownik nie musi wielokrotnie przełączać się między kartą wideokonferencji a prezentowaną kartą. Dzięki temu użytkownik może się w pełni skupić na prezentacji.

Przykład 2: efekt „sali luster” występuje, gdy zarejestrowana powierzchnia jest renderowana z powrotem w miejscu, w którym została zarejestrowana. Jeśli użytkownik zdecyduje się nagrać kartę, na której odbywa się połączenie wideo, a aplikacja internetowa do wideokonferencji wyświetli lokalny podgląd, wystąpi ten niepożądany efekt. Za pomocą funkcji Capture Handle można wykrywać i ograniczać samodzielne przechwytywanie, np. przez wyłączenie lokalnego podglądu w aplikacji internetowej.

Informacje o uchwycie do przechwytywania

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

• Przechwycone aplikacje internetowe mogą wyrazić zgodę na udostępnianie określonych informacji niektórym źródłom za pomocą navigator.mediaDevices.setCaptureHandleConfig().
• Aplikacje internetowe do przechwytywania mogą następnie odczytywać te informacje za pomocą getCaptureHandle() na obiektach MediaStreamTrack.

Strona, na której zrobiono zdjęcie

Aplikacje internetowe mogą udostępniać informacje innym aplikacjom internetowym, które chcą je przechwycić. W tym celu wywołuje funkcję navigator.mediaDevices.setCaptureHandleConfig() z opcjonalnym obiektem składającym się 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 dla przechwytujących aplikacji internetowych.
• permittedOrigins: prawidłowe wartości to (i) pusta tablica, (ii) tablica z jednym elementem "*" lub (iii) tablica źródeł. Jeśli permittedOrigins składa się z jednego elementu "*", to CaptureHandle jest widoczny dla wszystkich aplikacji internetowych rejestrujących dane. W przeciwnym razie jest ona widoczna tylko dla aplikacji internetowych, które ją przechwytują i których źródło znajduje się w permittedOrigins.

Poniższy przykład pokazuje, jak udostępnić losowo wygenerowany identyfikator UUID jako uchwyt i źródło dowolnej aplikacji internetowej, która go przechwytuje.

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

Pamiętaj, że przechwytywana aplikacja internetowa nie wie, czy jest przechwytywana. Chyba że aplikacja internetowa przechwytująca używa CaptureHandle informacji do nawiązania komunikacji z przechwyconą aplikacją internetową (np. za pomocą wiadomości przesyłanych przez proces roboczy lub wspólnej infrastruktury w chmurze).

Strona przechwytywania

Aplikacja internetowa przechwytująca obraz zawiera obiekt wideo MediaStreamTrack i może odczytać informacje o uchwycie przechwytywania, wywołując metodę getCaptureHandle() na tym obiekcie MediaStreamTrack. Jeśli uchwyt przechwytywania jest niedostępny lub aplikacja internetowa przechwytująca nie ma uprawnień do jego odczytu, ta funkcja zwraca wartość null. Jeśli uchwyt przechwytywania jest dostępny, a przechwytująca aplikacja internetowa jest dodana do permittedOrigins, to wywołanie zwraca obiekt z tymi elementami:

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

Poniższy przykład pokazuje, jak odczytać informacje o uchwycie 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 CaptureHandle, nasłuchując zdarzeń "capturehandlechange" na obiekcie MediaStreamTrack. Zmiany są wprowadzane, gdy:

• Przechwycone wywołania aplikacji internetowej navigator.mediaDevices.setCaptureHandleConfig().
• W przechwyconej aplikacji internetowej nastę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 przechwytywanymi a przechwytywanymi aplikacjami internetowymi jest teoretycznie możliwa już dziś, np. przez umieszczenie „magicznych pikseli” w przechwytywanej aplikacji internetowej lub umieszczenie kodów QR w strumieniu wideo. Interfejs Capture Handle oferuje prostszy, bardziej niezawodny i bezpieczniejszy mechanizm. Umożliwia też przechwyconej aplikacji internetowej wybór odbiorców – wybrane źródła lub całą sieć.

Pamiętaj, że interfejs navigator.mediaDevices.setCaptureHandleConfig() jest dostępny tylko w przypadku ramek głównych najwyższego poziomu w bezpiecznych kontekstach przeglądania (tylko HTTPS).

Przykład

Możesz wypróbować funkcję Capture Handle, uruchamiając przykładowy kod.

Prezentacje

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

• Pilot
• Wykrywanie samodzielnego nagrywania

Wykrywanie cech

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

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

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

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

Co dalej?

Oto przedsmak tego, czego możesz się spodziewać w najbliższej przyszłości, co poprawi udostępnianie ekranu w internecie:

• Przechwytywanie regionu umożliwia przycinanie ścieżki wideo pochodzącej z przechwytywania wyświetlania bieżącej karty.
• Warunkowe ustawianie ostrości umożliwia przechwytującej aplikacji internetowej instruowanie przeglądarki, aby przełączała ostrość na przechwyconą powierzchnię wyświetlania lub unikała takiej zmiany ostrości.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chcą poznać Twoje doświadczenia związane z interfejsem Capture Handle.

Opisz projekt

Czy w przypadku funkcji Capture Handle coś nie działa tak, jak oczekujesz? Czy brakuje metod lub właściwości, których potrzebujesz do realizacji swojego pomysłu? Masz pytania lub uwagi dotyczące modelu zabezpieczeń?

• Zgłoś problem ze specyfikacją w repozytorium GitHub lub dodaj swoje uwagi do istniejącego problemu.

Masz problem z implementacją?

Czy w implementacji Chrome występuje błąd? 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.

Okaż wsparcie

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 obsługiwanie.

Wyślij tweeta do @ChromiumDev i napisz, gdzie i jak korzystasz z tej funkcji.

Przydatne linki

• Specyfikacja
• Film z wyjaśnieniem
• Weryfikacja TAG
• Błąd w Chromium
• Wpis na ChromeStatus.com

Podziękowania

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