Beter delen van tabbladen met Capture Handle

François Beaufort
François Beaufort
GitHub
Elad Alon

Browser Support

  • Chroom: 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 bevordert. Met Capture Handle kan een vastleggende webapp de vastgelegde webapp ergonomisch en betrouwbaar identificeren. (Als de vastgelegde webapp hiervoor toestemming heeft gegeven.)

Enkele voorbeelden illustreren de voordelen.

Voorbeeld 1: Als een webapp voor videoconferenties een presentatie-webapp vastlegt, kan de webapp voor videoconferenties de gebruiker bedieningselementen tonen om tussen dia's te navigeren. Omdat de bedieningselementen direct in de webapp voor videoconferenties zijn geïntegreerd, hoeft de gebruiker niet herhaaldelijk te schakelen tussen het tabblad voor videoconferenties en het weergegeven tabblad. Nu deze last is weggenomen, kan de gebruiker zich beter concentreren op het geven van zijn of haar presentatie.

Voorbeeld 2: Het spiegelpaleiseffect treedt op wanneer een vastgelegd oppervlak wordt gerenderd naar de locatie die wordt vastgelegd. Dit gevreesde effect treedt met name op als de gebruiker ervoor kiest om het tabblad vast te leggen waarop een videoconferentiegesprek plaatsvindt en de webapp voor videoconferenties een lokale preview weergeeft. Met Capture Handle kan zelfregistratie worden gedetecteerd en beperkt, bijvoorbeeld door de webapp de lokale preview te onderdrukken.

Illustratie van het spiegelzaaleffect

Over Capture Handle

Capture Handle bestaat uit twee complementaire delen:

  • Vastgelegde webapps kunnen ervoor kiezen om bepaalde informatie aan bepaalde bronnen bloot te stellen met navigator.mediaDevices.setCaptureHandleConfig() .
  • Webapps die gegevens vastleggen, kunnen die informatie vervolgens lezen met getCaptureHandle() op MediaStreamTrack -objecten.

Gevangen kant

Webapps kunnen informatie vrijgeven aan potentiële webapps die gegevens vastleggen. Dit gebeurt door navigator.mediaDevices.setCaptureHandleConfig() aan te roepen met een optioneel object dat bestaat uit de volgende leden:

  • handle : Kan een tekenreeks zijn van maximaal 1024 tekens.
  • exposeOrigin : Indien true , dan mag de oorsprong van de vastgelegde web-app blootgesteld worden aan vastgelegde web-apps.
  • permittedOrigins : Geldige waarden zijn (i) een lege array, (ii) een array met het enkele item "*" of (iii) een array met oorsprongen. Als permittedOrigins uit het enkele item "*" bestaat, is CaptureHandle waarneembaar voor alle vastleggende webapps. Anders is het alleen waarneembaar voor vastleggende webapps waarvan de oorsprong zich in permittedOrigins bevindt.

Het volgende voorbeeld laat zien hoe u een willekeurig gegenereerde UUID kunt blootstellen als een handvat en de oorsprong voor elke vastleggende web-app.

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

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

Vangende kant

De webapp voor het vastleggen van video 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 webapp voor het vastleggen van video geen leesrechten heeft. Als er wel een vastleghandle beschikbaar is en de webapp voor het vastleggen van video is toegevoegd aan permittedOrigins , retourneert deze aanroep een object met de volgende leden:

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

Het onderstaande voorbeeld laat zien hoe u de opnamehandle-informatie van een videospoor 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...
}

Controleer CaptureHandle wijzigingen door te luisteren naar "capturehandlechange" -gebeurtenissen op een MediaStreamTrack object. Wijzigingen vinden plaats wanneer:

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

Beveiliging en privacy

Samenwerking tussen de opgenomen en opgenomen webapps is vandaag de dag theoretisch mogelijk, bijvoorbeeld door "magische pixels" in de opgenomen webapp te embedden of QR-codes in de videostream te embedden. Capture Handle biedt een eenvoudiger, betrouwbaarder en veiliger mechanisme. Het stelt de opgenomen webapp ook in staat om de doelgroep te selecteren - ofwel de oorsprong of het hele web.

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

Steekproef

Je kunt met Capture Handle spelen door het voorbeeld op Glitch te draaien. Bekijk zeker de broncode .

Demo's

Enkele demo's zijn beschikbaar op:

Functiedetectie

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 er?

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

  • Met regio-opname kunt u een videospoor dat is afgeleid van de display-capture van het huidige tabblad, bijsnijden.
  • Met voorwaardelijke focus kan de webapplicatie die de beelden vastlegt, de browser opdracht geven om de focus te verleggen naar het vastgelegde schermoppervlak, of om een ​​dergelijke focuswijziging te vermijden.

Feedback

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

Vertel ons over het ontwerp

Werkt Capture Handle 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?

Toon steun

Bent u van plan Capture Handle 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.

Dankbetuigingen

Dank aan Joe Medley voor het beoordelen van dit artikel.