Controles de compartilhamento de tela que preservam a privacidade

François Beaufort

Elad Alon

Já é possível compartilhar guias, janelas e telas na plataforma da Web com a API Screen Capture. Em resumo, getDisplayMedia() permite que o usuário selecione uma tela ou parte dela (como uma janela) para capturar como um stream de mídia. Esse stream pode ser gravado ou compartilhado com outras pessoas pela rede. Houve mudanças recentes na API para preservar melhor a privacidade e evitar o compartilhamento acidental de informações pessoais.

Confira uma lista de controles que você pode usar para compartilhar a tela preservando a privacidade:

• A opção displaySurface pode indicar que o app da Web prefere oferecer um tipo específico de superfície de exibição (guias, janelas ou telas).
• A opção monitorTypeSurfaces pode ser usada para impedir que o usuário compartilhe uma tela inteira.
• A opção surfaceSwitching indica se o Chrome permite que o usuário alterne dinamicamente entre guias compartilhadas.
• A opção selfBrowserSurface pode ser usada para impedir que o usuário compartilhe a guia atual. Isso evita o efeito "salão de espelhos".
• A opção systemAudio garante que o Chrome ofereça apenas capturas de áudio relevantes para o usuário.

Mudanças em getDisplayMedia()

As seguintes mudanças foram feitas em getDisplayMedia().

A opção displaySurface

Os apps da Web com jornadas de usuário especializadas, que funcionam melhor com o compartilhamento de uma janela ou tela, ainda podem pedir ao Chrome para oferecer janelas ou telas de forma mais destacada no seletor de mídia. A ordem da oferta não muda, mas o painel relevante é pré-selecionado.

Os valores para a opção displaySurface são:

• "browser" para guias.
• "window" para Windows.
• "monitor" para telas.

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});

Não oferecemos a opção de pré-selecionar uma janela ou tela específica. Isso é intencional, porque daria ao app da Web muito poder sobre o usuário.

A opção monitorTypeSurfaces

Para proteger as empresas contra o vazamento de informações particulares por erro dos funcionários, os apps da Web de videoconferência agora podem definir monitorTypeSurfaces como "exclude". O Chrome vai excluir as telas no seletor de mídia. Para incluir, defina como "include". Atualmente, o valor padrão de monitorTypeSurfaces é "include", mas recomendamos que os apps da Web definam esse valor explicitamente, já que o padrão pode mudar no futuro.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});

Um monitorTypeSurfaces: "exclude" explícito é mutuamente exclusivo com displaySurface: "monitor".

A opção surfaceSwitching

Uma das principais razões para compartilhar a tela inteira é o desejo de alternar facilmente entre o compartilhamento de diferentes plataformas durante uma sessão. Para resolver esse problema, o Chrome agora mostra um botão que permite que o usuário alterne dinamicamente o compartilhamento de diferentes guias. Esse botão "Compartilhar essa guia" já estava disponível para extensões do Chrome e agora pode ser usado por qualquer app da Web que chame getDisplayMedia().

Se surfaceSwitching for definido como "include", o navegador vai expor esse botão. Se definido como "exclude", o botão não será mostrado ao usuário. Recomendamos que os apps da Web definam um valor explícito, já que o Chrome pode mudar o valor padrão ao longo do tempo.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

A opção selfBrowserSurface

Em cenários de videoconferência, os usuários costumam errar ao selecionar a guia de videoconferência, o que causa um efeito "salão de espelhos", ruído e confusão geral.

Para proteger os usuários, os apps da Web de videoconferência agora podem definir selfBrowserSurface como "exclude". O Chrome vai excluir a guia atual da lista de guias oferecidas ao usuário. Para incluir, defina como "include". Atualmente, o valor padrão de selfBrowserSurface é "exclude", mas recomendamos que os apps da Web definam esse valor explicitamente, já que o padrão pode mudar no futuro.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

Um selfBrowserSurface: "exclude" explícito é mutuamente exclusivo com preferCurrentTab: true.

A opção systemAudio

O getDisplayMedia() permite capturar áudio com vídeo. Mas nem todo áudio é igual. Considere apps da Web para videoconferência: - Se o usuário compartilhar outra guia, faz sentido capturar o áudio também. - O áudio do sistema, por outro lado, inclui o áudio dos participantes remotos e não deve ser transmitido de volta para eles.

No futuro, talvez seja possível excluir algumas fontes de áudio da captura. Por enquanto, os apps da Web de videoconferência geralmente acham melhor evitar a captura do áudio do sistema. Antes, isso era feito verificando a superfície de exibição escolhida pelo usuário e interrompendo a faixa de áudio se ele compartilhasse a tela. No entanto, isso gera um pequeno problema, já que alguns usuários ficam confusos quando marcam explicitamente a caixa de seleção para compartilhar o áudio do sistema e, em seguida, são informados pelos participantes remotos de que nenhum áudio está chegando.

Ao definir systemAudio como "exclude", um app da Web pode evitar que os usuários fiquem confusos com sinais mistos. O Chrome vai oferecer a opção de capturar áudio com guias e janelas, mas não com telas.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,           // Ask to capture audio; caveat follows.
  systemAudio: "exclude" // Do not offer to capture *system* audio.
});

Atualmente, o valor padrão de systemAudio é "include", mas recomendamos que os apps da Web definam esse valor explicitamente, já que o padrão pode mudar no futuro.

Demonstração

Para testar esses controles de compartilhamento de tela, execute a demonstração no Glitch. Confira o código-fonte.

Suporte ao navegador

• displaySurface, surfaceSwitching e selfBrowserSurface estão disponíveis no Chrome 107 para computadores.

• O systemAudio está disponível no Chrome 105 para computadores.

• monitorTypeSurfaces está disponível no Chrome 119 para computador.

Feedback

A equipe do Chrome e a comunidade de padrões da Web querem saber sobre sua experiência com esses controles de compartilhamento de tela.

Descreva o design

Há algo nos controles de compartilhamento de tela que não funciona como esperado? Ou há métodos ou propriedades que faltam para implementar sua ideia? Tem alguma dúvida ou comentário sobre o modelo de segurança?

• Envie um problema de especificação no repositório do GitHub ou adicione sua opinião a um problema existente.

Problemas com a implementação?

Você encontrou um bug na implementação do Chrome? Ou a implementação é diferente da especificação?

• Envie um bug em https://new.crbug.com. Inclua o máximo de detalhes possível e instruções simples para reproduzir o problema. O Glitch funciona bem para compartilhar código.

Mostrar apoio

Você planeja usar esses controles de compartilhamento de tela? Seu apoio público ajuda a equipe do Chrome a priorizar recursos e mostra a outros fornecedores de navegadores a importância de oferecer suporte a eles.

Envie um tweet para @ChromiumDev e diga onde e como você está usando.

Links úteis

• Especificação
• displaySurface explainer
• monitorTypeSurfaces explainer
• surfaceSwitching explainer
• selfBrowserSurface explainer
• systemAudio explainer
• Análise da TAG

Agradecimentos

Agradecemos a Rachel Andrew pela revisão