Ustawienia udostępniania ekranu chroniące prywatność

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() umożliwia użytkownikowi wybranie ekranu lub fragmentu ekranu (np. okna), który ma być rejestrowany jako strumień multimediów. Ten strumień można następnie nagrywać lub udostępniać innym osobom w sieci. Niedawno wprowadziliśmy 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).
• 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.
• Opcja selfBrowserSurface może uniemożliwić użytkownikowi udostępnianie bieżącej karty. Pozwala to uniknąć efektu „salony 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ść oferty pozostaje niezmieniona, ale odpowiednia karta jest wstępnie wybrana.

Wartości opcji displaySurface:

• "browser" – karty.
• "window" dla 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 ją wyraźnie, ponieważ wartość domyślna 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ę 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 kartę z listy dostępnych dla użytkownika kart. Aby ją uwzględnić, ustaw wartość "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 może być możliwe wykluczenie niektórych źródeł dźwięku z nagrywania. 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 próbować rejestrować dźwięk obok kart i okien, ale nie obok 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 chcą wiedzieć, jak działają ustawienia udostępniania ekranu.

Opowiedz nam o projektowaniu

Czy coś w opcjach udostępniania 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 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 proste instrukcje odtwarzania problemu. 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 na adres @ChromiumDev, by poinformować nas, gdzie i jak go używasz.

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