Lepsze udostępnianie ekranu dzięki koncentracji warunkowej

Interfejs Screen Capture API pozwala użytkownikowi wybrać kartę, okno lub ekran, które mają być przechwytywane jako strumień multimediów. Tę transmisję można następnie nagrać lub udostępnić innym osobom w sieci. Ta dokumentacja przedstawia funkcję koncentracji warunkowej, która umożliwia aplikacjom internetowym kontrolowanie, czy przechwycona karta lub okno będą aktywne po rozpoczęciu przechwytywania, czy strona przechwytywania ma pozostać aktywna.

Obsługiwane przeglądarki

Tryb warunkowy jest dostępny od Chrome 109.

Wprowadzenie

Gdy aplikacja internetowa zaczyna przechwytywać kartę lub okno, przeglądarka musi stawić czoła decyzji – czy przechwycona powierzchnia powinna być na pierwszym planie, czy też strona przechwytująca powinna pozostać nieaktywna? Odpowiedź zależy od powodu wywołania metody getDisplayMedia() oraz od miejsca, które użytkownik wybiera.

Rozważ hipotetyczną aplikację internetową do rozmów wideo. Gdy poczytaj track.getSettings().displaySurface i przyjrzysz się nickowi przechwytywania, aplikacja internetowa do rozmów wideo zrozumie, co użytkownik udostępnił. Następnie:

• Jeśli przechwyconą kartą lub oknem można sterować zdalnie, utrzymuj główny motyw rozmowy wideo.
• W przeciwnym razie zaznacz przechwyconą kartę lub przechwycone okno.

W powyższym przykładzie aplikacja internetowa do obsługi rozmów wideo zachowuje ważność, gdy udostępnia prezentację, umożliwiając użytkownikowi zdalne przechodzenie między slajdami. Jeśli jednak użytkownik zdecyduje się udostępnić edytor tekstu, aplikacja internetowa do rozmów wideo natychmiast przełączy się na zdjęcie karty lub okna.

Korzystanie z interfejsu Conditional Focus API

Utwórz instancję CaptureController i przekaż ją do getDisplayMedia(). Wywołując funkcję setFocusBehavior() natychmiast po rozwiązaniu zwróconej obietnicy getDiplayMedia(), możesz określić, czy przechwycona karta lub okno będą aktywne. Można to zrobić tylko wtedy, gdy użytkownik udostępnił kartę lub okno.

const controller = new CaptureController();

// Prompt the user to share a tab, a window or a screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;
if (displaySurface == "browser") {
  // Focus the captured tab.
  controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface == "window") {
  // Do not move focus to the captured window.
  // Keep the capturing page focused.
  controller.setFocusBehavior("focus-capturing-application");
}

Podczas podejmowania decyzji o tym, czy ustawić fokus, możesz wziąć pod uwagę nick.

// Retain focus if capturing a tab dialed to example.com.
// Focus anything else.
const origin = track.getCaptureHandle().origin;
if (displaySurface == "browser" && origin == "https://example.com") {
  controller.setFocusBehavior("focus-capturing-application");
} else if (displaySurface != "monitor") {
  controller.setFocusBehavior("focus-captured-surface");
}

Możesz nawet zdecydować, czy chcesz się skupić przed nawiązaniem połączenia z użytkownikiem getDisplayMedia().

// Focus the captured tab or window when capture starts.
const controller = new CaptureController();
controller.setFocusBehavior("focus-captured-surface");

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

Możesz wywołać usługę setFocusBehavior() dowolną liczbę razy, zanim obiecane słowo zniknie, lub nie później niż bezpośrednio po rozwiązaniu obietnicy. Ostatnie wywołanie zastępuje wszystkie poprzednie.

A dokładniej: – Zwrócona obietnica getDisplayMedia() rozwiązuje się w mikrozadaniu. Wywołanie setFocusBehavior() po zakończeniu tego mikrozadania powoduje błąd. – Połączenie z numerem setFocusBehavior() dłużej niż sekundę po rozpoczęciu nagrywania jest niepoprawne.

Oznacza to, że oba te fragmenty kodu zakończą się niepowodzeniem:

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

// Too late, because it follows the completion of the task
// on which the getDisplayMedia() promise resolved.
// This will throw.
setTimeout(() => {
  controller.setFocusBehavior("focus-captured-surface");
});

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const start = new Date();
while (new Date() - start <= 1000) {
  // Idle for ≈1s.
}

// Because too much time has elapsed, the browser will have
// already decided whether to focus.
// This fails silently.
controller.setFocusBehavior("focus-captured-surface");

Wywołanie setFocusBehavior() powoduje też te zdarzenia:

• ścieżka wideo strumienia zwrócona przez funkcję getDisplayMedia() nie jest oznaczona jako „live”.
• po tym, jak zwrócona przez użytkownika obietnica getDisplayMedia() się zakończy, jeśli użytkownik udostępnił ekran (a nie kartę ani okno).

Przykład

Aby sprawdzić, jak działa koncentracja warunkowa, uruchom demonstrację Glitch. Pamiętaj, by przejrzeć kod źródłowy.

Wykrywanie funkcji

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

if (
  "CaptureController" in window &&
  "setFocusBehavior" in CaptureController.prototype
) {
  // CaptureController.setFocusBehavior() is supported.
}

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chcą poznać Twoją opinię o funkcji koncentracji warunkowej.

Opowiedz nam o projekcie

Czy jest coś, co nie działa zgodnie z oczekiwaniami w kierunku warunkowym? 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. Usterka sprawdza się w przypadku udostępniania kodu.

Okaż wsparcie

Czy zamierzasz korzystać z koncentracji warunkowej? 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.

Przydatne linki

• Specyfikacja
• Wyjaśnienie
• Ocena tagu

Podziękowania

Baner powitalny autorstwa: Elena Taranenko.

Dziękujemy Rachel Andrew za przeczytanie tego artykułu.