Como funciona o rastreamento de mãos no navegador

Você pode experimentar agora. Abra Ink, ligue a câmera e aponte com o indicador para desenhar um fio de cor. Junte o polegar e o indicador para recolher uma gota e depois afaste-os para deixá-la florescer na água.

Este guia acompanha esse processo passo a passo. Ele explica o que a permissão da câmera realmente concede, o que um modelo como o MediaPipe Hand Landmarker devolve, como algumas dezenas de números viram um gesto, o que fica no seu dispositivo e onde a técnica ainda tem dificuldades. Se você quer a pergunta mais ampla sobre o que torna a arte interativa ou generativa, Arte generativa interativa, explicada cobre esse terreno. Aqui o foco é o mecanismo.

Como funciona, em cinco passos

1. A página pede a câmera. O navegador mostra um pedido de permissão, e nada é capturado até você aceitar.
2. Os quadros vão para um modelo. Cada quadro do vídeo é entregue a um modelo de visão que roda dentro da página.
3. O modelo devolve pontos de referência. Para cada mão que encontra, ele gera 21 pontos: o pulso e as articulações e pontas dos dedos.
4. O código deduz gestos. Distâncias, ângulos e velocidades entre esses pontos viram estados como apontar, fazer pinça, palma aberta ou punho fechado.
5. Os gestos viram parâmetros. Esses estados são mapeados para um sistema visual ou sonoro, como uma posição, uma força ou uma cor.

O restante deste guia percorre cada passo.

Passo 1: pedindo a câmera

Uma página web não consegue enxergar pela sua webcam por padrão. Para obter vídeo, ela chama uma função do navegador chamada getUserMedia(), parte da especificação Media Capture and Streams publicada pelo W3C. A referência do MDN sobre getUserMedia descreve o que acontece em seguida. O navegador pede permissão ao usuário, e só se ela for concedida a página recebe um MediaStream, um fluxo de quadros ao vivo. Se o usuário recusar, ou se não houver câmera, o pedido falha e a página não recebe nada.

Alguns detalhes deste passo importam para a privacidade e para a sensação da experiência:

• O pedido é específico. Uma página pode pedir só vídeo, só áudio ou os dois, e pode dizer qual câmera prefere (por exemplo, a que fica voltada para o usuário). Uma página de rastreamento de mãos não tem motivo para pedir o microfone.
• Exige um contexto seguro. Segundo o MDN, getUserMedia() só está disponível em páginas servidas por HTTPS (ou a partir de um endereço local de desenvolvimento). Uma página comum sem segurança não consegue pedir a câmera de jeito nenhum.
• O navegador continua no comando. Os navegadores mostram um indicador enquanto a câmera está ativa, e você pode revogar a permissão nas configurações do site a qualquer momento. As regras estão definidas na especificação Media Capture and Streams do W3C.

Repare no que este passo não envolve. Conceder acesso à câmera não significa que o vídeo seja mostrado na tela, gravado ou enviado para algum lugar. A página simplesmente recebe quadros na memória. O que ela faz com eles é outra questão, e a seção de privacidade mais abaixo volta a esse ponto.

Passo 2: dos quadros para um modelo

Com o fluxo rodando, a página lê quadros dele, normalmente conectando o fluxo a um elemento <video> oculto e amostrando-o a cada quadro de animação. Cada quadro amostrado é uma imagem, uma grade de pixels, e é passado para um modelo.

O modelo mais usado para essa tarefa na web é o MediaPipe Hand Landmarker, do projeto MediaPipe do Google. A documentação descreve uma tarefa que "opera sobre dados de imagem com um modelo de aprendizado de máquina (ML), como dados estáticos ou um fluxo contínuo". Ela vem com guias para Android, Python e web. Na web, a página baixa o arquivo do modelo, e o processamento roda dentro do navegador por meio de um runtime WebAssembly, com aceleração por GPU opcional.

A tarefa tem três modos de execução. IMAGE lida com imagens avulsas e VIDEO com arquivos de vídeo decodificados. LIVE_STREAM é o modo para webcam, e nele os resultados chegam por um listener conforme os quadros são processados. Várias configurações ajustam o comportamento. num_hands define quantas mãos procurar, e o padrão é 1. Três limiares de confiança (detecção, presença e rastreamento, cada um 0,5 por padrão) decidem quanta certeza o modelo precisa ter antes de informar uma mão ou continuar acompanhando-a.

Dois modelos fazem o trabalho, empacotados juntos em um único pacote. Segundo a documentação do Google:

• Um modelo de detecção de palma procura no quadro inteiro algo que pareça uma mão.
• Um modelo de detecção de pontos de referência da mão então examina essa região de perto e posiciona os pontos.

