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 è disponibile con la funzionalità di acquisizione di 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 quell'area.

In precedenza, le app web potevano ritagliare le tracce video "manualmente", ovvero potevano manipolare direttamente ogni singolo fotogramma. Non si sono dimostrati né solidi né efficaci. 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 ContentTM. È la migliore app web del mondo e gli utenti non possono smettere di utilizzarla, spesso in modo collaborativo. Un possibile passaggio successivo è incorporare le funzionalità di videoconferenza 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 remoti.

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 il ritaglio errato dei frame.

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 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().

Ritaglio

Durante l'acquisizione di schede, la traccia video viene creata come un'istanza 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 da 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 il problema 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 di sé. È 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 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 ostruiti e ostruenti

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à la sua API futura, è l'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.

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.

Tieni presente che localmente, l'acquisizione della regione non aggiunge alcuna garanzia di sicurezza. Quando trasferisci una traccia a un altro documento, il documento di destinazione può comunque annullare il ritaglio della traccia e accedere a tutti i pixel della scheda acquisita.

Chrome disegna un bordo blu attorno 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. Assicurati di controllare il codice sorgente.

Supporto browser

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:

• Acquisizione regione supporterà l'acquisizione 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 relativa all'acquisizione della regione.

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 dalle specifiche?

• 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 del TAG
• Bug di Chromium
• Voce di ChromeStatus.com

Ringraziamenti

Grazie a Joe Medley per aver esaminato questo articolo.