Las apps web ya pueden usar getDisplayMedia()
para capturar pestañas, ventanas o pantallas como MediaStream. A partir de Chrome 109, puedes aprovechar las siguientes mejoras:
- Cuando se inicia el uso compartido de la pantalla, el enfoque condicional permite que la app web de captura controle si el navegador enfoca la pestaña o ventana capturada, o si la pestaña 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 capturada estará enfocada cuando comience la captura o si la página de captura 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");
}
Para obtener más información, consulta Mejor uso compartido de pantalla con enfoque condicional.
Cómo 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 en una solución de videoconferencia en la sala con un monitor y bocinas dedicados. Por lo general, el presentador silencia su propia laptop y usa las bocinas externas, que suelen ser más altas. Esto también garantiza que el audio esté sincronizado con el video. La restricción de audio suppressLocalAudioPlayback
ahorra tiempo aquí. Cuando se establece en true
, indica que el navegador debe dejar de retransmitir audio a las bocinas locales cuando comienza la captura. El valor predeterminado para 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 de escribir este artículo, suppressLocalAudioPlayback
no funciona con applyConstraints()
.
Consulta el error 1381959.
Agradecimientos
Gracias a Rachel Andrew por revisar este documento.