Beter delen van tabbladen met Region Capture

François Beaufort

Elad Alon

Op het webplatform kan een webapp al een videotrack van het huidige tabblad vastleggen. Het wordt nu geleverd met Region Capture, een mechanisme voor het bijsnijden van deze videotracks. De webapp wijst een deel van het huidige tabblad aan als interessegebied, en de browser snijdt alle pixels buiten dat gebied bij.

Webapps konden voorheen videotracks “handmatig” bijsnijden. Dat wil zeggen dat webapps elk afzonderlijk frame rechtstreeks kunnen manipuleren. Dit was noch robuust, noch performant. Regio Capture pakt deze tekortkomingen aan. De webapp kan de browser nu opdracht geven het werk namens hem te doen.

Over regioregistratie

U heeft dus een website gemaakt met Dynamic Content™. Het is de beste webapp ooit, en mensen kunnen er maar niet mee ophouden hem te gebruiken, vaak samen. Een mogelijke volgende stap is het inbedden van virtuele conferentiemogelijkheden. Je besluit daarin mee te gaan. Je werkt samen met een bestaande dienstverlener voor videoconferenties en integreert hun webapp als een cross-origin iframe. De webapp voor videoconferenties legt het huidige tabblad vast als een videotrack en verzendt dit naar externe deelnemers.

Niet zo snel... Je wilt toch niet echt de eigen video's van mensen naar hen terugsturen? Je kunt dat gedeelte beter wegsnijden. Maar hoe? Het ingebedde iframe weet niet welke inhoud u blootstelt en waar, en kan dus niet zonder enige hulp worden bijgesneden. Je zou in theorie de beoogde coördinaten kunnen doorgeven. Maar wat gebeurt er als de gebruiker het formaat van het venster wijzigt? Scrollt u door de viewport? In- of uitzoomen? Interageert met de pagina op een manier die een lay-outwijziging teweegbrengt? Zelfs als u de nieuwe coördinaten naar het vastgelegde iframe verzendt, kunnen timingproblemen nog steeds leiden tot verkeerd bijgesneden frames.

Laten we dan Regio Capture gebruiken. Er staat een Element op uw pagina, misschien een <div> , dat de hoofdinhoud bevat. Laten we het mainContentArea noemen. U wilt dat de webapp voor videoconferenties het gebied vastlegt en op afstand deelt dat wordt gedefinieerd door het selectiekader van dit element. U leidt dus een CropTarget af van mainContentArea . U geeft deze CropTarget door aan de webapp voor videoconferenties. Na het bijsnijden van de videotrack met behulp van deze CropTarget , bestaan ​​de frames op die track nu alleen uit de pixels die binnen het selectiekader van mainContentArea vallen. Als mainContentArea van grootte, vorm of locatie verandert, volgt de videotrack mee, zonder dat er extra invoer van een van de webapps nodig is.

Laten we deze stappen nog eens doornemen:

U definieert een CropTarget in uw webapp door CropTarget.fromElement() aan te roepen met het element van uw keuze als invoer.

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

U geeft de CropTarget door aan de webapp voor videoconferenties.

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

De webapp voor videoconferenties vraagt ​​de browser om het spoor bij te snijden tot het gebied dat is gedefinieerd door CropTarget door cropTo() aan te roepen op het zelf vastgelegde videospoor met het bijsnijddoel ontvangen van de hoofdwebapp.

// 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.

En voilà! Je bent klaar.

Diepe duik

Functiedetectie

Om te controleren of CropTarget.fromElement() wordt ondersteund, gebruikt u:

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

Een CropTarget afleiden

Laten we ons concentreren op het element genaamd mainContentArea . Om er een CropTarget van af te leiden, roept u CropTarget.fromElement(mainContentArea) aan. De geretourneerde Promise wordt, indien succesvol, opgelost met een nieuw CropTarget -object. Anders wordt het afgewezen als u een onredelijk aantal CropTarget -objecten heeft geslagen.

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

In tegenstelling tot een Element is een CropTarget -object serialiseerbaar . Het kan bijvoorbeeld aan een ander document worden doorgegeven met behulp van Window.postMessage() .

Bijsnijden

Bij het vastleggen van tabbladen wordt de videotrack geïnstantieerd als een BrowserCaptureMediaStreamTrack , een subklasse van MediaStreamTrack . Die subklasse stelt cropTo() bloot. Roep track.cropTo(cropTarget) aan om te beginnen met bijsnijden naar de contouren van mainContentArea (het element waarvan cropTarget is afgeleid).

