Migliore condivisione delle schede con l'handle di acquisizione

François Beaufort

Elad Alon

La piattaforma web ora include Capture Handle, un meccanismo che facilita la collaborazione tra le app web acquisite e quelle di acquisizione. L'handle di acquisizione consente a un'app web di acquisizione di identificare in modo ergonomico e affidabile l'app web acquisita (se l'app web acquisita è stata attivata).

Ecco alcuni esempi che illustrano i vantaggi.

Esempio 1: se un'app web di videoconferenza acquisisce un'app web di presentazione, può mostrare all'utente i controlli per spostarsi tra le diapositive. Poiché i controlli sono incorporati direttamente nell'app web di videoconferenza, l'utente non deve passare ripetutamente dalla scheda della videoconferenza alla scheda della presentazione. Una volta rimosso questo onere, l'utente può concentrarsi maggiormente sulla presentazione.

Esempio 2: l'effetto "sala degli specchi" si verifica quando una superficie acquisita viene visualizzata di nuovo nella posizione in cui viene acquisita. In particolare, se l'utente sceglie di acquisire la scheda in cui è in corso una chiamata di videoconferenza e l'app web di videoconferenza esegue il rendering di un'anteprima locale, si verificherà questo temuto effetto. Utilizzando l'handle di acquisizione, l'acquisizione autonoma può essere rilevata e attenuata, ad esempio impedendo all'app web di mostrare l'anteprima locale.

Informazioni sull'handle di acquisizione

La funzionalità di gestione dei dati acquisiti è composta da due parti complementari:

• Le app web acquisite possono attivare l'esposizione di determinate informazioni ad alcune origini con navigator.mediaDevices.setCaptureHandleConfig().
• Le app web di acquisizione possono quindi leggere queste informazioni con getCaptureHandle() sugli oggetti MediaStreamTrack.

Lato acquisito

Le app web possono esporre informazioni ad app web che potrebbero acquisire dati. A tale scopo, chiama navigator.mediaDevices.setCaptureHandleConfig() con un oggetto facoltativo composto da questi membri:

• handle: può essere qualsiasi stringa di massimo 1024 caratteri.
• exposeOrigin: se true, l'origine dell'app web acquisita potrebbe essere esposta all'acquisizione di app web.
• permittedOrigins: i valori validi sono (i) un array vuoto, (ii) un array con il singolo elemento "*" o (iii) un array di origini. Se permittedOrigins è costituito dal singolo elemento "*", CaptureHandle è osservabile da tutte le app web di acquisizione. In caso contrario, è osservabile solo per l'acquisizione di app web la cui origine si trova in permittedOrigins.

L'esempio seguente mostra come esporre un UUID generato in modo casuale come handle e l'origine a qualsiasi app web di acquisizione.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Tieni presente che l'app web acquisita non sa che è in corso di acquisizione. A meno che, cioè, l'app web di acquisizione non utilizzi le informazioni CaptureHandle per stabilire la comunicazione con l'app web acquisita (ad esempio utilizzando la messaggistica tramite un worker o un'infrastruttura cloud condivisa).

Lato di acquisizione

L'app web di acquisizione contiene un video MediaStreamTrack e può leggere le informazioni sull'handle di acquisizione chiamando getCaptureHandle() su quel MediaStreamTrack. Questa chiamata restituisce null se non è disponibile alcun handle di acquisizione o se l'app web di acquisizione non è autorizzata a leggerlo. Se è disponibile un handle di acquisizione e l'app web di acquisizione è aggiunta a permittedOrigins, questa chiamata restituisce un oggetto con i seguenti membri:

• handle: il valore di stringa impostato dall'app web acquisita con navigator.mediaDevices.setCaptureHandleConfig().
• origin: l'origine dell'app web acquisita se exposeOrigin è impostato su true. In caso contrario, non è definito.

L'esempio seguente mostra come leggere le informazioni sull'handle di acquisizione da una traccia video.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

Monitora le modifiche CaptureHandle ascoltando gli eventi "capturehandlechange" su un oggetto MediaStreamTrack. Le modifiche vengono applicate quando:

• L'app web acquisita chiama navigator.mediaDevices.setCaptureHandleConfig().
• Nell'app web acquisita si verifica una navigazione tra documenti.

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Sicurezza e privacy

Oggi è teoricamente possibile la collaborazione tra le app web acquisite e quelle di acquisizione, ad esempio incorporando "pixel magici" nell'app web acquisita o codici QR nello stream video. Capture Handle offre un meccanismo più semplice, affidabile e sicuro. Consente inoltre all'app web acquisita di selezionare il pubblico, ovvero origini specifiche o l'intero web.

Tieni presente che navigator.mediaDevices.setCaptureHandleConfig() è disponibile solo per i frame principali di primo livello in contesti di navigazione sicuri (solo HTTPS).

Esempio

Puoi provare il handle di acquisizione eseguendo il sample su Glitch. Assicurati di controllare il codice sorgente.

Demo

Alcune demo sono disponibili all'indirizzo:

• Telecomando
• Rilevamento di selfie

Rilevamento di funzionalità

Per verificare se getCaptureHandle() è supportato, utilizza:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

Per verificare se navigator.mediaDevices.setCaptureHandleConfig() è supportato, utilizza:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

Passaggi successivi

Ecco un'anteprima di cosa aspettarsi nel prossimo futuro per migliorare la condivisione schermo sul web:

• Acquisizione regione consente di ritagliare una traccia video derivata dall'acquisizione della schermata della scheda corrente.
• La funzionalità Messa a fuoco condizionale consentirebbe all'app web di acquisire per istruire il browser a spostare lo stato attivo sulla superficie di visualizzazione acquisita o ad evitare questa modifica dello stato attivo.

Feedback

Il team di Chrome e la community degli standard web vogliono conoscere la tua esperienza con la funzionalità di acquisizione dell'handle.

Parlaci del design

C'è qualcosa in merito a Capture Handle 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 riproduzioni rapide e semplici.

Mostrare il proprio sostegno

Hai intenzione di utilizzare la funzionalità di acquisizione? 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
• Spiegazione
• Revisione TAG
• Bug di Chromium
• Voce di ChromeStatus.com

Ringraziamenti

Grazie a Joe Medley per aver esaminato questo articolo.