Compartilhamento de guias aprimorado com a alça de captura

Francisco Beaufort
François Beaufort
GitHub
Elad alon
Alon Elad
GitHub

Compatibilidade com navegadores

  • 102
  • 102
  • x
  • x

A plataforma da Web agora vem com a alça de captura, um mecanismo que ajuda na colaboração entre apps da Web de captura e captura. A alça de captura permite que um app da Web de captura identifique com ergonomia e confiança o app da Web capturado (se o app da Web capturado tiver sido ativado).

Alguns exemplos ilustram os benefícios.

Exemplo 1: se um app da Web para videoconferência estiver capturando um aplicativo da Web de apresentação, esse aplicativo de videoconferência poderá expor os controles ao usuário para navegar 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 de apresentação. Com esse fardo levantado, o usuário agora está livre para se concentrar mais totalmente na entrega da apresentação.

Exemplo 2:o efeito "hall of espelhos" ocorre quando uma superfície capturada é renderizada de volta para o local que está sendo capturado. Se o usuário escolher capturar a guia de uma videoconferência e o app da Web de videoconferência renderizar uma visualização local, esse efeito temido será observado. Com a alça de captura, a autocaptura pode ser detectada e reduzida, por exemplo, pelo app da Web suprimindo a visualização local.

Ilustração do efeito salão de espelhos

Sobre a alça de captura

A alça de captura tem duas partes complementares:

  • Os apps da Web capturados podem expor 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 capturado

Os apps da Web podem expor informações para apps da Web que seriam capturados. Isso é feito chamando navigator.mediaDevices.setCaptureHandleConfig() com um objeto opcional que consiste nos 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 a apps de captura da Web.
  • permittedOrigins: os valores válidos são (i) uma matriz vazia, (ii) uma matriz com o único item "*" ou (iii) uma matriz de origens. Se a permittedOrigins consistir no único item "*", a CaptureHandle vai ser observável por todos os apps da Web de captura. Caso contrário, ela será observável apenas para capturar apps da Web com origem em permittedOrigins.

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

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

Observe que o app da Web capturado não sabe se está sendo capturado. A menos que isso seja, o app da Web de captura use informações de CaptureHandle para estabelecer comunicação com o app da Web capturado (usando mensagens de 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() no 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 de captura da Web for adicionado a permittedOrigins, essa chamada 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 tiver sido definido como true. Caso contrário, 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 de 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

Teoricamente, a colaboração entre apps da Web capturados e capturados é possível hoje com a incorporação de "pixels mágicos" no app da Web capturado ou de códigos QR no stream de vídeo, por exemplo. A alça de captura oferece um mecanismo mais simples, confiável e seguro. Ela também permite que o app da Web capturado selecione o público-alvo, seja selecionando origens ou toda a Web.

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

Exemplo

Você pode brincar com a alça de captura executando o exemplo no Glitch. Não se esqueça de conferir o código-fonte.

Demonstrações

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

Detecção de recursos

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

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

Para conferir 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 esperar em breve para melhorar o compartilhamento de tela na Web:

  • 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 instrua o navegador a mudar o foco para a superfície de exibição capturada ou evitar essa mudança.

Feedback

A equipe do Chrome e a comunidade de padrões da Web querem saber mais sobre suas experiências com a captura da alça.

Fale sobre o design

Há algo sobre a alça de captura 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 muito bem para compartilhar repetições rápidas e fáceis.

Mostrar apoio

Você planeja usar a alça de captura? 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.

Agradecimentos

Agradecemos a Joe Medley por consultar este artigo.