Beter scherm delen met voorwaardelijke focus

François Beaufort

Elad Alon

Met de Screen Capture API kan de gebruiker een tabblad, venster of scherm selecteren om vast te leggen als mediastream. Deze stream kan vervolgens worden opgenomen of via het netwerk met anderen worden gedeeld. Deze documentatie introduceert Conditional Focus, een mechanisme waarmee webapplicaties kunnen bepalen of het vastgelegde tabblad of venster de focus krijgt wanneer de opname start, of dat de pagina waarop de opname plaatsvindt de focus behoudt.

Browserondersteuning

Conditional Focus is beschikbaar vanaf Chrome versie 109.

Achtergrond

Wanneer een webapplicatie een tabblad of venster vastlegt, staat de browser voor een keuze: moet het vastgelegde oppervlak naar de voorgrond worden gebracht, of moet de pagina die het venster vastlegt, actief blijven? Het antwoord hangt af van de reden voor het aanroepen getDisplayMedia() en van het oppervlak dat de gebruiker uiteindelijk selecteert.

Stel je een hypothetische webapplicatie voor videoconferenties voor. Door track.getSettings().displaySurface uit te lezen en mogelijk de Capture Handle te onderzoeken, kan de webapplicatie voor videoconferenties begrijpen wat de gebruiker heeft gekozen om te delen. Vervolgens:

• Als het vastgelegde tabblad of venster op afstand kan worden bediend, houd dan de videoconferentie in focus.
• Focus anders op het tabblad of venster dat is vastgelegd.

In het bovenstaande voorbeeld behoudt de webapplicatie voor videoconferenties de focus als een presentatie wordt gedeeld, waardoor de gebruiker op afstand door de dia's kan bladeren; maar als de gebruiker ervoor kiest om een ​​teksteditor te delen, schakelt de webapplicatie voor videoconferenties onmiddellijk over naar het vastgelegde tabblad of venster.

De Conditional Focus API gebruiken

Maak een CaptureController instantie aan en geef deze door aan getDisplayMedia() . Door direct na het oplossen van de promise die getDiplayMedia() retourneert setFocusBehavior() aan te roepen, kunt u bepalen of het vastgelegde tabblad of venster de focus krijgt of niet. Dit is alleen mogelijk als de gebruiker een tabblad of venster heeft gedeeld.

const controller = new CaptureController();

// Prompt the user to share a tab, a window or a screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;
if (displaySurface == "browser") {
  // Focus the captured tab.
  controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface == "window") {
  // Do not move focus to the captured window.
  // Keep the capturing page focused.
  controller.setFocusBehavior("focus-capturing-application");
}

Bij de beslissing of er scherpgesteld moet worden, kan rekening worden gehouden met de opnamehendel .

// Retain focus if capturing a tab dialed to example.com.
// Focus anything else.
const origin = track.getCaptureHandle().origin;
if (displaySurface == "browser" && origin == "https://example.com") {
  controller.setFocusBehavior("focus-capturing-application");
} else if (displaySurface != "monitor") {
  controller.setFocusBehavior("focus-captured-surface");
}

Het is zelfs mogelijk om te bepalen of de focus moet worden gelegd vóórdat getDisplayMedia() wordt aangeroepen.

// Focus the captured tab or window when capture starts.
const controller = new CaptureController();
controller.setFocusBehavior("focus-captured-surface");

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

Je kunt setFocusBehavior() zo vaak aanroepen als je wilt voordat de promise is opgelost, of maximaal één keer direct nadat de promise is opgelost. De laatste aanroep overschrijft alle voorgaande aanroepen.

Om precies te zijn:

• De promise getDisplayMedia() retourneert, wordt opgelost bij een microtaak. Het aanroepen van setFocusBehavior() nadat die microtaak is voltooid, veroorzaakt een fout.
• Het aanroepen van setFocusBehavior() meer dan een seconde nadat de opname is gestart, heeft geen effect.

Dat wil zeggen dat beide onderstaande codefragmenten zullen mislukken:

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

// Too late, because it follows the completion of the task
// on which the getDisplayMedia() promise resolved.
// This will throw.
setTimeout(() => {
  controller.setFocusBehavior("focus-captured-surface");
});

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const start = new Date();
while (new Date() - start <= 1000) {
  // Idle for ≈1s.
}

// Because too much time has elapsed, the browser will have
// already decided whether to focus.
// This fails silently.
controller.setFocusBehavior("focus-captured-surface");

Het aanroepen setFocusBehavior() genereert ook een uitzondering in de volgende gevallen:

• De videotrack van de stream die wordt geretourneerd door getDisplayMedia() is niet "live" .
• Nadat de promise getDisplayMedia() retourneert is opgelost, als de gebruiker een scherm heeft gedeeld (niet een tabblad of een venster).

Steekproef

Je kunt Conditional Focus uitproberen door de demo te draaien.

Kenmerkdetectie

Om te controleren of CaptureController.setFocusBehavior() wordt ondersteund, gebruikt u:

if (
  "CaptureController" in window &&
  "setFocusBehavior" in CaptureController.prototype
) {
  // CaptureController.setFocusBehavior() is supported.
}

Feedback

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

Vertel ons iets over het ontwerp.

Werkt er iets met Conditional Focus dat niet naar behoren? Of ontbreken er methoden of eigenschappen die nodig zijn om uw idee te implementeren? Heeft u 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 instructies voor het reproduceren van het probleem.

Toon je steun

Ben je van plan om Conditional Focus 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.

Handige links

• Specificatie
• Uitleg
• TAG-recensie

Dankbetuigingen

Met dank aan Rachel Andrew voor het nakijken van dit document.