Lepsze udostępnianie kart dzięki uchwytowi Capture

François Beaufort

Elad Alon

Obsługa przeglądarek

• 102
• 102
• x
• x

Platforma internetowa jest teraz wyposażona w uchwyt, który ułatwia współpracę między przechwytywaniem i rejestrowaniem aplikacji internetowych. Uchwyt przechwytujący umożliwia rejestrowanie aplikacji internetowej w sposób ergonomiczny i wiarygodny.

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: Efekt „salony luster” pojawia się, gdy uchwycona powierzchnia jest renderowana z powrotem do fotografowanej lokalizacji. Jest to szczególnie zauważalne, gdy użytkownik przechwytuje kartę, na której odbywa się rozmowa wideo, a aplikacja internetowa do rozmów wideo renderuje lokalny podgląd. Za pomocą uchwytu przechwytywania można wykryć i zminimalizować samodzielne robienie zdjęć, np. przez zablokowanie lokalnego podglądu przez aplikację internetową.

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 składa się z pojedynczego elementu "*", 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...
});

Prywatność i bezpieczeństwo

Współpraca między przechwytywaniem i rejestrowaniem aplikacji internetowych jest teoretycznie możliwa obecnie dzięki wskazaniu „magicznych pikseli” w przechwyconej aplikacji internetowej lub umieszczeniu kodów QR 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. Koniecznie zapoznaj się z kodem źródłowym.

Przykłady

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

• Pilot
• Wykrywanie samodzielnego rejestrowania

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ść ds. standardów internetowych chcą dowiedzieć się więcej o Twoich doświadczeniach z używaniem uchwytu 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ń?

• Zgłoś problem ze specyfikacją w repozytorium GitHub lub opisz swój problem.

Problem z implementacją?

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

• Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów i podaj proste instrukcje odtworzenia. 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.

Przydatne linki

• Specyfikacja
• Wyjaśnienie
• Ocena TAG
• Błąd Chromium
• Wpis na temat ChromeStatus.com

Podziękowania

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