Compartilhamento de guias aprimorado com a alça de captura

François Beaufort
François Beaufort
GitHub
Elad Alon

Compatibilidade com navegadores

  • 102
  • 102
  • x
  • x

A plataforma da Web agora inclui o Capture Handle, um mecanismo que ajuda a colaboração entre a captura e a captura de apps da Web. O "Capture Handle" permite que um app da Web de captura identifique o app da Web capturado de maneira ergonômica e segura (se ele tiver sido ativado).

Alguns exemplos ilustram os benefícios.

Exemplo 1:se um app da Web de videoconferência estiver capturando um app de apresentação, ele poderá expor controles para que o usuário navegue entre os slides. Como os controles são incorporados diretamente no app da Web de videoconferência, o usuário não precisa alternar repetidamente entre a guia de videoconferência e a guia apresentada. Com essa sobrecarga, o usuário agora tem liberdade para se concentrar mais na apresentação.

Exemplo 2:o efeito "salão de espelhos" ocorre quando uma superfície capturada é renderizada de volta para o local capturado. Se o usuário escolher capturar a guia em que está ocorrendo uma chamada de videoconferência, e o app da Web de videoconferência renderizar uma visualização local, esse temido efeito será observado. Ao usar o identificador de captura, a autocaptura pode ser detectada e atenuada. Por exemplo, pelo app da Web suprimindo a visualização local.

Ilustração do efeito da Galeria dos espelhos

Sobre a alça de captura

O identificador de captura é composto por duas partes complementares:

  • Os apps da Web capturados podem ativar a exposição de determinadas informações a algumas origens com navigator.mediaDevices.setCaptureHandleConfig().
  • A captura de apps da Web pode ler essas informações com getCaptureHandle() em objetos MediaStreamTrack.

Lado da captura

Os aplicativos da Web podem expor informações a possíveis aplicativos da Web. Ele faz isso chamando navigator.mediaDevices.setCaptureHandleConfig() com um objeto opcional composto pelos seguintes membros:

  • handle: pode ser qualquer string com até 1.024 caracteres.
  • exposeOrigin: se true, a origem do app da Web capturado pode ser exposta para capturar apps da Web.
  • permittedOrigins: os valores válidos são (i) uma matriz vazia, (ii) uma matriz com um único item "*" ou (iii) uma matriz de origens. Se a permittedOrigins consistir no único item "*", o CaptureHandle poderá ser observado por todos os apps da Web de captura. Caso contrário, ele será observável apenas para capturar apps da Web com origem em permittedOrigins.

O exemplo a seguir mostra como expor um UUID gerado aleatoriamente como um identificador e a origem para qualquer app da Web de captura.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

O app da Web capturado não sabe se está sendo capturado. A menos que o app da Web de captura use informações de CaptureHandle para estabelecer a comunicação com o app da Web capturado, usando mensagens por um worker ou uma infraestrutura em nuvem compartilhada, por exemplo.

Lado da captura

O app da Web de captura contém um MediaStreamTrack de vídeo e pode ler as informações do identificador de captura chamando getCaptureHandle() nessa MediaStreamTrack. Essa chamada vai retornar null se nenhum identificador de captura estiver disponível ou se o app da Web de captura não tiver permissão para fazer a leitura. Se um identificador de captura estiver disponível e o app da Web de captura for adicionado a permittedOrigins, essa chamada vai retornar um objeto com os seguintes membros:

  • handle: o valor da string definido pelo app da Web capturado com navigator.mediaDevices.setCaptureHandleConfig().
  • origin: a origem do app da Web capturado se exposeOrigin estivesse definido como true. Caso contrário, ele não será definido.

O exemplo a seguir mostra como ler as informações do identificador de captura de uma faixa de vídeo.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

Monitore as mudanças no CaptureHandle detectando eventos "capturehandlechange" em um objeto MediaStreamTrack. As mudanças acontecem quando:

  • O app da Web capturado chama navigator.mediaDevices.setCaptureHandleConfig().
  • Uma navegação entre documentos ocorre no app da Web capturado.
videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Segurança e privacidade

A colaboração entre a captura e a captura de aplicativos da Web é teoricamente possível atualmente, incorporando "pixels mágicos" no aplicativo da Web capturado ou códigos QR no stream de vídeo, por exemplo. O Identificador de captura oferece um mecanismo mais simples, confiável e seguro. Isso também permite que o app da Web capturado selecione o público-alvo, seja de origens selecionadas ou de toda a Web.

O navigator.mediaDevices.setCaptureHandleConfig() só está disponível para frames principais de nível superior em contextos de navegação segura (somente HTTPS).

Exemplo

Você pode testar a alça de captura executando o sample no Glitch. Não se esqueça de consultar o código-fonte.

Demonstrações

Algumas demonstrações estão disponíveis em:

Detecção de recursos

Para verificar se getCaptureHandle() é compatível, use:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

Para verificar se navigator.mediaDevices.setCaptureHandleConfig() é compatível, use:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

A seguir

Veja uma prévia do que vai melhorar o compartilhamento de tela na Web em um futuro próximo:

  • A captura de região permite cortar uma faixa de vídeo derivada da captura de tela da guia atual.
  • O foco condicional permite que o app da Web de captura instrui o navegador a mudar o foco para a superfície da tela capturada ou evitar essa mudança.

Feedback

A equipe do Chrome e a comunidade de padrões da Web querem saber sobre suas experiências com o Capture Handle.

Conte-nos sobre o design

Há algo no identificador de captura que não funciona como você esperava? Ou faltam métodos ou propriedades que você precisa para implementar sua ideia? Tem uma pergunta ou comentário sobre o modelo de segurança?

  • Registre um problema de especificação no repositório do GitHub (link em inglês) ou adicione sua opinião a um problema.

Problemas com a implementação?

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

  • Registre um bug em https://new.crbug.com. Inclua o máximo de detalhes possível e instruções simples para reproduzi-lo. O Glitch é ótimo para compartilhar repetições rápidas e fáceis.

Mostrar apoio

Você planeja usar o identificador de captura? Seu apoio público ajuda a equipe do Chrome a priorizar recursos e mostra a outros fornecedores de navegadores como é essencial oferecer suporte a eles.

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

Agradecimentos

Agradecemos a João Medley por revisar este artigo.