Controlli di condivisione dello schermo incentrati sulla tutela della privacy

Francesco Beaufort
François Beaufort
GitHub
Elad Alon
Elad Alon
GitHub

La condivisione di schede, finestre e schermate è già possibile sulla piattaforma web con l'API Screen Capture. In breve, getDisplayMedia() consente all'utente di selezionare una schermata o parte di una schermata (ad esempio una finestra) da acquisire come stream multimediale. Questo stream può essere registrato o condiviso con altri utenti sulla rete. Questo articolo introduce alcune modifiche recenti all'API per tutelare meglio la privacy e impedire la condivisione accidentale di informazioni personali.

Ecco un elenco di controlli che puoi utilizzare per una condivisione schermo che tutela la privacy:

  • L'opzione displaySurface può indicare che l'app web preferisce offrire un tipo specifico di superficie di visualizzazione (schede, finestre o schermate).
  • L'opzione monitorTypeSurfaces può essere utilizzata per impedire all'utente di condividere un'intera schermata.
  • L'opzione surfaceSwitching indica se Chrome deve consentire all'utente di passare dinamicamente da una scheda condivisa all'altra.
  • L'opzione selfBrowserSurface può essere utilizzata per impedire all'utente di condividere la scheda corrente. In questo modo si evita l'effetto "sala degli specchi".
  • L'opzione systemAudio garantisce che Chrome offra all'utente solo acquisizioni audio pertinenti.

Modifiche a getDisplayMedia()

Sono state apportate le seguenti modifiche a getDisplayMedia().

L'opzione displaySurface

Le app web con percorsi degli utenti specializzati, che funzionano meglio con la condivisione di una finestra o uno schermo, possono comunque chiedere a Chrome di offrire finestre o schermate in modo più evidente nel selettore media. L'ordine dell'offerta rimane invariato, ma il riquadro pertinente è preselezionato.

I valori per l'opzione displaySurface sono:

  • "browser" per le schede.
  • "window" per Windows.
  • "monitor" per gli schermi.
const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});
Screenshot del selettore media con l'elemento preselezionato
Il riquadro "Finestra" è preselezionato nel selettore media.

Tieni presente che non offriamo la possibilità di preselezionare una finestra o una schermata specifica. Questo è tutto progettato, in quanto darebbe all'app web troppo potere sull'utente.

L'opzione monitorTypeSurfaces

Per proteggere le aziende dalla fuga di informazioni private causate da errori dei dipendenti, ora le app web per videoconferenze possono impostare monitorTypeSurfaces su "exclude". Chrome escluderà quindi le schermate nel selettore media. Per includerla, impostala su "include". Attualmente, il valore predefinito di monitorTypeSurfaces è "include", ma si consiglia alle app web di impostarlo esplicitamente perché il valore predefinito potrebbe cambiare in futuro.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});
Screenshot del selettore media senza
Il riquadro "Schermo intero" non è visibile nel selettore media.

Tieni presente che un elemento monitorTypeSurfaces: "exclude" esplicito si esclude a vicenda con displaySurface: "monitor".

L'opzione surfaceSwitching

Uno dei motivi principali per cui viene condiviso l'intero schermo è il desiderio di passare facilmente da una piattaforma all'altra durante una sessione. Per risolvere questo problema, Chrome ora mostra un pulsante che consente a un utente di passare in modo dinamico da una scheda all'altra in modo dinamico. Questo pulsante "Condividi invece questa scheda" era disponibile in precedenza per le estensioni di Chrome e ora può essere utilizzato da qualsiasi app web che chiama getDisplayMedia().

Screenshot del pulsante utilizzato per passare in modo dinamico da una scheda all'altra
Il pulsante "Condividi invece questa scheda" in Chrome.

Se surfaceSwitching è impostato su "include", il browser mostrerà tale pulsante. Se impostato su "exclude", non mostrerà all'utente quel pulsante. Consigliamo alle app web di impostare un valore esplicito, in quanto Chrome potrebbe modificare il valore predefinito nel tempo.

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"
});

L'opzione selfBrowserSurface

