Ustawienia udostępniania ekranu chroniące prywatność

François Beaufort
François Beaufort

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

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" },
});
Zrzut ekranu z oknem wyboru multimediów z wybranym wcześniej
W selektorze multimediów wybrano wstępnie panel „Okno”.

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",
});
Zrzut ekranu z wybierakiem multimediów bez
Panel „Cały ekran” nie jest widoczny w selektorze multimediów.

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().

Zrzut ekranu z przyciskiem do dynamicznego przełączania się między udostępnianiem różnych kart
Przycisk „Zamiast tego udostępnij tę kartę” w Chrome.

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 🦶🔫.
});
Zrzut ekranu z wybranym selektorem multimediów bez bieżącej karty
Obecna karta jest wykluczona, widoczna jest tylko druga karta.

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.

Zrzuty ekranu z wybieraczami multimediów z udostępnianiem dźwięku z karty
Udostępnianie dźwięku z karty jest dostępne w panelu „Karta Chrome”, ale nie w panelu „Cały ekran”.

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, surfaceSwitchingselfBrowserSurface są dostępne w Chrome 107 na komputerach.

Obsługa przeglądarek

  • Chrome: 105.
  • Edge: 105.
  • Firefox: nieobsługiwane.
  • Safari: nieobsługiwane.

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

Obsługa przeglądarek

  • Chrome: 119.
  • Edge: 119.
  • Firefox: funkcja nieobsługiwana.
  • Safari: nieobsługiwane.

  • 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.

Podziękowania

Dziękujemy Rachel Andrew za opinię