Dados utilizados
- Quadros da câmera do usuário, processados no navegador.
- Notas e desenhos do workspace, salvos na API da aplicação com localStorage como alternativa.
Case de projeto
Interface Web de Gestos Sem Contato
Workspace controlado por gestos da mão na câmera, com pipeline de quadro adaptativo e motor de gestos próprio.
Problema
Usar uma tela sem tocar exige um cursor estável a partir de um sinal ruidoso.
Rodar inferência o tempo todo gasta CPU mesmo quando não há mão na imagem.
Solução
Arquitetura resumida
- Quadros da câmera do usuário, processados no navegador.
- Notas e desenhos do workspace, salvos na API da aplicação com localStorage como alternativa.
Decisões técnicas
- Captura a 30 fps com nova tentativa e inferência agendada por requestVideoFrameCallback.
- Throttle adaptativo: 30 fps com mão, 10 fps sem mão, pausa com a aba oculta.
- Motor de gestos com suavização pela velocidade, histerese de pinça e confiança.
Resultado
- Teto de inferência com e sem mão
- 30 / 10 fps
- Repositório público / configuração em src/hooks/useHandTracking.ts / commit cde44c9
- Suítes de teste em Vitest
- 8
- Repositório público / arquivos de teste no repositório / commit cde44c9
O projeto mostra um pipeline de quadro que economiza inferência e um motor de gestos próprio.
- Pipeline de quadro adaptativo
- Interação sem contato
- Canvas 2D
- Degradação graciosa
Aprendizados e limitações
- Exige câmera; modelo e WASM vêm de um CDN.
- Desenho e arrasto não têm equivalente por mouse ou teclado.
- Na produção, o workspace do servidor fica em memória, é compartilhado e se perde entre instâncias.
- O sistema de partículas não respeita a redução de movimento.
Mais sobre o projeto
Detalhes completos do case, colapsados para leitura opcional.
Descrição completa
Workspace de notas e desenho controlado pela câmera: a mão substitui o mouse, sem instalação e sem enviar vídeo.
O pipeline captura a 30 fps, agenda a inferência por quadro de vídeo e cai para 10 fps depois de mais de 10 quadros sem mão.
Um motor de gestos próprio suaviza o cursor pela velocidade e aplica histerese na pinça, normalizada pela escala da mão.
A pinça desenha no Canvas e arrasta notas; sliders ajustam a sensibilidade, e os controles por botão continuam disponíveis sem câmera.
Next.js 16 e React com MediaPipe Tasks Vision, Canvas 2D para desenho e partículas, Framer Motion na interface e testes em Vitest.
Funcionalidades e destaques
- Desenho por pinça.
- Arrasto de notas por pinça.
- Ajuste de sensibilidade da pinça e do cursor.
- Métricas de sessão e FPS.
- Desfazer e refazer com 30 estados.
- Reduz a inferência de 30 para 10 fps quando não há mão na imagem.
- Aplica histerese na pinça, normalizada pela escala da mão.
- Pausa o rastreamento com a aba oculta.
- Mantém controles por botão quando a câmera não está disponível.
Arquitetura técnica e dados
- Estado emitido no máximo a 60 Hz, com limiar de movimento.
Arquitetura técnica
Como o case foi pensado como produto
Workspace controlado por gestos da mão na câmera, com pipeline de quadro adaptativo e motor de gestos próprio.
MediaPipe Tasks VisionIACanvas APIPlataforma webNext.jsFrameworkReactFrameworkTypeScriptLinguagemFramer MotionFrameworkZodFrameworkVitestFramework
Principais componentes
- Desenho por pinça.
- Arrasto de notas por pinça.
- Ajuste de sensibilidade da pinça e do cursor.
- Métricas de sessão e FPS.
- Desfazer e refazer com 30 estados.
Decisões técnicas
- Pipeline de quadro adaptativo
- Interação sem contato
- Canvas 2D
- Degradação graciosa
Trade-offs
- Exige câmera; modelo e WASM vêm de um CDN.
- Desenho e arrasto não têm equivalente por mouse ou teclado.
- Na produção, o workspace do servidor fica em memória, é compartilhado e se perde entre instâncias.
- O sistema de partículas não respeita a redução de movimento.
Como executar
- npm install
- cp .env.example .env.local
- npm run dev e abra http://localhost:3000
- npm run test
Mídia adicional
Créditos
Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech
Próximo projetoSupport SLA Intelligence Hub
Painel de BI em Next.js que mede SLA, backlog, MTTR e tickets em risco sobre 780 tickets sintéticos.
Ver case completo