Als dit lukt, zal de belofte worden opgelost wanneer gegarandeerd kan worden dat alle volgende videoframes zullen bestaan ​​uit de pixels die binnen het selectiekader van de mainContentArea vallen.

Als dit niet lukt, wordt de belofte afgewezen. Dit zal gebeuren als:

• De CropTarget is op een ander tabblad geslagen. (Voor nu: blijf op de hoogte.)
• De CropTarget is afgeleid van een element dat niet meer bestaat.
• De track bevat klonen . (Zie uitgave 1509418. )
• Het huidige nummer is geen zelfopname-videotrack; zie hieronder.

De cropTo() methode wordt weergegeven op elke videotrack voor het vastleggen van tabbladen, en niet alleen voor zelfopname. Het is daarom raadzaam om te controleren of de gebruiker het huidige tabblad heeft geselecteerd, voordat u probeert de track bij te snijden. Dit kan worden bereikt met behulp van Capture Handle . Het is ook mogelijk om de browser te vragen de gebruiker aan te zetten tot zelfopname met behulp van preferCurrentTab .

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

Om terug te keren naar de niet-bijgesneden staat, roept u cropTo() aan met null .

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

Afsluitende en afgesloten inhoud

Voor Regio Capture zijn alleen de positie en grootte van het doel van belang, niet de z-index . Pixels die het doel afsluiten, worden vastgelegd. Afgesloten delen van het doel worden niet vastgelegd.

Dit is een uitvloeisel van het feit dat Regio Capture feitelijk bijsnijden is. Een alternatief, dat zijn eigen toekomstige API zal zijn, is Capture op Element-niveau; dat wil zeggen: alleen pixels vastleggen die verband houden met het doel, ongeacht occlusies. Zo’n API heeft een andere set beveiligings- en privacyvereisten dan eenvoudig bijsnijden.

Beveiliging en privacy

Met Region Capture kan een webapp die al alle pixels op het tabblad observeert, vrijwillig enkele van die pixels verwijderen. Het is overduidelijk veilig, omdat er geen nieuwe informatie kan worden verkregen.

Region Capture kan worden gebruikt om te beperken welke informatie naar externe deelnemers wordt verzonden. Misschien wilt u bijvoorbeeld enkele dia's delen, maar niet uw sprekersnotities.

Houd er rekening mee dat Region Capture lokaal geen veiligheidsgaranties biedt. Wanneer u een track aan een ander document overdraagt, kan het ontvangende document de track nog steeds ongedaan maken en toegang krijgen tot alle pixels van het vastgelegde tabblad.

Chrome tekent een blauwe rand rond de randen van vastgelegde tabbladen. Bij het bijsnijden tekent Chrome doorgaans de blauwe rand rond het bijgesneden doel.

Demo

Je kunt met Region Capture spelen door de demo op Glitch uit te voeren. Zorg ervoor dat u de broncode bekijkt .

Browser-ondersteuning

Regio Capture is alleen beschikbaar vanaf Chrome 104 op desktop.

Wat is het volgende

Hier is een voorproefje van wat u in de nabije toekomst kunt verwachten om het delen van schermen op internet te verbeteren:

• Region Capture ondersteunt opnames van andere tabbladen.
• Voorwaardelijke focus zorgt ervoor dat de vastleggende webapp de browser kan instrueren om de focus naar het vastgelegde weergaveoppervlak te verleggen of een dergelijke focusverandering te vermijden.
• Mogelijk is er een Capture API op elementniveau beschikbaar.

Feedback

Het Chrome-team en de webstandaardengemeenschap willen graag horen over uw ervaringen met Region Capture.

Vertel ons over het ontwerp

Is er iets aan Regio Capture dat niet werkt zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heeft u een vraag of opmerking over het beveiligingsmodel?

• Dien een spec-probleem in op de GitHub-repository of voeg uw mening toe aan een bestaand probleem.

Probleem met de implementatie?

Heeft u een bug gevonden in de implementatie van Chrome? Of wijkt de uitvoering af van de specificaties?

• Dien een bug in op https://new.crbug.com . Zorg ervoor dat u zoveel mogelijk details en eenvoudige reproductie-instructies opneemt. Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Toon steun

Bent u van plan Regio Capture te gebruiken? Uw publieke steun helpt het Chrome-team prioriteiten te stellen voor functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Stuur een tweet naar @ChromiumDev en laat ons weten waar en hoe je het gebruikt.

Handige links

• Specificatie
• Uitlegger
• TAG-beoordeling
• Chroom-bug
• ChromeStatus.com-invoer

Dankbetuigingen

Met dank aan Joe Medley voor het beoordelen van dit artikel.