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.