Ustawienia udostępniania ekranu chroniące prywatność

François Beaufort

Elad Alon

Udostępnianie kart, okien i ekranów jest już możliwe na platformie internetowej dzięki interfejsowi Screen Capture API. Krótko mówiąc, getDisplayMedia() pozwala użytkownikowi wybrać ekran lub jego część (np. okno) do przechwycenia jako strumień multimediów. Ten strumień można następnie nagrywać lub udostępniać innym osobom w sieci. Wprowadziliśmy niedawno zmiany w interfejsie API, aby lepiej chronić prywatność i zapobiegać przypadkowemu udostępnianiu danych osobowych.

Oto lista narzędzi, których możesz używać do udostępniania ekranu, zachowując prywatność:

• Opcja displaySurface może wskazywać, że aplikacja internetowa preferuje określony typ wyświetlacza (karty, okna lub ekrany).
• Opcja monitorTypeSurfaces może uniemożliwić użytkownikowi udostępnianie całego ekranu.
• Opcja surfaceSwitching wskazuje, czy Chrome ma zezwalać użytkownikowi na dynamiczne przełączanie się między udostępnionymi kartami.
• Opcja selfBrowserSurface może uniemożliwić użytkownikowi udostępnianie bieżącej karty. Dzięki temu unikniesz efektu „galerii luster”.
• Opcja systemAudio zapewnia, że Chrome oferuje użytkownikowi tylko odpowiednie przechwytywanie dźwięku.

Zmiany w getDisplayMedia()

W getDisplayMedia() wprowadzono te zmiany:

Opcja displaySurface

Aplikacje internetowe ze specjalnymi ścieżkami użytkownika, które najlepiej działają w przypadku udostępniania okna lub ekranu, mogą nadal prosić Chrome o wyświetlanie okien lub ekranów w bardziej widocznym miejscu w selektorze multimediów. Kolejność oferty pozostaje niezmieniona, ale odpowiednia karta jest wstępnie wybrana.

Wartości opcji displaySurface:

• "browser" dla kart.
• "window" w przypadku okien.
• "monitor" na ekranach.

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});

Pamiętaj, że nie oferujemy opcji wstępnego wybrania konkretnego okna lub ekranu. Jest to celowe działanie, ponieważ aplikacja internetowa miałaby zbyt dużą kontrolę nad użytkownikiem.

Opcja monitorTypeSurfaces

Aby chronić firmy przed wyciekiem informacji prywatnych z powodu błędu pracownika, aplikacje internetowe do wideokonferencji mogą teraz ustawiać wartość monitorTypeSurfaces na "exclude". Chrome wykluczy te ekrany w selektorze multimediów. Aby ją uwzględnić, ustaw ją na "include". Obecnie wartość domyślna dla monitorTypeSurfaces to "include", ale zalecamy, aby aplikacje internetowe ustawiały tę wartość w sposób jawny, ponieważ domyślna wartość może się w przyszłości zmienić.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});

Pamiętaj, że jawna wartość monitorTypeSurfaces: "exclude" wyklucza się wzajemnie z wartością displaySurface: "monitor".

Opcja surfaceSwitching

Jednym z najczęściej wymienianych powodów udostępniania całego ekranu jest chęć bezproblemowego przełączania się między udostępnianiem różnych powierzchni podczas sesji. Aby rozwiązać ten problem, w Chrome udostępniono przycisk, który umożliwia użytkownikowi dynamiczne przełączanie się między udostępnianiem różnych kart. Przycisk „Zamiast tego udostępnij tę kartę” był wcześniej dostępny w rozszerzeniach do Chrome, a teraz może z niego korzystać każda aplikacja internetowa, która wywołuje getDisplayMedia().

Jeśli surfaceSwitching ma wartość "include", przeglądarka wyświetli ten przycisk. Jeśli ma wartość "exclude", przycisk nie będzie się wyświetlać. Zalecamy, aby aplikacje internetowe ustawiały wyraźną wartość, ponieważ Chrome może z czasem zmienić wartość domyślną.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

Opcja selfBrowserSurface

W przypadku rozmów wideo użytkownicy często popełniają błąd, wybierając samą kartę rozmów wideo, co prowadzi do efektu „korytarza luster”, wycia i ogólnego zamieszania.

