Dados utilizados
- Quadros da câmera no modo Câmera.
- Vídeo de demonstração e métricas simuladas no modo Demo.
Case de projeto
Sistema de Monitoramento do Motorista
Estimativa de atenção e fadiga do motorista pelo rosto, com vitrine web em Canvas e engine Python local.
Problema
Sonolência e distração ao volante são difíceis de perceber a tempo.
Sinais do rosto precisam virar um indicador simples de acompanhar.
Solução
Arquitetura resumida
- Quadros da câmera no modo Câmera.
- Vídeo de demonstração e métricas simuladas no modo Demo.
Decisões técnicas
- Face Landmarker no navegador, com EAR calculado a partir dos pontos dos olhos.
- Rastreador com estados de manutenção e esmaecimento quando o rosto some.
- Score de atenção de 0 a 100 com descontos explícitos.
Resultado
- Tempo de quadro p50 no modo Demo
- 16,7 ms
- Demo publicada, modo Demo simulado / rAF por 10 s, Chromium 153 headless, Intel UHD, DPR 1 / 13 out. 2026
- Testes unitários da engine Python
- 21
- Repositório público / contagem em tests/ / commit defe846
O projeto separa com clareza o que a demo simula do que a câmera mede.
- Visão computacional no navegador
- Canvas 2D
- Indicador composto
- Python com OpenCV
Aprendizados e limitações
- O modo Demo, padrão da página, mostra métricas simuladas por seno; não são medições.
- Na web não há detecção de celular, e a pose usa geometria simples.
- Não há testes do front-end; os 21 testes cobrem a engine Python.
Mais sobre o projeto
Detalhes completos do case, colapsados para leitura opcional.
Descrição completa
Sistema que estima atenção e fadiga do motorista a partir do rosto, com uma vitrine web e uma engine Python local.
Na web, o MediaPipe Face Landmarker calcula o EAR dos olhos e uma pose aproximada da cabeça; um score de atenção desconta olhos fechados, pose fora e perda de rastreamento.
A página abre em modo Demo, com métricas simuladas por funções seno sobre um vídeo; só o modo Câmera usa dados reais e pede permissão.
A engine Python usa OpenCV, solvePnP para a pose e YOLO para detectar celular, e roda apenas na máquina local.
Vitrine em JavaScript com MediaPipe Tasks Vision e Canvas 2D; engine local em Python com OpenCV, MediaPipe, Ultralytics YOLO e PyTorch.
Funcionalidades e destaques
- Modos Demo, Câmera e Revisão.
- Overlay de rastreamento facial em Canvas.
- Score de atenção e histórico em gráfico.
- Engine Python com detecção de celular.
- Calcula o EAR dos olhos a partir dos pontos do rosto.
- Desconta do score olhos fechados, pose fora e perda de rastreamento.
- Renderiza o overlay a 16,7 ms por quadro no modo Demo (p50 e p95 até 16,8 ms).
- Separa a vitrine publicada da engine Python que roda localmente.
Arquitetura técnica e dados
- Engine Python com solvePnP, detecção de celular por YOLO e linha de comando.
Arquitetura técnica
Como o case foi pensado como produto
Estimativa de atenção e fadiga do motorista pelo rosto, com vitrine web em Canvas e engine Python local.
MediaPipe Tasks VisionIACanvas APIPlataforma webJavaScriptLinguagemPythonLinguagemOpenCVIAUltralytics YOLOIAPyTorchIANumPyDados
Principais componentes
- Modos Demo, Câmera e Revisão.
- Overlay de rastreamento facial em Canvas.
- Score de atenção e histórico em gráfico.
- Engine Python com detecção de celular.
Decisões técnicas
- Visão computacional no navegador
- Canvas 2D
- Indicador composto
- Python com OpenCV
Trade-offs
- O modo Demo, padrão da página, mostra métricas simuladas por seno; não são medições.
- Na web não há detecção de celular, e a pose usa geometria simples.
- Não há testes do front-end; os 21 testes cobrem a engine Python.
Como executar
- Web: npm run dev, npm run build e npm run preview.
- Engine (Python 3.12): pip install -r requirements.txt e python main.py --source 0
- Testes: python -m unittest discover -s tests
Mídia adicional
Créditos
Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech
Próximo projeto3D Hands
Objeto 3D em Three.js controlado por 7 gestos da mão lidos pela câmera com MediaPipe, sem tocar no dispositivo.
Ver case completo