Controles de compartilhamento de tela que preservam a privacidade

O compartilhamento de guias, janelas e telas já é possível na plataforma da Web com a API Screen Capture. Resumindo, getDisplayMedia() permite que o usuário selecione uma tela ou parte dela (como uma janela) para capturar como um stream de mídia. Essa transmissão pode ser gravada ou compartilhada com outras pessoas pela rede. Este artigo apresenta algumas alterações recentes na API para preservar melhor a privacidade e evitar o compartilhamento acidental de informações pessoais.

Confira uma lista de controles que podem ser usados para o compartilhamento de tela que preserva a privacidade:

• A opção displaySurface pode indicar que o app da Web prefere oferecer um tipo de superfície de exibição específico (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 as guias compartilhadas.
• A opção selfBrowserSurface pode ser usada para impedir que o usuário compartilhe a guia atual. Isso evita o efeito "cacho de espelhos".
• A opção systemAudio garante que o Chrome ofereça ao usuário apenas a captura de áudio relevante.

Mudanças no getDisplayMedia()

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

A opção displaySurface

Os apps da Web com jornadas de usuário especializadas, que funcionam melhor com o compartilhamento de janela ou tela, ainda podem pedir que o Chrome ofereça janelas ou telas com mais destaque no seletor de mídia. A ordem da oferta permanece inalterada, mas o painel relevante é pré-selecionado.

Os valores da 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 é padrão, porque isso daria ao aplicativo da Web muito poder sobre o usuário.

A opção monitorTypeSurfaces

Para proteger as empresas contra o vazamento de informações particulares por erros de funcionários, agora os apps de videoconferência da Web podem definir monitorTypeSurfaces como "exclude". O Chrome vai excluir telas no seletor de mídia. Para que ela seja incluída, defina-a como "include". No momento, o valor padrão de monitorTypeSurfaces é "include", mas é recomendado que os apps da Web o definam 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",
});

Observe que um monitorTypeSurfaces: "exclude" explícito é mutuamente exclusivo com displaySurface: "monitor".

A opção surfaceSwitching

Um dos motivos mais citados para compartilhar a tela inteira é o desejo de alternar facilmente entre o compartilhamento de diferentes plataformas durante uma sessão. Para resolver isso, o Chrome agora exibe um botão que permite que o usuário alterne dinamicamente entre o compartilhamento de guias diferentes. O botão "Compartilhar esta guia" já estava disponível para as extensões do Chrome e agora pode ser usado por qualquer app da Web que chame getDisplayMedia().

Se surfaceSwitching estiver definido como "include", o navegador vai expor esse botão. Se definido como "exclude", ele não mostrará esse botão ao usuário. Os apps da Web são incentivados a definir 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 muitas vezes cometem o erro de selecionar a guia de videoconferência, o que gera um efeito de “cadeira de espelhos”, uivando e confusão geral.

Para proteger os usuários contra eles, agora os apps da Web de videoconferência podem definir selfBrowserSurface como "exclude". O Chrome vai excluir a guia atual da lista de guias oferecidas ao usuário. Para que ela seja incluída, defina-a como "include". No momento, o valor padrão de selfBrowserSurface é "exclude", mas é recomendado que os apps da Web o definam explicitamente, já que o padrão pode mudar no futuro.

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

Observe que um selfBrowserSurface: "exclude" explícito é mutuamente exclusivo com preferCurrentTab: true.

A opção systemAudio

getDisplayMedia() permite capturar áudio junto com vídeo. Mas nem todo áudio é criado da mesma forma. Considere usar apps da Web de videoconferência: — Se o usuário compartilhar outra guia, também faz sentido capturar o áudio. - 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. Mas, por enquanto, os apps da Web para videoconferências geralmente acham melhor evitar a captura do áudio do sistema. Antes, isso podia ser feito verificando a superfície de exibição escolhida pelo usuário e interrompendo a faixa de áudio se ele quisesse compartilhar uma tela. No entanto, isso gera um pequeno problema, em que alguns usuários ficam confusos quando marcam explicitamente a caixa de seleção para compartilhar o áudio do sistema e são informados pelos participantes remotos que nenhum áudio está sendo recebido.

Ao definir systemAudio como "exclude", um app da Web pode evitar confundir os usuários com indicadores mistos. O Chrome vai oferecer a captura de áudio junto 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.
});

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

Demonstração

Você pode testar esses controles de compartilhamento de tela executando 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 computador.

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

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

Feedback

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

Fale sobre o design

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

• Registre um problema específico no repositório do GitHub (link em inglês) ou adicione suas ideias 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?

• Informe um bug em https://new.crbug.com. Lembre-se de incluir o máximo de detalhes possível e instruções simples de reprodução. O Glitch funciona bem para compartilhar código.

Mostrar apoio

Você pretende usar esses controles de compartilhamento de tela? O suporte público ajuda a equipe do Chrome a priorizar recursos e mostra a outros fornecedores de navegadores como é importante oferecer suporte a eles.

Envie um tweet para @ChromiumDev e informe onde e como você está usando a plataforma.

Links úteis

• Especificação
• Explicação sobre displaySurface
• Explicação sobre monitorTypeSurfaces
• Explicação sobre surfaceSwitching
• Explicação sobre selfBrowserSurface
• Explicação sobre systemAudio
• Revisão da TAG

Agradecimentos

Imagem principal de John Schnobrich.

Agradecemos a Rachel Andrew pela leitura deste artigo.