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
iselfBrowserSurface
są dostępne w Chrome 107 na komputerze.
Obsługa przeglądarek
- 105
- 105
- x
- x
- Aplikacja
systemAudio
jest dostępna w Chrome 105 na komputery.
Obsługa przeglądarek
- 119
- 119
- x
- x
- 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śnieniemonitorTypeSurfaces
– wyjaśnieniesurfaceSwitching
– wyjaśnienieselfBrowserSurface
– wyjaśnieniesystemAudio
– wyjaśnienie- Ocena tagu
Podziękowania
Baner powitalny autorstwa: John Schnobrich.
Dziękujemy Rachel Andrew za przeczytanie tego artykułu.