Verbesserungen bei der Bildschirmfreigabe in Chrome 109

Beaufort
François Beaufort
Elad Alon
Elad Alon

Webanwendungen können getDisplayMedia() bereits verwenden, um Tabs, Fenster oder Bildschirme als MediaStream aufzunehmen. Ab Chrome 109 profitieren Sie von den folgenden Verbesserungen:

  • Beim Start der Bildschirmfreigabe kann die Erfassungs-Web-App mithilfe der Funktion Bedingter Fokus steuern, ob der dargestellte Tab oder das Fenster im Browser fokussiert wird oder ob der Erfassungstab aktiv bleibt.
  • Mit der Option „suppressLocalAudioPlayback“ wird festgelegt, ob die Audioinhalte, die auf einem Tab wiedergegeben werden, über die lokalen Lautsprecher des Nutzers abgespielt werden.

Bedingter Fokus

Mithilfe des bedingten Fokus können Web-Apps jetzt steuern, ob der erfasste Tab oder das erfasste Fenster beim Start der Aufnahme im Fokus ist oder ob die Erfassungsseite im Fokus bleiben soll.

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("no-focus-change");
}

Weitere Informationen finden Sie unter Bessere Bildschirmfreigabe mit bedingtem Fokus.

Lokale Audiowiedergabe unterdrücken

Es ist üblich, dass sich Kollegen in einem Raum versammeln, um eine Präsentation von ihrem Laptop für eine Konferenzlösung mit einem speziellen Monitor und Lautsprechern zu halten. Der Vortragende schaltet in der Regel seinen eigenen Laptop stumm und verwendet die externen Lautsprecher, die oft lauter sind. Dadurch ist auch sichergestellt, dass Ton und Video synchron sind. Die Audioeinschränkung suppressLocalAudioPlayback spart hier Zeit. Ist sie auf true gesetzt, bedeutet dies, dass der Browser die Audioweiterleitung an die lokalen Lautsprecher beenden soll, sobald die Aufnahme beginnt. Der Standardwert für diese Einschränkung ist false.

// Prompt the user to share a tab, a window or a screen with audio.
// If successful, stop the captured audio from being played out over
// the local device’s speakers.
const stream = await navigator.mediaDevices.getDisplayMedia({
  audio: { suppressLocalAudioPlayback: true },
});
const [audioTrack] = stream.getAudioTracks();
const settings = audioTrack.getSettings();
console.log(settings.suppressLocalAudioPlayback); // true

Zum Zeitpunkt der Erstellung dieses Dokuments funktioniert suppressLocalAudioPlayback noch nicht mit applyConstraints(). Siehe Fehler 1381959.

Danksagungen

Hero-Image von Brett Jordan

Vielen Dank an Rachel Andrew für die Rezension dieses Artikels.