Controlli di condivisione dello schermo incentrati sulla tutela della privacy

François Beaufort
François Beaufort
GitHub
Elad Alon

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 una parte di una schermata (ad esempio una finestra) da acquisire come stream multimediale. Questo stream può essere registrato o condiviso con altri utenti della rete. Di recente sono state apportate modifiche all'API per preservare meglio la privacy e impedire la condivisione accidentale di informazioni personali.

Di seguito è riportato un elenco di controlli che puoi utilizzare per la condivisione dello schermo nel rispetto della privacy:

  • L'opzione displaySurface può indicare che l'app web preferisce offrire un tipo specifico di piattaforma di visualizzazione (schede, finestre o schermate).
  • L'opzione monitorTypeSurfaces può essere utilizzata per impedire all'utente di condividere l'intero schermo.
  • 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 "labirinto di specchi".
  • L'opzione systemAudio garantisce che Chrome offra all'utente solo l'acquisizione audio pertinente.

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 di uno schermo, possono comunque chiedere a Chrome di offrire finestre o schermate in modo più evidente nel selettore di contenuti multimediali. 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 le schermate.
const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});
Screenshot del selettore di contenuti multimediali con i contenuti preselezionati
Il riquadro "Finestra" è preselezionato nel selettore di contenuti multimediali.

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

L'opzione monitorTypeSurfaces

Per proteggere le aziende dalla fuga di informazioni private a causa di errori dei dipendenti, ora le app web di videoconferenze possono impostare monitorTypeSurfaces su "exclude". Chrome escluderà quindi le schermate nel selettore dei contenuti multimediali. Per includerla, impostala su "include". Al momento, il valore predefinito per monitorTypeSurfaces è "include", ma le app web sono invitate a impostarlo esplicitamente, poiché 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 di contenuti multimediali senza
Il riquadro "Schermo intero" non è visibile nel selettore dei contenuti multimediali.

Tieni presente che un monitorTypeSurfaces: "exclude" esplicito è mutuamente esclusivo di displaySurface: "monitor".

L'opzione surfaceSwitching

Uno dei motivi più citati per la condivisione dell'intero schermo è la possibilità di passare facilmente dalla condivisione di una piattaforma all'altra durante una sessione. Per risolvere il problema, Chrome ora mostra un pulsante che consente all'utente di passare dinamicamente dalla condivisione di una scheda all'altra. Questo pulsante "Condividi questa scheda" era precedentemente disponibile per le estensioni di Chrome e ora può essere utilizzato da qualsiasi app web che chiama getDisplayMedia().

Screenshot del pulsante utilizzato per passare dinamicamente dalla condivisione di una scheda all'altra
Il pulsante "Condividi questa scheda" in Chrome.

Se surfaceSwitching è impostato su "include", il browser mostrerà il pulsante in questione. Se impostato su "exclude", l'utente non vedrà il pulsante. Le app web sono incoraggiate a impostare un valore esplicito, poiché 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"
});

Opzione selfBrowserSurface

Negli scenari di videoconferenza, gli utenti spesso commettono l'errore di selezionare la scheda della videoconferenza stessa, con un effetto "labirinto di specchi", ululati 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 offerte all'utente. Per includerla, impostala su "include". Al momento, il valore predefinito per 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 di contenuti multimediali che esclude la scheda corrente
La scheda corrente è esclusa, è presente solo la seconda scheda.

Tieni presente che un selfBrowserSurface: "exclude" esplicito è mutuamente esclusivo di preferCurrentTab: true.

L'opzione systemAudio

getDisplayMedia() consente di acquisire sia l'audio che il video. Tuttavia, non tutti gli audio sono uguali. Prendi in considerazione le app web di videoconferenza: - Se l'utente condivide un'altra scheda, ha senso acquisire anche l'audio. - L'audio di sistema, invece, include l'audio dei partecipanti da remoto e non deve essere trasmesso a questi ultimi.

In futuro, potrebbe essere possibile escludere alcune sorgenti audio dalla registrazione. Per il momento, però, le app web di videoconferenza spesso preferiscono evitare di acquisire l'audio di sistema. In precedenza, questa operazione poteva essere eseguita controllando il display scelto dall'utente e interrompendo la traccia audio se sceglieva di condividere uno schermo. Tuttavia, si verifica un piccolo problema: alcuni utenti sono confusi quando selezionano esplicitamente la casella di controllo per condividere l'audio di sistema e poi i partecipanti remoti comunicano che non è in arrivo alcun audio.

Screenshot dei selettori multimediali che mostrano la condivisione dell'audio della scheda
La condivisione dell'audio della scheda è 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 offrirà di acquisire l'audio accanto alle schede e alle finestre, ma non accanto alle 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.
});

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

Demo

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

Supporto browser

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

Supporto dei browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: non supportato.
  • Safari: non supportato.

  • systemAudio è disponibile in Chrome 105 su computer.

Supporto dei browser

  • Chrome: 119.
  • Edge: 119.
  • Firefox: non supportato.
  • Safari: non supportato.

  • monitorTypeSurfaces è disponibile in Chrome 119 su computer.

Feedback

Il team di Chrome e la community degli standard web vogliono conoscere la tua esperienza con questi controlli di condivisione schermo.

Parlaci del design

C'è qualcosa che non funziona come ti aspettavi in quei controlli di condivisione dello schermo? Oppure mancano metodi o proprietà che ti servono per implementare la tua idea? Hai una domanda o un commento sul modello di sicurezza?

  • Invia una segnalazione relativa alle specifiche nel repository GitHub o aggiungi il tuo parere a una segnalazione esistente.

Problemi con l'implementazione?

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalla specifica?

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

Mostrare il proprio sostegno

Hai intenzione di utilizzare questi controlli di condivisione schermo? Il supporto pubblico aiuta il team di Chrome a dare 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

Grazie a Rachel Andrew per la revisione