Migliore condivisione delle schede con Region Capture

François Beaufort

Elad Alon

La piattaforma web consente già a un'app web di registrare un video della scheda corrente. Ora include la funzionalità Region Capture, un meccanismo per ritagliare queste tracce video. L'app web designa una parte della scheda corrente come area di interesse e il browser ritaglia tutti i pixel al di fuori di quell'area.

In precedenza, le app web potevano ritagliare le tracce video "manualmente". In altre parole, le app web possono manipolare direttamente ogni singolo frame. Non si sono dimostrati né solidi né efficaci. La funzionalità Region Capture risolve questi problemi. L'app web ora può indicare al browser di eseguire questa operazione per suo conto.

Informazioni sull'acquisizione delle regioni

Hai quindi creato un sito web con Dynamic ContentTM. È la migliore app web del mondo e le persone non possono smettere di utilizzarla, spesso in modo collaborativo. Un possibile passaggio successivo è incorporare le funzionalità di conferenza virtuale. Decidi di continuare. Collabori con un fornitore di servizi di videoconferenza esistente e incorpora la sua app web come iframe multiorigine. L'app web per videoconferenze acquisisce la scheda corrente come traccia video e la trasmette ai partecipanti da remoto.

Non così in fretta... Non vuoi trasmettere loro i video delle persone, no? È meglio ritagliare quella parte. Ma come? L'iframe incorporato non sa quali contenuti esponi e dove, quindi non può essere ritagliato senza un aiuto. In teoria, potresti passare le coordinate previste. Ma cosa succede se l'utente ridimensiona la finestra? Consente di scorrere l'area visibile? Aumentare o diminuire lo zoom? Interagisce con la pagina in un modo da produrre una modifica del layout? Anche se invii le nuove coordinate all'iframe di acquisizione, i problemi di temporizzazione potrebbero comunque causare il ritaglio errato dei frame.

Usiamo poi Acquisizione regione. Nella pagina è presente un elemento Element, ad esempio <div>, che include i contenuti principali. Chiamiamola mainContentArea. Vuoi che l'app web per videoconferenze acquisisca e condivida da remoto l'area definita dal riquadro di delimitazione di questo elemento. Ricava quindi un valore CropTarget da mainContentArea. Passi questo CropTarget all'app web per videoconferenze. Dopo aver ritagliato la traccia video utilizzando questo parametro CropTarget, i fotogrammi in quella traccia ora sono costituiti solo dai pixel che rientrano nel riquadro di delimitazione di mainContentArea. Se mainContentArea cambia le dimensioni, la forma o la posizione, la traccia video segue le istruzioni, senza richiedere ulteriori input da nessuna delle app web.

Rivediamo di nuovo questi passaggi:

Puoi definire un CropTarget nella tua app web chiamando CropTarget.fromElement() con l'elemento di tua scelta come input.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Passi CropTarget all'app web per videoconferenze.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

L'app web per videoconferenze chiede al browser di ritagliare la traccia nell'area definita da CropTarget chiamando cropTo() sulla traccia video di acquisizione automatica con il target di ritaglio ricevuto dall'app web principale.

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

Evviva! Tutto qui.

Esegui un'analisi dettagliata

Rilevamento delle caratteristiche

Per verificare se CropTarget.fromElement() è supportato, usa:

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

Ricavare un obiettivo di raccolta

Concentriamoci sull'elemento chiamato mainContentArea. Per ricavarne un CropTarget, chiama CropTarget.fromElement(mainContentArea). In caso di esito positivo, la promessa restituita verrà risolta con un nuovo oggetto CropTarget. In caso contrario, verrà rifiutato se hai generato un numero irragionevole di CropTarget oggetti.

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

A differenza di Element, un oggetto CropTarget è serializzabile. Può essere passato a un altro documento, ad esempio utilizzando Window.postMessage().

Ritaglio

Durante l'acquisizione di schede, la traccia video viene creata come un'istanza BrowserCaptureMediaStreamTrack, che è una sottoclasse di MediaStreamTrack. La sottoclasse espone cropTo(). Richiama track.cropTo(cropTarget) per iniziare il ritaglio fino ai contorni di mainContentArea (l'elemento da cui è stato derivato il target)

Se l'esito è positivo, la promessa verrà risolta quando sarà possibile garantire che tutti i fotogrammi video successivi saranno composti dai pixel che rientrano nel riquadro di delimitazione di mainContentArea.

In caso contrario, la promessa verrà rifiutata. Questo si verifica se:

• CropTarget è stato inserito in un'altra scheda. Per il momento, continua a seguirci.)
• CropTarget deriva da un elemento che non esiste più.
• La traccia ha dei cloni. Vedi il problema 1509418.
• La traccia corrente non è una traccia video con acquisizione automatica; vedi sotto.

Il metodo cropTo() è esposto in tutte le tracce video relative all'acquisizione di schede, non solo per l'acquisizione automatica. È quindi consigliabile verificare se l'utente ha selezionato la scheda corrente prima di tentare di ritagliare la traccia. A questo scopo, puoi utilizzare l'handle di acquisizione. È anche possibile chiedere al browser di incoraggiare l'utente a scattare l'acquisizione personale utilizzando preferCurrentTab.

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

Per ripristinare lo stato non ritagliato, chiama cropTo() con null.

// Stop cropping.
await track.cropTo(null);

Occultamento e occultamento di contenuti

Per l'acquisizione della regione, sono importanti solo la posizione e le dimensioni della destinazione, non lo z-index. Verranno acquisiti i pixel che coprono l'obiettivo. Le parti nascoste della destinazione non verranno acquisite.

Ciò è dovuto al fatto che l'acquisizione delle regioni è essenzialmente ritagliata. Un'alternativa, che sarà la sua API futura, è l'acquisizione a livello di elemento. cioè acquisire solo i pixel associati al target, indipendentemente dalle occlusioni. Un'API di questo tipo ha un insieme diverso di requisiti di sicurezza e privacy rispetto a un semplice ritaglio.

Sicurezza e privacy

Acquisizione regione consente a un'app web che già osserva tutti i pixel nella scheda di rimuovere volontariamente alcuni di questi pixel. È brevettamente sicuro, in quanto non è possibile acquisire nuove informazioni.

La funzionalità Acquisizione regione può essere utilizzata per limitare le informazioni inviate ai partecipanti da remoto. Ad esempio, potresti voler condividere alcune slide, ma non le note del relatore.

Tieni presente che a livello locale, l'acquisizione della regione non aggiunge alcuna garanzia di sicurezza. Quando passi una traccia a un altro documento, il documento ricevente può comunque annullare il ritaglio della traccia e ottenere l'accesso a tutti i pixel della scheda acquisita.

Chrome traccia un bordo blu intorno ai bordi delle schede acquisite. Durante il ritaglio, in genere Chrome traccia il bordo blu intorno al target ritagliato.

Demo

Puoi giocare con l'acquisizione della regione eseguendo la demo su Glitch. Essere assicurati di controllare il codice sorgente.

Supporto browser

Acquisizione della regione è disponibile solo da Chrome 104 su computer.

Passaggi successivi

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

• Acquisizione regione supporterà l'acquisizione di altre schede.
• 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.
• Potrebbe essere fornita un'API di acquisizione a livello di elemento.

Feedback

Il team di Chrome e la community degli standard web vogliono conoscere la tua esperienza relativa all'acquisizione della regione.

Parlaci del design

C'è qualcosa di Region Capture 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 possibile di dettagli 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 la funzionalità Acquisizione regione? 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.