Migliore condivisione delle schede con l'handle di acquisizione

François Beaufort

Elad Alon

Supporto dei browser

• 102
• 102
• x
• x

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

Alcuni esempi illustrano i vantaggi.

Esempio 1:se un'app web per videoconferenze acquisisce un'app web per presentazioni, può mostrare all'utente i controlli per la navigazione tra le slide. Poiché i controlli sono incorporati direttamente nell'app web per videoconferenze, l'utente non deve passare ripetutamente dalla scheda delle videoconferenze alla scheda Presentata. Eliminato questo onere, l'utente è ora libero di concentrarsi maggiormente sulla presentazione della presentazione.

Esempio 2. L'effetto "corridoio degli specchi" si verifica quando una superficie catturata viene visualizzata di nuovo nel luogo acquisito. In particolare, se l'utente sceglie di acquisire la scheda in cui si svolge una chiamata in videoconferenza e l'app web per videoconferenze esegue il rendering di un'anteprima locale, si osserva questo temuto effetto. Tramite l'handle di acquisizione è possibile rilevare e limitare l'acquisizione automatica dell'immagine, ad esempio tramite l'app web che elimina l'anteprima locale.

Informazioni sull'handle di acquisizione

L'handle di acquisizione è composto da due parti complementari:

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

Lato acquisito

Le app web possono esporre informazioni alle potenziali app web di acquisizione. Per farlo, chiama navigator.mediaDevices.setCaptureHandleConfig() con un oggetto facoltativo costituito dai seguenti membri:

• handle: può essere qualsiasi stringa fino a un massimo di 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 è in permittedOrigins.

L'esempio seguente mostra come esporre un UUID generato in modo casuale come handle e l'origine in 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 se sta per essere acquisita. A meno che, ovvero, l'app web di acquisizione utilizzi le informazioni di CaptureHandle per stabilire la comunicazione con l'app web acquisita (ad esempio tramite la messaggistica tramite un worker o un'infrastruttura cloud condivisa).

Acquisizione lato

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 leggerla. Se è disponibile un handle di acquisizione e l'app web di acquisizione viene aggiunta a permittedOrigins, questa chiamata restituisce un oggetto con i seguenti membri:

• handle: il valore della stringa impostato dall'app web acquisita con navigator.mediaDevices.setCaptureHandleConfig().
• origin: l'origine dell'app web acquisita se exposeOrigin è stato 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 di CaptureHandle ascoltando gli eventi "capturehandlechange" su un oggetto MediaStreamTrack. Le modifiche si verificano quando:

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

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

Sicurezza e privacy

La collaborazione tra l'acquisizione e l'acquisizione di app web è teoricamente possibile oggi, incorporando "pixel magici" nell'app web acquisita o incorporando codici QR nello stream video, ad esempio. Il punto di manipolazione di acquisizione offre un meccanismo più semplice, affidabile e sicuro. Inoltre, consente all'app web acquisita di selezionare il pubblico, selezionando le origini o tutto il web.

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

Esempio

Puoi giocare con l'handle di acquisizione eseguendo l'esempio su Glitch. Assicurati di controllare il codice sorgente.

Demo

Alcune demo sono disponibili all'indirizzo:

• Telecomando
• Rilevamento autoscatto

Rilevamento delle caratteristiche

Per verificare se getCaptureHandle() è supportato, usa:

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

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

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

Passaggi successivi

Ecco un'anteprima di cosa aspettarsi nel prossimo futuro che miglioreranno la condivisione dello schermo sul web:

• Acquisizione regione permette di ritagliare una traccia video derivata dall'acquisizione della visualizzazione della scheda corrente.
• L'impostazione Messa a fuoco condizionale consente all'app web di acquisizione di indicare al browser di impostare lo stato attivo sulla superficie di visualizzazione acquisita o di evitare questo cambiamento.

Feedback

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

Parlaci del design

C'è qualcosa nell'handle di acquisizione che non funziona come ti aspettavi? Oppure mancano metodi o proprietà che ti servono per implementare la tua idea? Hai una domanda o un commento sul modello di sicurezza?

• Segnala un problema relativo alle specifiche sul repository GitHub o aggiungi le tue opinioni a 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 di dettagli possibile e di semplici istruzioni per la riproduzione. Glitch è la soluzione perfetta per condividere riproduzioni in modo facile e veloce.

Mostra il tuo sostegno

Hai intenzione di utilizzare l'handle di acquisizione? 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.

Link utili

• Specifiche
• Spiegazione
• Revisione TAG
• Bug di Chromium
• Voce ChromeStatus.com

Ringraziamenti

Grazie a Joe Medley per aver letto questo articolo.