La piattaforma web consente già a un'app web di acquisire una traccia video della scheda corrente. Ora è dotato di Region Capture, un meccanismo per ritagliare le tracce video. L'applicazione 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 dei video "manualmente", vale a dire che le app web potevano manipolare direttamente ogni singolo fotogramma. Questo approccio non era né solido né performante. La funzionalità Region Capture risolve questi problemi. L'applicazione web ora può indicare al browser di svolgere l'operazione per suo conto.
Informazioni su Region Capture
Hai creato un sito web con Dynamic ContentTM. È la migliore applicazione web in assoluto e le persone non riescono a smettere di utilizzarla, spesso in collaborazione. Un possibile passaggio successivo è incorporare le funzionalità di conferenza virtuale. Sei tu a decidere di procedere. Collabori con un fornitore di servizi di videoconferenza esistente, incorporando 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 davvero trasmettere loro i video delle persone, vero? Ritaglia meglio quella parte. Ma come? L'iframe incorporato non sa quali contenuti mostri e dove, quindi non può essere ritagliato senza aiuto. In teoria, si potrebbero passare le coordinate desiderate. Ma cosa succede se l'utente ridimensiona la finestra? Fa scorrere l'area visibile? Aumentare o diminuire lo zoom? Interagisce con la pagina in un modo che produce una modifica del layout? Anche se invii le nuove coordinate all'iframe di acquisizione, problemi di sincronizzazione potrebbero comunque causare il ritaglio errato dei fotogrammi.
Usiamo l'acquisizione della 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. Quindi ottieni un CropTarget da mainContentArea. Passi questo CropTarget all'app web per videoconferenze. Dopo aver ritagliato la traccia video utilizzando questo CropTarget, i frame nel canale ora sono composti solo dai pixel che rientrano nel riquadro di delimitazione di mainContentArea. Se mainContentArea cambia dimensione, forma o posizione, la traccia video continua a seguire, senza richiedere alcun input aggiuntivo da nessuna delle due app web.
Esaminiamo nuovamente questi passaggi:
Puoi definire un CropTarget nella tua app web chiamando CropTarget.fromElement() con l'elemento che preferisci 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 il 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 rotta nell'area definita da CropTarget chiamando cropTo() sulla traccia video acquisita autonomamente 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.
E voilà! Tutto qui.
Esegui un'analisi dettagliata
Rilevamento delle funzionalità
Per verificare se CropTarget.fromElement() è supportato, utilizza:
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
Ricavare un RitagliaTarget
Analizziamo l'elemento chiamato mainContentArea. Per ricavare un valore CropTarget da questo codice, 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 creato un numero irragionevole di CropTarget oggetti.
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, viene creata un'istanza della traccia video come BrowserCaptureMediaStreamTrack, che è una sottoclasse di MediaStreamTrack. Questa sottoclasse espone cropTo(). Chiama track.cropTo(cropTarget) per iniziare a ritagliare i contorni di mainContentArea (l'elemento da cui è stato derivato il ritaglio target).
In caso di esito positivo, il problema verrà risolto quando sarà possibile garantire che tutti i fotogrammi video successivi saranno costituiti dai pixel che rientrano nel riquadro di delimitazione dell'mainContentArea.
Se l'esito non va a buon fine, la promessa verrà respinta. Ciò si verifica se:
CropTargetè stato creato in un'altra scheda. (Per il momento, rimani sintonizzato.)CropTargetè stato ricavato da un Elemento che non esiste più.- La traccia ha dei cloni. (vedi il problema 1509418.)
- La traccia corrente non è una traccia video acquisita autonomamente; continua a leggere.
Il metodo cropTo() viene mostrato in qualsiasi traccia video dell'acquisizione di schede, non solo per l'acquisizione automatica. Pertanto, è consigliabile verificare se l'utente ha selezionato la scheda corrente prima di tentare di ritagliare la traccia. Questa operazione può essere eseguita utilizzando l'handle di acquisizione. È anche possibile chiedere al browser di spingere l'utente ad acquisire automaticamente un'immagine 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 nascosti e nascosti
Per l'acquisizione della regione, contano solo la posizione e le dimensioni della destinazione, non lo z-index. Verranno acquisiti i pixel che occupano l'obiettivo. Le parti nascoste della destinazione non verranno acquisite.
Questo è un corollario del ritaglio dell'area geografica. 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. Una simile API ha un insieme di requisiti di sicurezza e privacy diverso rispetto al semplice ritaglio.
Sicurezza e privacy
Region Capture consente a un'app web che sta già osservando tutti i pixel nella scheda, di rimuoverli volontariamente alcuni. È palesemente sicuro, in quanto non è possibile acquisire nuove informazioni.
Questa funzionalità può essere utilizzata per limitare le informazioni inviate ai partecipanti remoti. Ad esempio, potresti voler condividere alcune slide, ma non le note del relatore.
La condivisione delle note da remoto è altamente indesiderata. Acquisizione regione cue.
Tieni presente che a livello locale, Region Capture non aggiunge alcuna garanzia di sicurezza. Quando passi una traccia a un altro documento, il documento di destinazione può comunque annullarne il ritaglio e accedere a tutti i pixel della scheda acquisita.
Chrome disegna un bordo blu intorno ai bordi delle schede acquisite. Durante il ritaglio, Chrome in genere traccia il bordo blu intorno al target ritagliato.
Demo
Puoi giocare con Region Capture eseguendo la demo su Glitch. Assicurati di controllare il codice sorgente.
Supporto del browser
Supporto dei browser
- 104
- 104
- x
- x
La funzionalità Region Capture è disponibile solo in Chrome 104 su computer.
Passaggi successivi
Ecco un'anteprima di cosa aspettarsi nel prossimo futuro che migliorerà la condivisione schermo sul web:
- Region Capture supporterà acquisizioni di altre schede.
- Messa a fuoco condizionale consentirà 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.
- Potrebbe essere fornita un'API Capture a livello di elemento.
Feedback
Il team di Chrome e la community degli standard web vogliono conoscere le tue esperienze con Region Capture.
Descrivi il design
C'è qualcosa in Acquisizione della regione 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 Region Capture? 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.
Link utili
Ringraziamenti
Grazie a Joe Medley per aver letto questo articolo.