Migliore condivisione delle schede con l'handle di acquisizione

Francesco Beaufort
François Beaufort
GitHub
Elad Alon
Elad Alon
GitHub

Supporto dei browser

  • 102
  • 102
  • x
  • x

La piattaforma web ora include l'handle di acquisizione, un meccanismo che facilita la collaborazione tra l'acquisizione e l'acquisizione delle app web. Il punto di manipolazione di acquisizione consente a un'app web di acquisizione di identificare in modo ergonomico e sicuro l'app web acquisita (se l'opzione è attivata per l'app web acquisita).

Alcuni esempi illustrano i vantaggi.

Esempio 1:se un'app web per videoconferenze acquisisce un'app web per le presentazioni, l'app web per videoconferenze può mostrare all'utente i controlli per spostarsi tra le slide. Poiché i controlli sono incorporati direttamente nell'app web per videoconferenze, l'utente non deve passare ripetutamente dalla scheda Videoconferenze alla scheda Presentati. Con questo onere sollevato, l'utente è ora più libero di concentrarsi più a fondo sulla realizzazione della presentazione.

Esempio 2:l'effetto "sala degli specchi" si verifica quando una superficie acquisita viene visualizzata nuovamente nella località acquisita. In particolare, se l'utente sceglie di acquisire la scheda in cui si svolge una videochiamata e l'app web per videoconferenze mostra un'anteprima locale, si noterà questo temuto effetto. Utilizzando l'handle di acquisizione, l'acquisizione automatica può essere rilevata e attenuata; ad esempio, l'app web sopprime l'anteprima locale.

Illustrazione dell'effetto sala degli specchi

Informazioni sull'handle di acquisizione

L'handle di acquisizione è costituito 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 a potenziali app web. Per farlo, chiama navigator.mediaDevices.setCaptureHandleConfig() con un oggetto facoltativo composto dai seguenti membri:

  • handle: può essere qualsiasi stringa fino a 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 acquisire le app web la cui origine è in permittedOrigins.

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

Lato acquisizione

L'app web di acquisizione contiene un video MediaStreamTrack e può leggere le informazioni sull'handle dell'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, la 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 è stato impostato su true. In caso contrario, non è definito.

L'esempio seguente mostra come leggere le informazioni sull'handle dell'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 vengono applicate quando:

  • L'app web acquisita chiama navigator.mediaDevices.setCaptureHandleConfig().
  • Nell'app web acquisita viene eseguita la 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 delle app web è teoricamente possibile oggi, incorporando "pixel magici" nell'app web acquisita o incorporando codici QR nel video stream, ad esempio. Il punto di manipolazione di acquisizione offre un meccanismo più semplice, affidabile e sicuro. Consente inoltre all'app web acquisita di selezionare il pubblico, selezionando le origini 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 giocare con l'handle di acquisizione eseguendo l'esempio su Glitch. Assicurati di controllare il codice sorgente.

Demo

Alcune demo sono disponibili all'indirizzo:

Rilevamento delle 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 che migliorerà la condivisione dello schermo sul web:

  • Region Capture consente di ritagliare una traccia video derivata dall'acquisizione della scheda corrente.
  • Messa a fuoco condizionale consentirebbe all'app web di acquisizione di indicare al browser di spostare lo stato attivo sulla superficie di visualizzazione acquisita o di evitare un tale cambiamento.

Feedback

Il team di Chrome e la community degli standard web vogliono conoscere le tue esperienze con l'handle Capture.

Descrivi il design

C'è qualcosa nell'handle di acquisizione che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno per implementare la tua idea? Hai domande o commenti sul modello di sicurezza?

  • Segnala un problema relativo alle specifiche nel repository GitHub o aggiungi la tua opinione su 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 possibile di dettagli e di semplici istruzioni per la riproduzione. Glitch è ottimo per condividere riproduzioni facili e veloci.

Mostra supporto

Hai intenzione di utilizzare l'handle di acquisizione? Il tuo supporto pubblico aiuta il team di Chrome a dare la 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 Joe Medley per aver letto questo articolo.