Data used
- Camera frames in Camera mode.
- A demonstration video and simulated metrics in Demo mode.
Project case study
Driver Monitoring System
Driver attention and fatigue estimation from the face, with a Canvas web showcase and a local Python engine.
Problem
Drowsiness and distraction at the wheel are hard to notice in time.
Face signals need to become a simple indicator to follow.
Solution
Architecture at a glance
- Camera frames in Camera mode.
- A demonstration video and simulated metrics in Demo mode.
Technical decisions
- Face Landmarker in the browser, with EAR computed from the eye landmarks.
- Tracker with hold and fade states when the face disappears.
- Attention score from 0 to 100 with explicit deductions.
Result
- Demo mode frame time, p50
- 16.7 ms
- Published demo, simulated Demo mode / rAF for 10 s, headless Chromium 153, Intel UHD, DPR 1 / 13 Oct 2026
- Python engine unit tests
- 21
- Public repository / count in tests/ / commit defe846
The project draws a clear line between what the demo simulates and what the camera measures.
- In-browser computer vision
- Canvas 2D
- Composite indicator
- Python with OpenCV
Learnings and limitations
- Demo mode, the page default, shows sine-simulated metrics; they are not measurements.
- The web has no phone detection, and pose uses simple geometry.
- There are no front-end tests; the 21 tests cover the Python engine.
More about the project
Full case details, collapsed for optional reading.
Full description
System that estimates driver attention and fatigue from the face, with a web showcase and a local Python engine.
On the web, the MediaPipe Face Landmarker computes the eyes' EAR and an approximate head pose; an attention score subtracts closed eyes, off pose and lost tracking.
The page opens in Demo mode, with metrics simulated by sine functions over a video; only Camera mode uses real data and asks for permission.
The Python engine uses OpenCV, solvePnP for pose and YOLO to detect phones, and runs on the local machine only.
JavaScript showcase with MediaPipe Tasks Vision and Canvas 2D; local Python engine with OpenCV, MediaPipe, Ultralytics YOLO and PyTorch.
Features and highlights
- Demo, Camera and Review modes.
- Face-tracking overlay on Canvas.
- Attention score and history chart.
- Python engine with phone detection.
- Computes the eyes' EAR from the face landmarks.
- Subtracts closed eyes, off pose and lost tracking from the score.
- Renders the overlay at 16.7 ms per frame in Demo mode (p50, p95 up to 16.8 ms).
- Keeps the published showcase apart from the locally run Python engine.
Technical architecture and data
- Python engine with solvePnP, YOLO phone detection and a command line.
Technical architecture
How the case was designed as a product
Driver attention and fatigue estimation from the face, with a Canvas web showcase and a local Python engine.
MediaPipe Tasks VisionAICanvas APIWeb platformJavaScriptLanguagePythonLanguageOpenCVAIUltralytics YOLOAIPyTorchAINumPyData
Core components
- Demo, Camera and Review modes.
- Face-tracking overlay on Canvas.
- Attention score and history chart.
- Python engine with phone detection.
Technical decisions
- In-browser computer vision
- Canvas 2D
- Composite indicator
- Python with OpenCV
Trade-offs
- Demo mode, the page default, shows sine-simulated metrics; they are not measurements.
- The web has no phone detection, and pose uses simple geometry.
- There are no front-end tests; the 21 tests cover the Python engine.
How to run
- Web: npm run dev, npm run build and npm run preview.
- Engine (Python 3.12): pip install -r requirements.txt and python main.py --source 0
- Tests: python -m unittest discover -s tests
Additional media
Credits
Developed by Matheus Siqueira - https://www.matheusdev.tech
Next project3D Hands
Three.js 3D object controlled by 7 hand gestures read from the camera with MediaPipe, without touching the device.
View full case