Ustawienia udostępniania ekranu chroniące prywatność

Udostępnianie kart, okien i ekranów jest już możliwe na platformie internetowej za pomocą interfejsu Screen Capture API. Krótko mówiąc, getDisplayMedia() pozwala użytkownikowi wybrać ekran lub jego fragment (np. okno), który ma być rejestrowany jako strumień multimediów. Tę transmisję można następnie nagrać lub udostępnić innym osobom w sieci. W tym artykule omawiamy najnowsze zmiany w interfejsie API, które pomogą Ci lepiej chronić prywatność i zapobiegać przypadkowemu udostępnianiu danych osobowych.

Oto lista ustawień, które pozwalają zachować prywatność podczas udostępniania ekranu:

• Opcja displaySurface może wskazywać, że aplikacja internetowa preferuje konkretny typ platformy wyświetlania (karty, okna lub ekrany).
• Opcja monitorTypeSurfaces pozwala 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żesz uniemożliwić użytkownikowi udostępnianie bieżącej karty. Pozwala to uniknąć efektu „sali luster”.
• Opcja systemAudio sprawia, że Chrome oferuje użytkownikowi tylko odpowiednie nagrania dźwiękowe.

Zmiany w grupie getDisplayMedia()

Wprowadzono poniższe zmiany w witrynie getDisplayMedia().

Opcja displaySurface

Aplikacje internetowe obsługujące specjalistyczne ścieżki użytkownika (które najlepiej sprawdzają się przy udostępnianiu okna lub ekranu) mogą nadal prosić Chrome o wyświetlanie okien lub ekranów w widocznym miejscu w selektorze mediów. Kolejność ofert pozostaje niezmieniona, ale odpowiedni panel jest wstępnie wybrany.

Wartości opcji displaySurface to:

• "browser" – karty.
• "window" w systemie Windows.
• "monitor" dla ekranów.

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

Pamiętaj, że nie oferujemy możliwości wstępnego wyboru konkretnego okna lub ekranu. Jest to celowe z myślą o tym, że aplikacja internetowa uzyskałaby zbyt dużą kontrolę nad użytkownikiem.

Opcja monitorTypeSurfaces

Aby chronić firmy przed wyciekiem informacji prywatnych z powodu błędów pracowników, w aplikacjach internetowych do obsługi rozmów wideo możesz teraz ustawić wartość monitorTypeSurfaces na "exclude". Chrome będzie wtedy wykluczać ekrany w selektorze mediów. Aby ją uwzględnić, ustaw wartość "include". Obecnie domyślna wartość parametru monitorTypeSurfaces to "include", ale w przypadku aplikacji internetowych zachęcamy do ustawienia tej wartości, ponieważ w przyszłości może się to zmienić.

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

Pamiętaj, że wyraźna wartość monitorTypeSurfaces: "exclude" wzajemnie się wyklucza z displaySurface: "monitor".

Opcja surfaceSwitching

Jedną z najczęstszych przyczyn udostępniania całego ekranu jest chęć płynnego przełączania się między udostępnianiem różnych platform podczas sesji. Aby rozwiązać ten problem, Chrome udostępnia teraz przycisk, który pozwala użytkownikowi dynamicznie przełączać się między udostępnianiem różnych kart. Przycisk „Udostępnij tę kartę” był wcześniej dostępny w rozszerzeniach do Chrome, a teraz może go używać w każdej aplikacji internetowej wywołującej getDisplayMedia().

Jeśli parametr surfaceSwitching ma wartość "include", przeglądarka pokaże ten przycisk. Jeśli zasada ma wartość "exclude", przycisk nie jest wyświetlany użytkownikowi. W przypadku aplikacji internetowych zalecamy ustawienie wyraźnej wartości, ponieważ Chrome może z czasem zmienić tę wartość.

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ę, co powoduje efekt „sali luster”, wycie i ogólne dezorientację.

Aby chronić użytkowników przed nimi, aplikacje internetowe do rozmów wideo mogą teraz ustawić w polu selfBrowserSurface ustawienie "exclude". Chrome wykluczy bieżącą kartę z listy kart oferowanych użytkownikowi. Aby ją uwzględnić, ustaw wartość "include". Obecnie domyślna wartość parametru selfBrowserSurface to "exclude", ale w przypadku aplikacji internetowych zachęcamy do ustawienia tej wartości, ponieważ w przyszłości może się to zmienić.

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

Pamiętaj, że jednoznaczne właściwości selfBrowserSurface: "exclude" wykluczają się nawzajem z preferCurrentTab: true.

Opcja systemAudio

getDisplayMedia() umożliwia rejestrowanie dźwięku i obrazu. Jednak nie wszystkie dźwięki są takie same. Warto rozważyć aplikacje internetowe do rozmów wideo: – Jeśli użytkownik udostępnia inną kartę, warto też rejestrować dźwięk. – Dźwięk systemowy obejmuje natomiast własny dźwięk uczestników zdalnych i nie powinien być do nich przesyłany.

W przyszłości może być możliwe wykluczanie niektórych źródeł dźwięku z rejestracji. Na tę chwilę najlepszym rozwiązaniem jest jednak unikanie nagrywania dźwięku z systemu w aplikacjach internetowych do obsługi rozmów wideo. Wcześniej należało sprawdzić, którą platformę wyświetlania wybrał użytkownik, i zatrzymać ścieżkę audio, jeśli użytkownik zdecyduje się udostępnić ekran. Pojawia się jednak drobny problem, ponieważ niektórzy użytkownicy są dezorientowani, gdy wyraźnie zaznaczą pole udostępniania dźwięku z systemu, a później otrzymują informacje od uczestników zdalnych, że nie dochodzi dźwięk.

Jeśli ustawisz wartość parametru systemAudio na "exclude", aplikacja internetowa może uniknąć zniechęcania użytkowników z powodu różnych sygnałów. Chrome zaproponuje nagrywanie dźwięku 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 domyślna wartość parametru systemAudio to "include", ale w przypadku aplikacji internetowych zachęcamy do ustawienia tej wartości, ponieważ w przyszłości może się to zmienić.

Wersja demonstracyjna

Aby pobawić się ustawieniami udostępniania ekranu, uruchom prezentację Glitch. Pamiętaj, by przejrzeć kod źródłowy.

Obsługiwane przeglądarki

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

• Aplikacja systemAudio jest dostępna w Chrome 105 na komputery.

• Aplikacja monitorTypeSurfaces jest dostępna w Chrome 119 na komputerze.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chcą się dowiedzieć, jak korzystasz z funkcji udostępniania ekranu.

Opowiedz nam o projekcie

Czy elementy sterowania udostępnianiem ekranu nie działają zgodnie z oczekiwaniami? 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 tych ustawień udostępniania ekranu? 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
• displaySurface – wyjaśnienie
• monitorTypeSurfaces – wyjaśnienie
• surfaceSwitching – wyjaśnienie
• selfBrowserSurface – wyjaśnienie
• systemAudio – wyjaśnienie
• Ocena tagu

Podziękowania

Baner powitalny autorstwa: John Schnobrich.

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