Aby chronić użytkowników przed nimi samymi, aplikacje internetowe do rozmów wideo mogą teraz ustawiać wartość selfBrowserSurface na "exclude". Chrome wykluczy wtedy bieżącą kartę z listy kart oferowanych użytkownikowi. Aby ją uwzględnić, ustaw ją na "include". Obecnie wartość domyślna dla selfBrowserSurface to "exclude", ale zalecamy, aby aplikacje internetowe ustawiały tę wartość w sposób jawny, ponieważ domyślna wartość może się w przyszłości zmienić.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

Pamiętaj, że jawna wartość selfBrowserSurface: "exclude" wyklucza się wzajemnie z wartością preferCurrentTab: true.

Opcja systemAudio

getDisplayMedia() pozwala na rejestrowanie dźwięku wraz z obrazem. Nie wszystkie dźwięki są jednakowe. Rozważ użycie aplikacji internetowych do prowadzenia rozmów wideo: - jeśli użytkownik udostępnia inną kartę, warto też rejestrować dźwięk. – Dźwięk systemowy obejmuje z kolei dźwięk uczestników zdalnych i nie powinien być do nich przesyłany.

W przyszłości może być możliwe wykluczenie niektórych źródeł dźwięku z nagrywania. Na razie jednak w przypadku aplikacji internetowych do rozmów wideo często lepiej jest po prostu nie rejestrować dźwięku z systemu. Wcześniej można było to zrobić, sprawdzając, jaką powierzchnię wyświetlania wybrał użytkownik, i zatrzymając ścieżkę audio, jeśli wybrał udostępnianie ekranu. Wystąpił jednak mały problem: niektórzy użytkownicy są zdezorientowani, gdy wyraźnie zaznaczają pole wyboru, aby udostępnić dźwięk systemowy, a uczestnicy zdalnego spotkania informują ich, że nie słychać żadnego dźwięku.

Ustawienie systemAudio na "exclude" pozwala uniknąć wprowadzania użytkowników w błąd przez sprzeczne sygnały. Chrome będzie oferować możliwość nagrywania dźwięku w przypadku kart i okienek, ale nie w przypadku ekranów.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,           // Ask to capture audio; caveat follows.
  systemAudio: "exclude" // Do not offer to capture *system* audio.
});

Obecnie wartość domyślna dla systemAudio to "include", ale zalecamy, aby aplikacje internetowe ustawiały tę wartość w sposób jawny, ponieważ domyślna wartość może się w przyszłości zmienić.

Prezentacja

Możesz wypróbować te opcje, uruchamiając demo na Glitch. Pamiętaj, aby sprawdzić kod źródłowy.

Obsługa przeglądarek

• displaySurface, surfaceSwitching i selfBrowserSurface są dostępne w Chrome 107 na komputerach.

• systemAudio jest dostępna w Chrome 105 na komputerach.

• monitorTypeSurfaces jest dostępna w Chrome 119 na komputerach.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chce poznać Twoje wrażenia związane z tymi elementami sterującymi udostępnianiem ekranu.

Opowiedz nam o projektowaniu

Czy coś w opcjach udostępniania ekranu nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do wdrożenia swojego pomysłu? Masz pytania lub uwagi dotyczące modelu zabezpieczeń?

• Zgłoś problem ze specyfikacją w repozytorium GitHub lub podziel się opinią na temat istniejącego problemu.

Problem z implementacją?

Czy znalazłeś/znalazłaś 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 odtwarzania problemu. Glitch sprawdza się przy udostępnianiu kodu.

Pokaż pomoc

Czy planujesz korzystać z tych opcji udostępniania ekranu? Twoje publiczne wsparcie pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Wyślij tweeta do @ChromiumDev i powiedz nam, gdzie i jak z niego korzystasz.

Przydatne linki

• Specyfikacja
• displaySurface wyjaśnienie
• monitorTypeSurfaces wyjaśnienie
• surfaceSwitching wyjaśnienie
• selfBrowserSurface wyjaśnienie
• systemAudio wyjaśnienie
• Sprawdzanie tagów

Podziękowania

Dziękujemy Rachel Andrew za sprawdzenie