Essa divisão é o motivo de o rastreamento poder ser leve. Nos modos de vídeo e de transmissão ao vivo, depois que uma mão é encontrada, o modelo de pontos pode segui-la de um quadro para o outro. A detecção de palma, mais pesada, só precisa rodar de novo quando o rastreador perde a confiança de que há uma mão ali.

Passo 3: vinte e um pontos de referência

O resultado que importa é o conjunto de pontos de referência. O modelo de mãos do MediaPipe devolve 21 pontos por mão, que a documentação do Google chama de "21 coordenadas dos nós dos dedos da mão":

• 1 ponto para o pulso
• 4 pontos para cada um dos cinco dedos: a articulação da base, duas articulações intermediárias e a ponta

Cada ponto vem em duas formas. As coordenadas de imagem são x e y, normalizadas pela largura e altura do quadro, mais um valor de profundidade relativa. As coordenadas de mundo são posições 3D aproximadas em metros, com a origem no centro geométrico aproximado da mão. O modelo também informa a lateralidade, um palpite sobre se cada mão é esquerda ou direita.

Ajuda imaginar o resultado como um pequeno esqueleto feito de pontos, redesenhado muitas vezes por segundo sobre um vídeo que a página nunca precisa mostrar a você. Esse esqueleto é a única coisa com que o restante do sistema trabalha. Daqui em diante, o código não está mais lidando com a imagem de uma mão. Está lidando com 21 pontos e o movimento deles.

A documentação também diz que o modelo foi treinado com cerca de 30.000 imagens do mundo real, além de modelos sintéticos de mãos renderizados sobre fundos variados. Isso explica em parte por que ele lida bem com muitos tons de pele, ambientes e condições de luz, e também por que ainda pode ser enganado por ângulos incomuns.

Passo 4: dos pontos aos gestos

Vinte e um pontos em movimento ainda não são um gesto. Transformá-los em algo que uma pessoa consiga fazer de propósito, e repetir, é o ofício das interfaces de rastreamento de mãos. O modelo não decide que você está fazendo pinça. Quem decide é o código do aplicativo, a partir da geometria.

Algumas deduções comuns:

• Apontar e posição. A ponta do indicador (ou o centro da palma) vira um cursor. Seus x e y são mapeados na tela, geralmente espelhados, para que mover a mão para a direita mova o cursor para a direita, como num espelho.
• Pinça. Mede-se a distância entre a ponta do polegar e a ponta do indicador. Quando ela fica abaixo de um limiar, relativo ao tamanho da mão para funcionar perto e longe da câmera, começa uma pinça. Quando sobe acima de um limiar um pouco maior, a pinça termina. A diferença entre os dois limiares evita que o estado fique piscando.
• Palma aberta e punho fechado. A distância das pontas dos dedos até o pulso ou o centro da palma, comparada com suas articulações, indica se os dedos estão esticados ou dobrados. Tirando a média entre os dedos, isso dá um valor contínuo entre aberto e fechado, e não só um sim ou não.
• Velocidade e direção. Comparar a posição de um ponto entre quadros dá a velocidade, de modo que um movimento horizontal rápido pode ser diferenciado de um deslocamento lento.

Dois problemas práticos aparecem logo. O primeiro é a trepidação: os pontos tremem um pouco mesmo com a mão parada, então a maioria dos aplicativos os suaviza ao longo de alguns quadros e aceita um pequeno atraso em troca de um movimento tranquilo. O Synfield faz isso com um filtro One Euro no ponto rastreado, um passa-baixa que se adapta à velocidade e mantém as mãos paradas estáveis sem fazer os movimentos rápidos parecerem grudentos. O segundo é o alcance: a área que sua mão cobre com conforto é menor que o campo de visão da câmera, então o Synfield deixa você calibrar as bordas dessa área e as salva localmente como preferência de "área da mão" (gestureos.calibration.v1 na página de privacidade).

Passo 5: dos gestos a um sistema vivo

O último passo é onde o rastreamento de mãos deixa de ser uma demo técnica e vira uma experiência. Os estados dos gestos são mapeados para parâmetros do que a página estiver rodando, como um campo de partículas, um fluido, um som ou um conjunto de reflexos.

O mapeamento é uma decisão de design, e o mesmo pequeno vocabulário de gestos pode significar coisas muito diferentes. Nos mundos do Synfield, por exemplo:

