Case study 05
Face Detection
Face and landmark detection that runs live in your browser, with nothing uploaded.
YuNet / ONNX Runtime Web
Runs on your device. Images and video never leave the browser.
Overview
A real-time face detector that runs entirely on the visitor's device. It finds every face in a photo or webcam feed, scores it, and marks five facial landmarks: both eyes, the nose tip and the mouth corners.
It uses YuNet, OpenCV's lightweight face detection model, exported to ONNX. I wrote the whole inference pipeline for the browser: preprocessing, decoding the raw model outputs, non-maximum suppression and drawing. There is no server and no Python, so images never leave the device.
What it does
Runs in the browser
ONNX Runtime Web executes the model with WebAssembly. No backend, no GPU, no install.
Private by design
Photos and video frames are processed on the device and never uploaded anywhere.
Live webcam mode
Detects faces frame by frame from the camera, one inference at a time so it never queues up.
Five-point landmarks
Eyes, nose tip and mouth corners for every face, ready for alignment or cropping.
Tiny model
Under 250 KB, so it downloads and starts almost instantly, even on mobile.
Custom decoder
Anchor decoding and NMS written in TypeScript, matching OpenCV's FaceDetectorYN.
How it works
- 01Letterbox the image or video frame into a 640x640 canvas, keeping its aspect ratio.
- 02Pack the pixels into a planar BGR float tensor, the layout the model expects.
- 03Run YuNet with ONNX Runtime Web on WebAssembly.
- 04Decode class, objectness, box and landmark outputs at strides 8, 16 and 32.
- 05Drop overlapping boxes with non-maximum suppression and draw the results.
Stack
- ONNX
- ONNX Runtime Web
- WebAssembly
- YuNet
- Computer vision
- TypeScript
- Canvas API
- WebRTC