Ustawienia udostępniania ekranu chroniące prywatność

François Beaufort

Elad Alon

Udostępnianie kart, okien i ekranów na platformie internetowej jest już możliwe 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 powierzchni wyświetlania (karty, okna lub ekrany).
• Za pomocą opcji monitorTypeSurfaces można 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.
• Za pomocą opcji selfBrowserSurface można 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.

getDisplayMedia() – zmiany

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ść ofert pozostaje niezmieniona, ale odpowiedni panel jest wstępnie wybrany.

Wartości opcji displaySurface to:

• "browser" – karty.
• "window" w systemie Windows.
• "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 monitorTypeSurfaces to "include", ale zalecamy w przypadku aplikacji internetowych ustawienie jej w sposób jednoznaczny, ponieważ w przyszłości może się 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ę 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 wyświetlany użytkownikowi. 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, aplikacje internetowe do obsługi rozmów wideo mogą teraz ustawić 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 selfBrowserSurface to "exclude", ale zalecamy w przypadku aplikacji internetowych ustawienie jej w sposób jednoznaczny, ponieważ w przyszłości może się 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 dźwięk z mikrofonów uczestników zdalnych i nie powinien być do nich przesyłany.

W przyszłości będzie można wykluczyć z rejestrowania niektóre źródła dźwięku. Na razie jednak w przypadku aplikacji internetowych do wideokonferencji 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. Powoduje to jednak niewielki problem, który polega na tym, że niektórzy użytkownicy są zdezorientowani, gdy wyraźnie zaznaczą pole wyboru udostępniania dźwięku z systemu, a potem otrzymują informację od uczestników zdalnych, że nie ma przychodzących 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 ją wyraźnie, ponieważ wartość domyślna może się w przyszłości zmienić.

Prezentacja

Możesz wypróbować te opcje, uruchamiając demo na Glitch. Koniecznie zapoznaj się z kodem źródłowym.

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? 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. Glitch sprawdza się przy udostępnianiu kodu.

Pokaż pomoc

Czy planujesz korzystać z tych opcji udostępniania ekranu? Twoja publiczna pomoc 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
• Ocena TAG

Podziękowania

Dziękujemy Rachel Andrew za opinię