Voltar para projetos

Case de projeto

Eye Tracking em Tempo Real

Estimativa aproximada do olhar pela webcam com heatmap de sessão, no navegador.

Meu papelDesenvolvedor
Tecnologias utilizadas
  • MediaPipe Tasks Vision
  • Canvas API
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Jest
Abrir demo
Painel Eye Tracking UX Intelligence com métricas de sessão, superfície do heatmap e controles, antes de ligar a câmera.
eye-tracking-three.vercel.app / Página inicial

Problema

Rastreadores de olhar dedicados são caros para pesquisas pequenas.

Uma estimativa pela webcam precisa deixar claro seu limite de precisão.

Solução

Arquitetura resumida
  • Quadros da webcam, processados no navegador; até 5.000 pontos por sessão.
Decisões técnicas
  1. Face Landmarker no cliente, com laço limitado a 80 ms por amostra.
  2. Olhar pela razão íris/cantos, média dos dois olhos e suavização exponencial.
  3. Heatmap de 64×36 com decaimento gaussiano e área dominante em grade 3×3.

Resultado

Uma ferramenta exploratória de UX que é clara sobre não ser um rastreador calibrado.

  • Visão computacional no navegador
  • Visualização em Canvas
  • Exportação de dados

Aprendizados e limitações

  • Não há calibração; a precisão é aproximada.
  • O heatmap fica em uma superfície abstrata, não sobre uma página real.
  • Exige câmera, HTTPS e CDN externo.

Mais sobre o projeto

Detalhes completos do case, colapsados para leitura opcional.

Descrição completa

Estimativa aproximada do olhar pela webcam, acumulada em um heatmap para sessões de pesquisa de UX, toda no navegador.

O MediaPipe Face Landmarker localiza íris e cantos dos olhos; a razão entre eles, média dos dois olhos e suavizada, vira a posição do olhar.

Um heatmap de 64×36 células acumula os pontos com decaimento gaussiano ponderado pela confiança, e a sessão exporta JSON, CSV e PNG.

Não há calibração: o mapeamento usa constantes fixas, e o próprio projeto avisa que não tem precisão científica.

Next.js e React com MediaPipe Tasks Vision e Canvas 2D, testes em Jest; modelo e WASM de CDN.

Funcionalidades e destaques
  • Iniciar, pausar, parar e reiniciar a sessão.
  • Heatmap acumulado em Canvas.
  • Métricas de tempo, pontos e estabilidade.
  • Exportação em JSON, CSV e PNG.
  • Calcula o olhar pela razão entre íris e cantos dos olhos.
  • Acumula o heatmap com decaimento gaussiano ponderado pela confiança.
  • Exporta a sessão em JSON, CSV e PNG.
Arquitetura técnica e dados

Arquitetura técnica

Como o case foi pensado como produto

Estimativa aproximada do olhar pela webcam com heatmap de sessão, no navegador.

MediaPipe Tasks VisionIACanvas APIPlataforma webNext.jsFrameworkReactFrameworkTypeScriptLinguagemTailwind CSSFrameworkJestFramework

Dados utilizados

  • Quadros da webcam, processados no navegador; até 5.000 pontos por sessão.

Principais componentes

  • Iniciar, pausar, parar e reiniciar a sessão.
  • Heatmap acumulado em Canvas.
  • Métricas de tempo, pontos e estabilidade.
  • Exportação em JSON, CSV e PNG.

Decisões técnicas

  • Visão computacional no navegador
  • Visualização em Canvas
  • Exportação de dados

Trade-offs

  • Não há calibração; a precisão é aproximada.
  • O heatmap fica em uma superfície abstrata, não sobre uma página real.
  • Exige câmera, HTTPS e CDN externo.
Como executar
  1. O repositório é privado; os passos abaixo valem para quem tem acesso.
  2. npm install
  3. npm run dev e abra http://127.0.0.1:3000
  4. npm run lint, npm run type-check e npm run test
Mídia adicional
Vídeo de demonstração do projeto.
Créditos

Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech

Próximo projetoAd Performance Intelligence

Dashboard de BI em Next.js que compara Google Ads e Meta Ads com dados simulados: KPIs, funil e ROAS.

Ver case completo