Migliore condivisione delle schede con Region Capture

François Beaufort

Elad Alon

La piattaforma web consente già a un'app web di acquisire una traccia video della scheda corrente. Ora è dotato di Rilevamento delle regioni, 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 questa area.

In precedenza, le app web potevano ritagliare le tracce video "manualmente", ovvero potevano manipolare direttamente ogni singolo fotogramma. Non era né solido né efficiente. La funzionalità di acquisizione della regione risolve questi problemi. Ora l'app web può chiedere al browser di svolgere il lavoro per suo conto.

Informazioni su Acquisizione regione

Hai creato un sito web con Dynamic Content™. È la migliore app web di sempre e le persone non riescono a smettere di utilizzarla, spesso in collaborazione. Un possibile passaggio successivo è incorporare le funzionalità di videoconferenza virtuale. Decidi di procedere in questo modo. Collabori con un fornitore di servizi di videoconferenza esistente, incorporando la sua app web come iframe cross-origin. L'app web per videoconferenze acquisisce la scheda corrente come traccia video e la trasmette ai partecipanti remoti.

La sezione dei contenuti principali è in blu e l'iframe cross-origin è in rosso.

Non così in fretta… Non vuoi mica trasmettere di nuovo ai tuoi spettatori i loro video, vero? Meglio ritagliare quella parte. Ma come? L'iframe incorporato non sa quali contenuti mostri e dove, quindi non può ritagliarli senza un po' di aiuto. In teoria, potresti passare le coordinate previste. Ma cosa succede se l'utente ridimensiona la finestra? Scorri l'area visibile? Aumenta o diminuisce lo zoom? Interagisce con la pagina in modo da produrre una modifica del layout? Anche se invii le nuove coordinate all'iframe di acquisizione, i problemi di temporizzazione potrebbero comunque causare alcuni frame ritagliati in modo errato.

Utilizziamo quindi la funzionalità Acquisisci area. Nella tua pagina è presente un Element, ad esempio un <div>, che contiene i contenuti principali. Chiamiamola mainContentArea. Vuoi che l'app web di videoconferenza acquisisca e condivida da remoto l'area definita dal riquadro delimitante di questo elemento. Quindi derivi un CropTarget da mainContentArea. Trasmetti questo CropTarget all'app web di videoconferenza. Dopo aver ritagliato la traccia video utilizzando questo CropTarget, i fotogrammi di quella traccia ora consistono solo nei pixel che rientrano nel riquadro delimitante di mainContentArea. Se mainContentArea cambia dimensioni, forma o posizione, la traccia video segue, senza richiedere alcun input aggiuntivo da nessuna delle app web.

Ripercorriamo questi passaggi:

Definisci 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);

Trasmetti il token 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 le videoconferenze chiede al browser di ritagliare la traccia nell'area definita da CropTarget chiamando cropTo() sulla traccia video di acquisizione autonoma 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.

Et voilà! Tutto qui.

Approfondimento

Rilevamento di funzionalità

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

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

Derivazione di un CropTarget

Concentriamoci sull'elemento denominato mainContentArea. Per ricavare un CropTarget, chiama CropTarget.fromElement(mainContentArea). Se l'operazione va a buon fine, la promessa restituita verrà risolta con un nuovo oggetto CropTarget. In caso contrario, verrà rifiutato se hai coniato un numero irragionevole di oggetti CropTarget.

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

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

Nota: prima di Chrome 106, CropTarget.fromElement(mainContentArea) veniva rifiutato se il tipo di mainContentArea non era <div> o iframe.

Ritaglio

Durante la cattura da scheda, la traccia video viene creata come BrowserCaptureMediaStreamTrack, che è una sottoclasse di MediaStreamTrack. Questa sottoclasse espone cropTo(). Chiama track.cropTo(cropTarget) per iniziare il ritaglio in base ai contorni di mainContentArea (l'elemento da cui è stato dedotto cropTarget).

In caso di esito positivo, la promessa verrà risolta quando sarà possibile garantire che tutti i fotogrammi video successivi saranno costituiti dai pixel che rientrano nel riquadro delimitante del mainContentArea.

In caso di esito negativo, la promessa verrà rifiutata. Ciò si verifica se:

• Il token CropTarget è stato coniato in un'altra scheda. (Per il momento, continua a seguirci.)
• CropTarget è stato derivato da un elemento che non esiste più.
• Il canale ha cloni. (vedi issue 1509418).
• La traccia corrente non è una traccia video acquisita autonomamente; leggi di seguito.

Il metodo cropTo() è esposto su qualsiasi traccia video di acquisizione di schede e non solo per l'acquisizione autonoma. È quindi consigliabile verificare se l'utente ha selezionato la scheda corrente prima di tentare di ritagliare la traccia. Questo può essere ottenuto utilizzando Capture Handle. È anche possibile chiedere al browser di indurre l'utente a scattare un selfie 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);

Contenuti che ostruiscono la visuale e contenuti ostruiti

Per la funzionalità di acquisizione della regione, contano solo la posizione e le dimensioni del target, non l'indice z. I pixel che oscurano il target verranno acquisiti. Le parti coperte del target non verranno acquisite.

Questo è un corollario del fatto che la funzionalità Acquisisci area sia essenzialmente un ritaglio. Un'alternativa, che sarà una propria API futura, è la funzionalità Acquisizione a livello di elemento, ovvero l'acquisizione solo dei pixel associati al target, indipendentemente dalle occlusioni. Un'API di questo tipo ha un insieme diverso di requisiti di sicurezza e privacy rispetto al semplice ritaglio.

Il comportamento di Acquisizione regione con contenuti che ostruiscono la visuale.

Sicurezza e privacy

La funzionalità di acquisizione di regioni consente a un'app web che sta già osservando tutti i pixel della scheda di rimuoverne volontariamente alcuni. È chiaramente sicuro, in quanto non è possibile ottenere nuove informazioni.

La funzionalità di acquisizione della regione può essere utilizzata per limitare le informazioni inviate ai partecipanti remoti. Ad esempio, potresti voler condividere alcune slide, ma non le note del presentatore.

Un'app web contenente slide e note del relatore.
La condivisione delle note da remoto è altamente sconsigliata. Acquisizione della regione di indicazione.

Tieni presente che, a livello locale, la funzionalità di acquisizione della regione non offre alcuna garanzia di sicurezza. Quando trasferisci una traccia a un altro documento, il documento di destinazione può comunque ritagliare la traccia e accedere a tutti i pixel della scheda acquisita.

Chrome disegna un bordo blu attorno ai bordi delle schede acquisite. Durante il ritaglio, Chrome disegna generalmente il bordo blu attorno al target ritagliato.

Demo

Puoi provare la funzionalità di acquisizione della regione eseguendo la demo su Glitch. Assicurati di controllare il codice sorgente.

Supporto browser

Supporto dei browser

• 104
• 104
• x
• x

La funzionalità di acquisizione di una regione è disponibile solo su computer a partire da Chrome 104.

Passaggi successivi

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

• La funzionalità di acquisizione di una regione supporterà le acquisizioni di altre schede.
• L'opzione Messa a fuoco condizionale consente all'app web di acquisire per istruire il browser a spostare lo stato attivo sulla superficie di visualizzazione acquisita o a evitare questa modifica dello stato attivo.
• Potrebbe essere fornita un'API Capture a livello di elemento.

Feedback

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

Parlaci del design

C'è qualcosa in merito a Acquisizione regione 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à Acquisisci area? 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.