• Em Helix, apontar enrola uma corrente de luz, uma pinça mantida a puxa e a quebra em borrifos, e soltar deixa uma onda de luz se formar de novo. Abrir ou fechar a mão estende a onda ou enrola sua crista.
• Em Mirror, seu indicador desenha um traço que é refletido em torno de um centro. Uma pinça mantida move esse centro, e a palma aberta ou o punho fechado acrescenta ou remove dobras.
• Em Breathe, a mão quase não comanda nada. Uma pinça pausa a luz que respira e soltar a deixa continuar, enquanto abrir ou fechar a mão a amplia ou suaviza.

O processo é idêntico nos três. Só o mapeamento muda. Essa é a lição útil para quem constrói com rastreamento de mãos: o modelo entrega os mesmos 21 pontos toda vez, e o caráter da obra depende do que você deixa esses pontos significarem. Para ver como esses mapeamentos se encaixam nos sistemas generativos de forma mais ampla, veja a seção sobre câmera de Arte generativa interativa, explicada.

O rastreamento de mãos no navegador é privado?

Pode ser, mas depende de como cada site é construído. A técnica não garante isso. Vale ser preciso sobre quais partes são definidas pelo navegador e quais são escolhas do site.

O que o navegador garante. Pela especificação Media Capture e pela prática dos navegadores descrita pelo MDN, uma página não pode ler a câmera sem sua permissão, precisa ser servida de forma segura para pedir isso e mostra um indicador enquanto a câmera está em uso. Você pode retirar a permissão a qualquer momento.

O que depende do site. Depois que uma página tem os quadros, o código dela pode fazer qualquer coisa com eles. Isso inclui processá-los localmente, desenhá-los na tela, gravá-los ou enviá-los a um servidor. O MediaPipe Hand Landmarker foi feito para rodar no dispositivo, dentro do navegador, então um site que o usa não precisa enviar vídeo para lugar nenhum para rastrear sua mão. Se ele faz isso ou não depende do site, então o teste honesto é ler a página de privacidade e, se puder, observar a atividade de rede.

O que o Synfield diz que faz. A página de privacidade do Synfield descreve o site como ele é construído hoje:

• A câmera fica desligada quando um mundo abre. Ela só liga se você escolher "Explorar com as mãos", ou se ativá-la depois pelo controle da câmera ou pela tecla C.
• O pedido é de vídeo da câmera voltada para você, sem microfone, e a imagem não é mostrada na página.
• Os quadros são lidos na página e passados para uma tarefa de visão que também roda no navegador. Ela procura uma mão e devolve pontos. O modelo é um arquivo do próprio site e só é baixado depois que a câmera liga.
• O código do site não grava o vídeo, não envia os quadros nem os pontos da mão e não cria conta.
• O contador anônimo de visitas registra só informações gerais, como se foi usado mouse, toque ou as mãos e quando a câmera foi ligada. Nada da imagem da câmera nem dos pontos da mão é incluído.

Essas afirmações batem com o código publicado: o Synfield carrega o MediaPipe Hand Landmarker (@mediapipe/tasks-vision) com o arquivo de modelo hand_landmarker.task do próprio site, define numHands como 1 e tenta primeiro um delegate de GPU, com fallback para CPU.

Escolher "Mãos" na página de informações de um mundo só mostra instruções e nunca liga a câmera. A câmera só liga dentro de um mundo, e só quando você pede.

As ferramentas, em resumo

Você não precisa conhecer as ferramentas para curtir uma obra com rastreamento de mãos, mas ajuda saber o que os nomes significam.

• getUserMedia / Media Capture and Streams. É o padrão do navegador para acessar câmera e microfone. Toda experiência web baseada em webcam começa aqui. (MDN, W3C)
• MediaPipe Hand Landmarker. A tarefa atual do Google para pontos de referência da mão, com um pacote web que carrega um modelo e o executa na página. Ela devolve pontos de referência, pontos de referência de mundo e lateralidade. (Documentação do Google AI Edge)
• TensorFlow.js e modelos de mão anteriores. Antes da API atual MediaPipe Tasks, o rastreamento de mãos no navegador era feito com frequência com modelos do TensorFlow.js como o Handpose e com a antiga solução "MediaPipe Hands". Muitos tutoriais ainda usam esses nomes; se você os encontrar, eles descrevem uma geração anterior da mesma ideia.
• Uma camada de renderização. Os pontos então controlam o que desenha a imagem, geralmente WebGL ou Canvas. Essa parte é programação gráfica comum, e é onde a maioria das decisões artísticas acontece.

Limites, e por que mouse e toque ainda importam

O rastreamento de mãos no navegador funciona bem o bastante para fazer arte. Ele não funciona em todo lugar e não é a melhor forma de interação para todo mundo. Os limites mais comuns:

