Os apps da Web já podem usar o getDisplayMedia()
para capturar guias, janelas ou telas como um MediaStream. No Chrome 109, você pode aproveitar as seguintes melhorias:
- Quando o compartilhamento de tela é iniciado, o Foco condicional permite que o app da Web de captura controle se o navegador foca a guia ou janela capturada ou se a guia de captura permanece ativa.
- A opção
suppressLocalAudioPlayback
controla se o áudio de uma guia é tocado nos alto-falantes locais do usuário.
Foco condicional
Com o Foco condicional, os apps da Web podem controlar se a guia ou janela capturada será focada no início da captura ou se a página de captura vai permanecer em foco.
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");
}
Saiba mais em Compartilhamento de tela aprimorado com foco condicional.
Suprimir a reprodução de áudio local
É comum que os colegas se reúnam em uma sala para que um deles apresente uma solução de videoconferência na sala usando um laptop com um monitor dedicado e alto-falantes. O apresentador geralmente silencia o próprio laptop e usa os alto-falantes externos, que costumam ser mais altos. Isso também garante que o áudio esteja em sincronia com o vídeo. A restrição de áudio suppressLocalAudioPlayback
economiza tempo aqui. Quando definido como true
, ele indica que o navegador precisa parar de redirecionar o áudio para os alto-falantes locais quando a captura for iniciada. O valor padrão desta restrição é 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
No momento em que este artigo foi escrito, suppressLocalAudioPlayback
ainda não funcionava com applyConstraints()
. Consulte bug 1381959.
Agradecimentos
Imagem principal de Brett Jordan.
Agradecemos a Rachel Andrew pela leitura deste artigo.