Beter delen van tabbladen met Capture Handle

François Beaufort
François Beaufort
GitHub
Elad Alon

Browser Support

  • Chrome: 102.
  • Rand: 102.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Het webplatform wordt nu geleverd met Capture Handle, een mechanisme dat de samenwerking tussen vastleggende en vastgelegde webapps vergemakkelijkt. Met Capture Handle kan een vastleggende webapp de vastgelegde webapp op een ergonomische en betrouwbare manier identificeren (mits de vastgelegde webapp hiervoor toestemming heeft gegeven).

Enkele voorbeelden illustreren de voordelen.

Voorbeeld 1: Als een webapplicatie voor videoconferenties een presentatie-webapplicatie vastlegt, kan de webapplicatie voor videoconferenties bedieningselementen aan de gebruiker tonen om tussen dia's te navigeren. Omdat de bedieningselementen direct in de webapplicatie voor videoconferenties zijn ingebed, hoeft de gebruiker niet steeds te schakelen tussen het tabblad voor videoconferenties en het tabblad met de presentatie. Doordat deze last is weggenomen, kan de gebruiker zich nu volledig concentreren op het geven van de presentatie.

Voorbeeld 2: Het 'spiegelpaleis'-effect treedt op wanneer een vastgelegd oppervlak wordt teruggeprojecteerd naar de locatie waar de opname plaatsvindt. Met name als de gebruiker ervoor kiest om het tabblad vast te leggen waarop een videoconferentie plaatsvindt, en de webapplicatie voor videoconferenties een lokale preview weergeeft, zal dit gevreesde effect optreden. Met behulp van Capture Handle kan zelfopname worden gedetecteerd en verholpen; bijvoorbeeld door de webapplicatie de lokale preview te laten onderdrukken.

Illustratie van het spiegelpaleiseffect

Over Capture Handle

De vanghendel bestaat uit twee complementaire onderdelen:

  • Gecapturede webapps kunnen ervoor kiezen om bepaalde informatie aan specifieke bronnen te tonen met navigator.mediaDevices.setCaptureHandleConfig() .
  • Webapplicaties die gegevens vastleggen, kunnen die informatie vervolgens uitlezen met getCaptureHandle() op MediaStreamTrack objecten.

Veroverde kant

Webapps kunnen informatie beschikbaar stellen aan andere webapps die deze informatie willen vastleggen. Dit doen ze door navigator.mediaDevices.setCaptureHandleConfig() aan te roepen met een optioneel object dat bestaat uit de volgende leden:

  • handle : Kan elke tekenreeks van maximaal 1024 tekens zijn.
  • exposeOrigin : Indien true , kan de oorsprong van de vastgelegde webapplicatie worden blootgesteld aan andere vastleggende webapplicaties.
  • permittedOrigins : Geldige waarden zijn (i) een lege array, (ii) een array met het enkele item "*" of (iii) een array met origins. Als permittedOrigins bestaat uit het enkele item "*" , dan is CaptureHandle waarneembaar voor alle webapplicaties die captures uitvoeren. Anders is het alleen waarneembaar voor webapplicaties die captures uitvoeren en waarvan de origin in permittedOrigins voorkomt.

Het volgende voorbeeld laat zien hoe je een willekeurig gegenereerde UUID als handle en oorsprong beschikbaar kunt stellen aan elke webapplicatie die gegevens vastlegt.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Houd er rekening mee dat de vastgelegde webapplicatie niet weet dat deze wordt vastgelegd. Tenzij de vastleggende webapplicatie CaptureHandle informatie gebruikt om communicatie met de vastgelegde webapplicatie tot stand te brengen (bijvoorbeeld via berichtenverkeer tussen een worker of een gedeelde cloudinfrastructuur).

Vangende kant

De webapplicatie die de video vastlegt, bevat een MediaStreamTrack en kan de informatie over de vastleghandle lezen door getCaptureHandle() aan te roepen op die MediaStreamTrack . Deze aanroep retourneert null als er geen vastleghandle beschikbaar is of als de webapplicatie die de video vastlegt geen toestemming heeft om deze te lezen. Als er wel een vastleghandle beschikbaar is en de webapplicatie die de video vastlegt is toegevoegd aan permittedOrigins , retourneert deze aanroep een object met de volgende leden:

  • handle : De tekenreeks die is ingesteld door de vastgelegde web-app met navigator.mediaDevices.setCaptureHandleConfig() .
  • origin : De oorsprong van de vastgelegde webapplicatie als exposeOrigin is ingesteld op true . Anders is deze niet gedefinieerd.

Het volgende voorbeeld laat zien hoe u de informatie over de opnamehandle uit een videospore kunt lezen.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

Monitor wijzigingen CaptureHandle door te luisteren naar "capturehandlechange" -gebeurtenissen op een MediaStreamTrack object. Wijzigingen treden op wanneer:

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Beveiliging en privacy

Samenwerking tussen de webapp die de opname verzorgt en de webapp die de opname verzorgt, is theoretisch gezien al mogelijk door bijvoorbeeld "magische pixels" in de webapp te integreren of QR-codes in de videostream op te nemen. Capture Handle biedt een eenvoudiger, betrouwbaarder en veiliger mechanisme. Het stelt de webapp die de opname verzorgt ook in staat om de doelgroep te selecteren – specifieke bronnen of het hele web.

Houd er rekening mee dat navigator.mediaDevices.setCaptureHandleConfig() alleen beschikbaar is voor mainframes op het hoogste niveau in beveiligde browseomgevingen (alleen HTTPS).

Steekproef

Je kunt met Capture Handle experimenteren door het voorbeeld uit te voeren.

Demo's

Enkele demo's zijn beschikbaar op:

Kenmerkdetectie

Om te controleren of getCaptureHandle() wordt ondersteund, gebruikt u:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

Om te controleren of navigator.mediaDevices.setCaptureHandleConfig() wordt ondersteund, gebruikt u:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

Wat volgt?

Hier is een voorproefje van wat je in de nabije toekomst kunt verwachten om schermdeling op het web te verbeteren:

  • Met Region Capture kan een videospore, afgeleid van een schermopname van het huidige tabblad, worden bijgesneden.
  • Met Conditional Focus kan de webapplicatie die het scherm vastlegt de browser instrueren om de focus naar het vastgelegde schermoppervlak te verplaatsen of juist te voorkomen dat de focus verandert.

Feedback

Het Chrome-team en de webstandaardgemeenschap willen graag meer horen over uw ervaringen met Capture Handle.

Vertel ons iets over het ontwerp.

Werkt er iets aan Capture Handle niet zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heb je een vraag of opmerking over het beveiligingsmodel?

  • Dien een specificatieprobleem in op de GitHub-repository , of voeg je gedachten toe aan 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 via https://new.crbug.com . Vermeld daarbij zoveel mogelijk details en eenvoudige instructies om het probleem te reproduceren.

Toon je steun

Ben je van plan Capture Handle te gebruiken? Jouw 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.

Dankbetuigingen

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