Controlli di condivisione dello schermo incentrati sulla tutela della privacy

François Beaufort

Elad Alon

La condivisione di schede, finestre e schermi è 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 tramite la rete. Di recente sono state apportate modifiche all'API per tutelare meglio la privacy e impedire la condivisione accidentale di informazioni personali.

Ecco 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 superficie 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 "sala degli 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 di uno schermo, possono comunque chiedere a Chrome di offrire finestre o schermi 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 gli schermi.

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 uno schermo specifico. Questo comportamento è intenzionale, in quanto darebbe all'app web troppo potere sull'utente.

L'opzione monitorTypeSurfaces

Per proteggere le aziende dalla divulgazione di informazioni private a causa di errori dei dipendenti, le app web di videoconferenza ora possono impostare monitorTypeSurfaces su "exclude". Chrome escluderà quindi le schermate nel selettore dei contenuti multimediali. Per includerlo, impostalo su "include". Al momento, il valore predefinito per monitorTypeSurfaces è "include", ma le app web sono invitate a impostarlo in modo esplicito, in quanto 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 si esclude a vicenda con displaySurface: "monitor".

L'opzione surfaceSwitching

Uno dei motivi più citati per la condivisione dell'intero schermo è il desiderio di passare facilmente dalla condivisione di una superficie all'altra durante una sessione. Per risolvere questo problema, Chrome ora mostra un pulsante che consente a un utente di passare dinamicamente dalla condivisione di una scheda all'altra. Il 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. Se è impostato su "exclude", il pulsante non verrà mostrato all'utente. È consigliabile che le app web impostino 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, il che porta a un effetto "sala degli specchi", ululati e confusione generale.

Per proteggere gli utenti, le app web di videoconferenza ora possono impostare selfBrowserSurface su "exclude". Chrome escluderà quindi la scheda corrente dall'elenco delle schede offerte all'utente. Per includerlo, impostalo su "include". Al momento, il valore predefinito per selfBrowserSurface è "exclude", ma le app web sono invitate a impostarlo in modo esplicito, in quanto 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 si esclude a vicenda con preferCurrentTab: true.

L'opzione systemAudio

getDisplayMedia() consente di acquisire l'audio insieme al video. Ma non tutti gli audio sono uguali. Prendi in considerazione le app web di videoconferenza: - Se l'utente condivide un'altra scheda, è opportuno acquisire anche l'audio. - L'audio di sistema, invece, include l'audio dei partecipanti remoti e non deve essere ritrasmesso.

In futuro, potrebbe essere possibile escludere alcune sorgenti audio dalla registrazione. Per il momento, però, le web app di videoconferenza spesso preferiscono evitare di acquisire l'audio di sistema. In precedenza, questa operazione poteva essere eseguita controllando la superficie di visualizzazione scelta dall'utente e interrompendo la traccia audio se aveva scelto di condividere uno schermo. Tuttavia, questo solleva un piccolo problema, in quanto alcuni utenti sono confusi quando selezionano esplicitamente la casella di controllo per condividere l'audio di sistema e poi sentono dire dai partecipanti remoti che non arriva alcun audio.

Se imposti systemAudio su "exclude", un'app web può evitare di confondere gli utenti con segnali contrastanti. Chrome offrirà di acquisire l'audio insieme a schede e finestre, ma non insieme agli 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 in modo esplicito, in quanto il valore predefinito potrebbe cambiare in futuro.

Demo

Puoi provare questi controlli di condivisione schermo eseguendo la demo.

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 le tue esperienze con questi controlli di condivisione dello schermo.

Descrivi il design

C'è qualcosa in merito ai controlli per la condivisione schermo che non funziona come previsto? 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 i tuoi commenti a una segnalazione esistente.

Problemi con l'implementazione?

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

• Invia una segnalazione di bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile e istruzioni semplici per la riproduzione.

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 a @ChromiumDev e facci sapere dove e come lo utilizzi.

Link utili

• Specifiche
• displaySurface explainer
• monitorTypeSurfaces explainer
• surfaceSwitching explainer
• selfBrowserSurface explainer
• systemAudio explainer
• Revisione del TAG

Ringraziamenti

Grazie a Rachel Andrew per la revisione