A plataforma da Web já permite que um app da Web capture uma faixa de vídeo da guia atual. Agora, ele vem com o Region Capture, um mecanismo para cortar essas faixas de vídeo. O aplicativo da web designa uma parte da guia atual como sua área de interesse e o navegador recorta todos os pixels fora dessa área.
Antes, os apps da Web podiam cortar as faixas de vídeo "manualmente". Ou seja, eles podiam manipular cada frame diretamente. Essa estratégia não foi eficiente nem de alto desempenho. A captura de região resolve essas deficiências. O app da Web agora pode instruir o navegador a fazer o trabalho em nome dele.
Sobre a captura de região
Então você criou um site com Dynamic ContentTM. É o melhor app da Web que já existe, e as pessoas não conseguem parar de usá-lo, muitas vezes de forma colaborativa. Uma próxima etapa possível é incorporar recursos de videoconferência virtual. Você decide ficar com isso. Você colabora com um provedor de serviços de videoconferência e incorpora o app da Web dele como um iframe de origem cruzada. O app da Web para videoconferência captura a guia atual como uma faixa de vídeo e a transmite para participantes remotos.
Não tão rápido... Você realmente não quer transmitir os vídeos das pessoas de volta para elas, certo? É melhor cortar essa parte. Mas como? O iframe incorporado não sabe qual conteúdo é exposto e onde. Por isso, ele não pode cortar sem ajuda. Em teoria, é possível passar as coordenadas pretendidas. Mas o que acontece se o usuário redimensionar a janela? Rolar a janela de visualização? Aumenta ou diminui o zoom? Interage com a página de forma a produzir uma mudança de layout? Mesmo que você envie as novas coordenadas ao iframe de captura, os problemas de tempo ainda podem levar a alguns frames cortados incorretamente.
Vamos usar a captura de região. Há uma Element na sua página, talvez uma <div>, que tem o conteúdo principal. Vamos chamá-lo de mainContentArea. Você quer que o app da Web de videoconferência capture e compartilhe remotamente a área definida pela caixa delimitadora desse elemento. Então você deriva um CropTarget de mainContentArea. Você transmite esse CropTarget para o app da Web de videoconferência. Depois de cortar a faixa de vídeo usando o CropTarget, os frames dessa faixa agora consistem apenas nos pixels que estão dentro da caixa delimitadora de mainContentArea. Se o mainContentArea mudar de tamanho, forma ou local, a faixa de vídeo vai acompanhar o vídeo, sem precisar de nenhuma entrada adicional de nenhum app da Web.
Vamos revisar essas etapas novamente:
Para definir uma CropTarget no seu app da Web, chame CropTarget.fromElement() com o elemento que preferir como entrada.
// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
Você transmite o CropTarget para o app de videoconferência da Web.
// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);
O app da Web de videoconferência pede que o navegador corte a faixa até a área definida por CropTarget chamando cropTo() na faixa de videoconferência de autocaptura com o alvo do corte recebido do app da Web principal.
// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();
// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);
// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.
Et voilà! Tudo pronto.
Análise detalhada
Detecção de recursos
Para conferir se CropTarget.fromElement() é compatível, use:
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
Como derivar um CropTarget
Vamos nos concentrar no elemento chamado mainContentArea. Para derivar um CropTarget dele, chame CropTarget.fromElement(mainContentArea). A promessa retornada será resolvida com um novo objeto CropTarget se for bem-sucedida. Caso contrário, ela será rejeitada se você tiver criado um número excessivo de objetos CropTarget.
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
Ao contrário de um Element, um objeto CropTarget é serializável. Ele pode ser transmitido para outro documento usando Window.postMessage(), por exemplo.
Corte
Ao capturar a guia, a faixa de vídeo é instanciada como um BrowserCaptureMediaStreamTrack, que é uma subclasse de MediaStreamTrack. Essa subclasse expõe cropTo(). Chame track.cropTo(cropTarget) para começar a cortar nos contornos de mainContentArea (o elemento de que cropTarget foi derivado).
Se for bem-sucedida, a promessa vai ser resolvida quando for possível garantir que todos os frames de vídeo subsequentes consistam nos pixels que se enquadram na caixa delimitadora do mainContentArea.
Se falhar, a promessa vai ser rejeitada. Isso acontecerá se:
- O
CropTargetfoi criado em outra guia. Por enquanto, fique de olho. - O
CropTargetfoi derivado de um elemento que não existe mais. - A música tem clones. Consulte o problema 1509418 (link em inglês).
- A faixa atual não é uma faixa de vídeo de captura automática. Confira abaixo.
O método cropTo() é exposto em qualquer faixa de vídeo de captura de guia, e não apenas na autocaptura. Portanto, é aconselhável verificar se o usuário selecionou a guia atual, antes de tentar cortar a faixa. Isso pode ser feito com o Capture Handle. Também é possível pedir ao navegador para incentivar o usuário a fazer a captura usando preferCurrentTab.
// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);
Para reverter ao estado sem corte, chame cropTo() com null.
// Stop cropping.
await track.cropTo(null);
Conteúdo oclusivo e oculto
No caso da captura de região, somente a posição e o tamanho do destino são relevantes, não o z-index. Os pixels que cobrem o alvo serão capturados. As partes obstruídas do alvo não serão capturadas.
Isso é um resultado do corte de região. Uma alternativa, que será a própria API futura, é a captura no nível do elemento, ou seja, captura apenas pixels associados ao alvo, independentemente das oclusões. Essa API tem um conjunto diferente de requisitos de segurança e privacidade do corte simples.
Segurança e privacidade
A captura de região permite que um app da Web que já está observando todos os pixels na guia remova voluntariamente alguns deles. Ele é patenteadamente seguro, já que nenhuma informação nova pode ser obtida.
A captura de região pode ser usada para limitar quais informações são enviadas aos participantes remotos. Por exemplo, talvez você queira compartilhar alguns slides, mas não as anotações do apresentador.
Compartilhar as anotações remotamente é altamente indesejável. Inserir captura de região.
Observe que, localmente, a captura de região não adiciona nenhuma garantia de segurança. Ao entregar uma faixa a outro documento, o documento de destino ainda pode desfazer o corte da faixa e ter acesso a todos os pixels da guia capturada.
O Chrome desenha uma borda azul ao redor das bordas das guias capturadas. Ao cortar, o Chrome geralmente desenha a borda azul ao redor do alvo cortado.
Demonstração
Você pode testar a captura de região executando a demonstração no Glitch. Não se esqueça de conferir o código-fonte.
Suporte ao navegador
Compatibilidade com navegadores
- 104
- 104
- x
- x
A captura de região está disponível a partir do Chrome 104 apenas em computadores.
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 a captura de outras guias.
- 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.
- Uma API de captura no nível do elemento pode ser fornecida.
Feedback
A equipe do Chrome e a comunidade de padrões da Web querem saber mais sobre suas experiências com o Region Capture.
Fale sobre o design
Alguma coisa na captura de região 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 captura de região? 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
Agradecimentos
Agradecemos a Joe Medley por consultar este artigo.