Portfolio
Project / Machine VisionARR

Face Detection

Skills demo recreating a real-time face detection pipeline from past contracted work. The original system is closed-source per contract terms. This demo showcases the same technique - webcam face tracking with bounding boxes and confidence scoring - running entirely client-side in the browser.

01 / Demo

Interactive Demo

All processing runs in your browser - no data is sent to any server.

Real-time face detection using your webcam. Draws bounding boxes around detected faces with confidence scores.

Click "Start Camera" to begin face detection
02 / Pipeline

How It Works

Client-side processing pipeline. No data leaves your browser.

01

Model Loading

TinyFaceDetector model loads from CDN on first use. Lightweight architecture optimized for real-time performance in the browser, powered by TensorFlow.js WASM backend.

face-api.jsTensorFlow.jsCDN
02

Video Capture

WebRTC getUserMedia API streams the webcam feed into a video element. Canvas overlay is sized to match the video dimensions for accurate bounding box placement.

WebRTCgetUserMediaCanvas
03

Detection Loop

Each video frame is passed through TinyFaceDetector inference. Detected faces get bounding boxes with corner accents and confidence score labels, rendered at 30+ FPS via requestAnimationFrame.

Real-Time InferenceCanvas RenderingrequestAnimationFrame
03 / Stack

Technology

Languages
JavaScript HTML / CSS
Libraries
face-api.js TensorFlow.js
Techniques
Face Detection Real-Time Video Processing WebRTC Canvas Overlay Rendering