Technical Briefing
How Cyber Mirror Works
Face detection and landmarks with BlazeFace
Cyber Mirror streams webcam frames into BlazeFace to get face boxes and sparse landmarks. It mirrors the video, overlays a neon HUD box, and draws landmark points.
Data Pathway
Video Frame
BlazeFace
Face Mesh
1) Load and cache the face model
BlazeFace is loaded lazily and reused for subsequent runs.
BlazeFace singleton
let faceModelPromise: Promise<blazeface.BlazeFaceModel> | null = null;
async function getFaceModel() {
if (!faceModelPromise) {
faceModelPromise = blazeface.load();
}
return faceModelPromise;
}2) Per-frame face estimation
The animation loop estimates faces continuously and draws overlays from model output.
Estimate loop
const faces = await model.estimateFaces(video, false);
drawMesh(canvas, video, faces as Array<{
topLeft: number[];
bottomRight: number[];
landmarks?: number[][];
}>);
requestAnimationFrame(step);3) Coordinate transforms
Because the video is mirrored for UX, x-coordinates are transformed before drawing boxes and points.
Mission Debrief
Fast enough for live overlays in browser.
Sparse landmarks are enough for strong visual effect.
Coordinate transforms are critical when mirroring.