Como funciona
Visão computacional no navegador, com regras que dá para ler e conferir.
Do vídeo ao gesto
- A câmera é aberta com
getUserMediaem 640×360 (ou o modo mais próximo) e só depois do seu clique. - O MediaPipe Tasks Vision 0.10.35 roda em WebAssembly servido por este site. O modelo Hand Landmarker (float16, Apache-2.0) vem do Google Cloud Storage. Com WebGL2 a inferência usa a GPU; sem ele, a CPU.
- Até 2 mãos por quadro, com detecção mínima de 0,7 e rastreamento mínimo de 0,5, os mesmos limiares do app Python.
- Cada mão vira 21 pontos normalizados. As regras abaixo transformam esses pontos em dedos levantados e num gesto; nenhuma rede neural decide o nome do gesto.
As regras
- Indicador, médio, anelar e mínimo: o dedo está levantado quando a ponta fica acima da articulação do meio (pontos 8/6, 12/10, 16/14 e 20/18).
- Polegar: compara a ponta (4) com a articulação (3) no eixo horizontal; o lado depende de a mão ser direita ou esquerda.
- Pinça: distância entre as pontas do polegar e do indicador dividida pelo tamanho da palma (punho até a base do médio). Até 0,35, vira OK ou Pinça.
| Gesto | Dedos | Regra |
|---|---|---|
| OK | Pinça (≤ 0,35) com médio, anelar e mínimo levantados | |
| Pinça | Pinça (≤ 0,35) com médio, anelar e mínimo abaixados | |
| Punho fechado | Exatamente esses dedos levantados | |
| Mão aberta | Exatamente esses dedos levantados | |
| Paz | Exatamente esses dedos levantados | |
| Rock | Exatamente esses dedos levantados | |
| Polegar | Exatamente esses dedos levantados | |
| Indicador | Exatamente esses dedos levantados | |
| L | Exatamente esses dedos levantados | |
| Três | Exatamente esses dedos levantados | |
| Quatro | Exatamente esses dedos levantados | |
| Gesto não mapeado | — | Qualquer outra combinação |
Suavização e lateralidade
Cada dedo vale o que apareceu em pelo menos metade dos últimos 5 quadros. O gesto passa por uma máquina de estados: um gesto novo só é confirmado depois de aparecer em 5 quadros seguidos e, nesses quadros, a distância da ponta de cada dedo até a base dele (articulação MCP, dividida pelo tamanho da palma) variar no máximo 0,12. Uma oscilação curta ou entre dois gestos não troca o resultado; enquanto isso a leitura mostra o gesto que está sendo confirmado. Quando uma mão sai do quadro, o histórico dela é descartado, então a tela mostra “Nenhuma mão detectada” em vez do último gesto.
O MediaPipe rotula direita e esquerda supondo uma imagem espelhada (selfie). O app desktop espelha o quadro antes da inferência; a web espelha os pontos e troca o rótulo depois. Assim as duas versões aplicam as regras no mesmo referencial, e a confiança exibida é o score que o modelo dá para essa lateralidade.
Implementação Python de referência
A pasta python/ do repositório (abre em nova aba) tem o app desktop original (OpenCV + MediaPipe Tasks 0.10.35, Python 3.12): HUD com até duas mãos, medidor de pinça, seleção de câmera por nome e atalhos de teclado. Ele usa o mesmo modelo Hand Landmarker deste site e não faz parte do deploy. Os mesmos casos de teste sintéticos verificam as regras em Python e em TypeScript.
Limitações
- As regras assumem a mão em pé, com a palma voltada para a câmera; mão deitada ou de costas engana a contagem.
- Dedos sobrepostos, pouca luz e contraluz reduzem a precisão.
- Um punho com a ponta do polegar encostada na ponta do indicador pode ser lido como Pinça.
- Não é um sistema de identificação, autenticação, acessibilidade assistiva nem uso clínico.
Privacidade
- O vídeo é processado no seu navegador; nenhum quadro, imagem ou ponto da mão é enviado.
- Ao ativar a câmera, o navegador baixa o modelo de mãos (7,8 MB) do Google Cloud Storage. Esse download não leva dados seus além do que qualquer requisição web leva (IP e navegador).
- Não há analytics, cookies nem cadastro. As métricas da sessão ficam só na memória da aba.
- Suas preferências (espelhar vídeo, mostrar landmarks) ficam no armazenamento local do navegador.