Beter delen van tabbladen met Region Capture

François Beaufort

Elad Alon

Het webplatform biedt al de mogelijkheid om een ​​webapp een videotrack van het huidige tabblad vast te leggen. Het wordt nu geleverd met Region Capture, een mechanisme om deze videotracks bij te snijden. 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, webapps konden elk afzonderlijk frame direct bewerken. Dit was noch robuust noch performant. Region Capture verhelpt deze tekortkomingen. De webapp kan nu de browser opdracht geven om het werk voor hem te doen.

Over Regio Vastleggen

Dus je hebt een website gemaakt met Dynamic Content™. Het is de beste webapp ooit, en mensen kunnen er maar niet mee stoppen, vaak zelfs in samenwerking. Een mogelijke volgende stap is het integreren van mogelijkheden voor virtuele conferenties. Je besluit daarvoor te gaan. Je werkt samen met een bestaande aanbieder van videoconferentiediensten en integreert hun webapp als een cross-origin iframe. De webapp voor videoconferenties legt het huidige tabblad vast als een videotrack en verzendt deze naar externe deelnemers.

Niet zo snel... Je wilt toch niet per se de video's van mensen terugsturen? Snijd dat deel maar weg. Maar hoe? De ingesloten iframe weet niet welke content je waar blootlegt, dus kan niet zonder hulp bijsnijden. In theorie zou je de bedoelde coördinaten kunnen doorgeven. Maar wat gebeurt er als de gebruiker het venster verkleint? De viewport scrollt? In- of uitzoomt? Interactie aangaat met de pagina op een manier die een lay-outwijziging veroorzaakt? Zelfs als je de nieuwe coördinaten naar de iframe stuurt die de opname maakt, kunnen timingproblemen nog steeds leiden tot verkeerd bijgesneden frames.

Laten we dan Region Capture gebruiken. Er staat een Element op je pagina, bijvoorbeeld een <div> , dat de hoofdinhoud bevat. Laten we dit mainContentArea noemen. Je wilt dat de webapp voor videoconferenties het gebied dat wordt gedefinieerd door de bounding box van dit element vastlegt en op afstand deelt. Je leidt dus een CropTarget af van mainContentArea . Je geeft deze CropTarget door aan de webapp voor videoconferenties. Nadat je het videospoor hebt bijgesneden met behulp van deze CropTarget , bestaan ​​de frames op dat spoor nu alleen uit de pixels die binnen de bounding box van mainContentArea vallen. Als mainContentArea van grootte, vorm of locatie verandert, volgt het videospoor dit, 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 web-app 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 Dit doet u door cropTo() aan te roepen op het zelf vastgelegde videospoor met het bijsnijddoel dat u van de hoofdwebapp hebt ontvangen.

// 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 mainContentArea . Om er een CropTarget van af te leiden, roep je CropTarget.fromElement(mainContentArea) aan. De geretourneerde Promise wordt, indien succesvol, omgezet in een nieuw CropTarget object. Anders wordt deze afgewezen als je een onredelijk aantal CropTarget objecten hebt gemint.

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

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

Bijsnijden

Bij het vastleggen via tabbladen wordt het videospoor geïnstantieerd als BrowserCaptureMediaStreamTrack , een subklasse van MediaStreamTrack . Deze subklasse maakt cropTo() beschikbaar. Roep track.cropTo(cropTarget) aan om te beginnen met bijsnijden tot de contouren van mainContentArea (het element waarvan cropTarget is afgeleid).

Als dit lukt, wordt de Promise opgelost als gegarandeerd kan worden dat alle volgende videoframes bestaan ​​uit de pixels die binnen het selectiekader van de mainContentArea vallen.

Indien dit niet lukt, wordt de belofte afgewezen. Dit gebeurt als:

• CropTarget is toegevoegd aan een nieuw tabblad. (Blijf op de hoogte.)
• De CropTarget is afgeleid van een Element dat niet meer bestaat.
• Het nummer heeft klonen . (Zie nummer 1509418. )
• Het huidige nummer is geen zelf opgenomen videotrack; zie hieronder.

De cropTo() -methode is beschikbaar op elke tab-capture videotrack, en niet alleen voor zelf-capture. 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 gedaan met Capture Handle . Het is ook mogelijk om de browser te vragen de gebruiker aan te sporen om zelf-capture te gebruiken met 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

Bij regio-opname worden alleen de positie en grootte van het doelmateriaal vastgelegd, niet de z-index . Pixels die het doelgebied bedekken, worden vastgelegd. Bedekte delen van het doelgebied worden niet vastgelegd.

Dit is een gevolg van het feit dat Region Capture in feite bijsnijden is. Een alternatief, dat in de toekomst een eigen API zal hebben, is Element-level Capture; dat wil zeggen, alleen pixels vastleggen die aan het doel zijn gekoppeld, ongeacht de occlusies. Een dergelijke API heeft andere beveiligings- en privacyvereisten dan gewoon bijsnijden.

Beveiliging en privacy

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

Met regio-opname kunt u beperken welke informatie naar externe deelnemers wordt verzonden. Stel dat u bijvoorbeeld wel enkele dia's wilt delen, maar niet uw sprekersnotities.

Houd er rekening mee dat Region Capture lokaal geen beveiligingsgaranties biedt. Wanneer een track wordt overgedragen naar een ander document, 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 een blauwe rand rond het bijgesneden doel.

Demonstratie

U kunt met Region Capture spelen door de demo uit te voeren.

Browserondersteuning

Regio-opname is alleen beschikbaar in Chrome 104 op desktop.

Wat volgt er?

Hierbij een voorproefje van wat u in de nabije toekomst kunt verwachten wat het delen van schermen op internet zal verbeteren:

• Met Region Capture kunt u ook opnamen van andere tabbladen maken.
• Met voorwaardelijke focus kan de web-app die de opname maakt, de browser opdracht geven om de focus te verleggen naar het opgenomen schermoppervlak, of om een ​​dergelijke focuswijziging te vermijden.
• Er kan een API voor elementregistratie worden aangeboden.

Feedback

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

Vertel ons over het ontwerp

Werkt Region Capture niet zoals verwacht? Of ontbreken er methoden of eigenschappen die u nodig hebt om uw 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 over een bestaand probleem.

Probleem met de implementatie?

Heb je een bug gevonden in de implementatie van Chrome? Of wijkt de implementatie af van de specificatie?

• Meld een bug op https://new.crbug.com . Zorg ervoor dat je zoveel mogelijk details en eenvoudige instructies voor reproductie verstrekt.

Toon steun

Bent u van plan om Region Capture te gebruiken? Uw publieke steun helpt het Chrome-team bij het prioriteren van 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.

Nuttige links

• Specificatie
• Uitlegger
• TAG-beoordeling
• Chromium-bug
• ChromeStatus.com-vermelding

Dankbetuigingen

Dank aan Joe Medley voor het beoordelen van dit artikel.