Mejoras en el uso compartido de pantalla en Chrome 109

François Beaufort

GitHub

Elad Alon

GitHub

Las apps web ya pueden usar getDisplayMedia() para capturar pestañas, ventanas o pantallas como un elemento MediaStream. A partir de Chrome 109, puedes aprovechar las siguientes mejoras:

• Cuando comienza el uso compartido de pantalla, el enfoque condicional permite que la aplicación web de captura controle si el navegador enfoca la pestaña o ventana capturadas, o si la pestaña de captura permanece activa.
• La opción suppressLocalAudioPlayback controla si el audio que se reproduce en una pestaña se reproducirá en las bocinas locales del usuario.

Enfoque condicional

Con el enfoque condicional, las apps web ahora pueden controlar si la pestaña o ventana capturadas se enfocará cuando comience la captura o si esta debe permanecer enfocada.

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");
}

Consulta Mejor uso compartido de pantalla con enfoque condicional para obtener más información.

Suprimir la reproducción de audio local

Es común que los colegas se reúnan en una sala para que uno de ellos presente desde su laptop a una solución de reuniones en la sala con un monitor y bocinas dedicadas. Por lo general, el presentador silencia su propia laptop y usa a los oradores externos, que suelen sonar más fuertes. Esto también garantiza que el audio esté sincronizado con el video. La restricción de audio suppressLocalAudioPlayback ahorra tiempo aquí. Si se establece en true, indica que el navegador debe dejar de retransmitir audio a las bocinas locales cuando se inicie la captura. El valor predeterminado de esta restricción es 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

En el momento en que se redactó este documento, suppressLocalAudioPlayback aún no funcionaba con applyConstraints(). Consulta el Error 1381959.

Agradecimientos

Hero image de Brett Jordan.

Agradecemos a Rachel Andrew por revisar este artículo.