Controlli di condivisione dello schermo incentrati sulla tutela della privacy

François Beaufort

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 un 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 utente specializzati, che funzionano meglio con la condivisione di una finestra o una schermata, possono comunque chiedere a Chrome di mostrare le finestre o le schermate in modo più evidente nel selettore dei 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" },
});

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

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 senza problemi 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().

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

L'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 le 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 le app web sono invitate a impostarlo esplicitamente, poiché il valore predefinito potrebbe cambiare in futuro.

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

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

L'opzione systemAudio

getDisplayMedia() consente di acquisire l'audio insieme al 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 remoti e non deve essere trasmesso di nuovo a loro.

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, era possibile farlo controllando la superficie di visualizzazione scelta dall'utente e interrompendo la traccia audio se l'utente 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.

Impostando systemAudio su "exclude", un'app web può evitare di confondere gli utenti con segnali contrastanti. Chrome offrirà la possibilità di acquisire l'audio insieme a schede e finestre, ma non con gli schermi.

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 le app web sono invitate a impostarlo esplicitamente, poiché 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.

• systemAudio è disponibile in Chrome 105 su computer.

• 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 in merito a questi controlli per la condivisione schermo che non funziona come previsto? Oppure mancano metodi o proprietà necessari 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 è ideale per condividere codice.

Mostrare il proprio sostegno

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

Invia un tweet all'account @ChromiumDev e facci sapere dove e come lo utilizzi.

Link utili

• Specifiche
• displaySurface spiegazione
• monitorTypeSurfaces spiegazione
• surfaceSwitching spiegazione
• selfBrowserSurface spiegazione
• systemAudio spiegazione
• Revisione TAG

Ringraziamenti

Grazie a Rachel Andrew per la revisione