• Luz. O modelo enxerga pixels. Um ambiente escuro, uma luz forte atrás de você ou uma mão na sombra diminuem a confiança dele, e ele pode perder a mão.
• Distância e enquadramento. Muito perto, partes da mão saem do quadro. Muito longe, a mão vira só alguns pixels. A distância de um braço da câmera de um notebook costuma ser confortável.
• Oclusão. Quando os dedos se sobrepõem ou a mão fica de lado para a câmera, o modelo precisa adivinhar onde estão as articulações escondidas, e gestos como a pinça ficam menos confiáveis.
• Duas mãos e outras pessoas. Mais mãos significam mais ambiguidade e mais processamento. Muitas experiências rastreiam só uma mão por esse motivo.
• Dispositivos. A inferência exige poder de processamento. Notebooks recentes dão conta com folga. Dispositivos mais antigos ou de baixo consumo podem rastrear com uma taxa menor ou esquentar bastante, e os navegadores de celular variam. O Synfield não publica uma lista fechada de dispositivos compatíveis: o modo mãos precisa de um contexto seguro, de getUserMedia e de um navegador capaz de rodar o WASM de visão (com GPU quando disponível). Navegadores de desktop recentes são o caminho confortável; no celular a mesma tecnologia pode funcionar, mas o enquadramento e o aquecimento variam, então o toque costuma ser mais fácil.
• Corpos. Nem todo mundo consegue manter o braço levantado por muito tempo, e nem todo mundo quer aparecer na câmera. Uma interação que só funciona com as mãos deixa pessoas de fora.

Por esse último motivo, as obras com rastreamento de mãos mais cuidadosas tratam a câmera como uma entre várias formas de entrada. No Synfield, todos os mundos também podem ser explorados com mouse ou tela sensível ao toque, e os gestos têm equivalentes diretos. Segurar o botão do mouse ou apoiar um dedo faz o mesmo que uma pinça, e a rodinha ou afastar dois dedos faz o mesmo que abrir e fechar a mão. O guia Como explorar mostra tudo lado a lado.

Uma breve nota histórica

A ideia de um corpo conduzindo uma imagem sem tocar em nada é mais antiga que as webcams. Videoplace, de Myron Krueger, dos anos 1970 e 1980, usava câmeras para colocar a silhueta de uma pessoa dentro de uma obra que respondia a ela. Essa história faz parte da trajetória da arte interativa, contada em O que é arte interativa?. A novidade é o contexto. Detectar uma mão em detalhe antes exigia hardware especial, e agora é um arquivo de modelo que uma página web pode baixar e rodar em uma aba.

Experimente

A melhor forma de entender o processo é sentir como ele responde. Comece por um destes e depois explore à vontade:

• Ink: faça pinça para recolher uma gota, solte para deixá-la florescer.
• Helix: aponte para enrolar uma corrente de luz.
• Mirror: desenhe um traço e veja ele se dobrar.
• Breathe: um mundo mais lento, em que a pinça só pausa a luz.
• Matter: a palma aberta repele um campo de partículas e o punho fechado o atrai.

Ou abra Explorar e escolha "Explorar com as mãos". A câmera fica desligada até você fazer isso.

Perguntas frequentes

Preciso instalar alguma coisa para o rastreamento de mãos no navegador? Não. Um navegador moderno e uma webcam bastam. A própria página baixa o modelo e o executa. Você só concede a permissão da câmera.

O rastreamento de mãos pela webcam é privado? O navegador garante que uma página não pode usar sua câmera sem permissão. Se os quadros ficam no seu dispositivo depende do site. Modelos como o MediaPipe Hand Landmarker rodam localmente, então não é preciso enviar nada. Confira a página de privacidade do site. A do Synfield diz que os quadros e os pontos da mão não são gravados nem enviados.

O que são os 21 pontos de referência da mão? São os pontos que o modelo do MediaPipe posiciona em cada mão detectada: um para o pulso e quatro para cada dedo, da articulação da base até a ponta. Os gestos são calculados a partir das distâncias e dos ângulos entre eles.

Funciona no celular? Muitas vezes, sim, quando o navegador do celular permite o acesso à câmera e consegue rodar o modelo de visão na página. O desempenho e o enquadramento variam conforme o aparelho, então no celular o toque costuma ser a forma mais confortável de entrar.

O que fazer se o rastreamento perder minha mão? Coloque mais luz na sua frente, fique a mais ou menos um braço de distância da câmera e mantenha a palma virada para ela. Se continuar difícil, um mouse ou uma tela sensível ao toque oferecem a mesma experiência.