Negli scenari di videoconferenza, gli utenti spesso commettono l'errore di selezionare la scheda stessa per le videoconferenze, il che genera un effetto "sala di specchi", urla e confusione generale.

Per proteggere gli utenti da se stessi, le app web per videoconferenze ora possono impostare selfBrowserSurface su "exclude". Chrome escluderà quindi la scheda corrente dall'elenco di schede offerto all'utente. Per includerla, impostala su "include". Attualmente, il valore predefinito di selfBrowserSurface è "exclude", ma si consiglia alle app web di impostarlo esplicitamente perché il valore predefinito potrebbe cambiare in futuro.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});
Screenshot del selettore media senza la scheda corrente
La scheda corrente è esclusa, ma è presente solo la seconda.

Tieni presente che un selfBrowserSurface: "exclude" esplicito si esclude a vicenda con preferCurrentTab: true.

L'opzione systemAudio

getDisplayMedia() consente di acquisire l'audio insieme ai video. Ma non tutto l'audio è creato allo stesso modo. Prendi in considerazione le app web per videoconferenze: - Se l'utente condivide un'altra scheda, ha senso anche acquisire l'audio. - L'audio di sistema, invece, include l'audio dei partecipanti remoti e non deve essere ritrasmesso a loro.

In futuro potrebbe essere possibile escludere alcune sorgenti audio dall'acquisizione. Per il momento, invece, per le app web per videoconferenze è spesso preferibile non acquisire l'audio di sistema. In precedenza, questa operazione poteva essere eseguita controllando la piattaforma di visualizzazione scelta dall'utente e interrompendo la traccia audio se l'utente ha deciso di condividere uno schermo. Tuttavia, ciò solleva un piccolo problema, in quanto alcuni utenti rimangono confusi quando selezionano esplicitamente la casella di controllo per condividere l'audio di sistema, per cui i partecipanti remoti vengono informati che l'audio non è in arrivo.

Screenshot di selettori multimediali con condivisione audio delle schede
L'audio della scheda di condivisione è disponibile nel riquadro "Scheda Chrome", ma non nel riquadro "Schermo intero".

Se imposti systemAudio su "exclude", un'app web può evitare di confondere gli utenti tramite indicatori misti. Chrome si offrirà di acquisire l'audio accanto a schede e finestre, ma non accanto a schermate.

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.
});

Attualmente, il valore predefinito di systemAudio è "include", ma si consiglia alle app web di impostarlo esplicitamente perché il valore predefinito potrebbe cambiare in futuro.

Demo

Puoi giocare con questi controlli di condivisione dello schermo eseguendo la demo su Glitch. Assicurati di controllare il codice sorgente.

Supporto del browser

Supporto dei browser

  • 107
  • 107
  • x
  • 11.1

Fonte

  • displaySurface, surfaceSwitching e selfBrowserSurface sono disponibili in Chrome 107 su computer.

Supporto dei browser

  • 105
  • 105
  • x
  • x

  • systemAudio è disponibile in Chrome 105 su computer.

Supporto dei browser

  • 119
  • 119
  • x
  • x

  • monitorTypeSurfaces è disponibile in Chrome 119 su computer.

Feedback

Il team di Chrome e la community degli standard web vogliono conoscere le tue esperienze con questi controlli di condivisione dello schermo.

Descrivi il design

C'è qualcosa in questi controlli di condivisione dello schermo che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno per implementare la tua idea? Hai domande o commenti sul modello di sicurezza?

  • Segnala un problema relativo alle specifiche nel repository GitHub o aggiungi la tua opinione su un problema esistente.

Problemi con l'implementazione?

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalle specifiche?

  • Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero possibile di dettagli e di semplici istruzioni per la riproduzione. Glitch funziona bene per la condivisione di codice.

Mostra supporto

Hai intenzione di utilizzare questi controlli di condivisione dello schermo? Il tuo supporto pubblico aiuta il team di Chrome a dare la priorità alle funzionalità e mostra agli altri fornitori di browser quanto sia fondamentale supportarle.

Invia un tweet a @ChromiumDev e facci sapere dove e come lo utilizzi.

Ringraziamenti

Immagine promozionale di John Schnobrich.

Grazie a Rachel Andrew per aver letto questo articolo.