realtime
Source: realtime.js:16
Entry point for the latent space visualizer. Owns the detection loop, the descriptor equalizer, the presence state machine and the page lifecycle; everything else lives in the sibling realtime-* modules.
The page measures one thing: how far a face has moved from a reference captured before the makeup session. Two lines on the plot carry claims and they are different kinds of claim — the noise floor is measured here, on this camera, from this face; 0.60 is dlib's LFW default and is a property of a benchmark, not of anyone's face. Nothing is drawn between them, because nothing between them has been measured.
Instance Methods
setStatus(
message: string,
warn?: boolean,
quality?: 'neutral' | 'valid' | 'outside-guide' | 'lighting' | 'no-face',
key?: string,
details?: string,
): void
Writes the floating status message over the video stage.
Parameters
message(string) — Message to display.warn(boolean, optional, default: false) — Whether the message needs emphasis.quality('neutral' | 'valid' | 'outside-guide' | 'lighting' | 'no-face', optional, default: "neutral") — Timeline state.key(string, optional) — Stable state identity; numeric details may vary per frame.details(string, optional) — Full text exposed as a native tooltip.
Returns
void
setThresholdTooltipVisible()
Shows or hides the threshold explainer without occupying persistent space.
setTrackingState(state: string): void
Writes the right-panel state label.
Parameters
state(string) — Current app state.
Returns
void
setDistanceValue(value: number): void
Writes the numeric distance readout.
Parameters
value(number) — Distance to display.
Returns
void
setDistanceQuality()
Labels whether the numeric readout is measurement-grade or raw context.
setDescriptorValidity()
Marks whether the descriptor panels show a current or frozen valid frame.
descriptorDelta(
baseline: Float32Array | Array.<number>,
current: Float32Array | Array.<number>,
): Float32Array
Computes signed per-coordinate descriptor deltas.
Parameters
baseline(Float32Array | Array.<number>) — Baseline descriptor.current(Float32Array | Array.<number>) — Current descriptor.
Returns
Float32Array— Signed deltas in descriptor order.
mediaTimeSuffix()
Returns a compact local-video time suffix for timeline events.
syncSessionControls()
Reflects the declared experiment phase in the workflow controls.
setSessionPhase()
Changes the declared experiment phase and redraws its controls.
initEqualizer(): void
Builds the descriptor equalizer.
Level is baked into each cell at build time so the runtime loop only toggles .is-on for cells that actually changed. The prototype rewrote all 1,280 className strings on every detection frame.
Returns
void
updateEqualizer(
baseline: Array.<number>,
current: Float32Array | Array.<number>,
): void
Updates the equalizer from per-index baseline deltas.
Parameters
baseline(Array.<number>) — Baseline descriptor.current(Float32Array | Array.<number>) — Live descriptor.
Returns
void
resetEqualizer(): void
Returns the equalizer to its unlit state.
Returns
void
setRingProgress(accepted: number, target: number): void
Updates the baseline capture ring.
Parameters
accepted(number) — Accepted samples so far.target(number) — Samples required.
Returns
void
currentObservation()
Returns source-relative timing so a paused video cannot be sampled twice.
setCaptureProgressDetail()
Updates the diagnostic line below the baseline target.
qualityMessage()
Joins every failed quality check instead of hiding all but the first one.
setCalibrationVisible(visible: boolean): void
Shows or hides the baseline capture overlay.
Parameters
visible(boolean) — Whether the overlay should show.
Returns
void
syncBaselineControls(): void
Reflects baseline presence across the controls that depend on it.
Returns
void
ensureLocalVideoPlaying(
failureMessage: string,
): Promise.<boolean>
Starts or resumes a selected local video before a declared session action.
Parameters
failureMessage(string) — Status shown when autoplay is rejected.
Returns
Promise.<boolean>— Whether the action may continue.
startBaselineCapture(): Promise.<void>
Begins a baseline capture run.
Returns
Promise.<void>
setHint(text: string, blocking?: boolean): void
Writes the capture overlay hint line.
Parameters
text(string) — Hint text.blocking(boolean, optional, default: false) — Whether the hint is an instruction to act on.
Returns
void
adoptBaseline(baseline: object, restored?: boolean): void
Adopts a captured or restored baseline and enters tracking.
Parameters
baseline(object) — Baseline record.restored(boolean, optional, default: false) — Whether the baseline came from storage.
Returns
void
deleteBaseline(): void
Discards the current baseline and returns to the capture prompt.
Returns
void
processBaselineFrame(detection: *): void
Feeds one detection into the baseline collector.
Parameters
detection(*) — face-api detection result.
Returns
void
startMakeupStep()
Marks the beginning of one operator-declared makeup change.
startStepMeasurement()
Starts a temporal measurement window for the current declared change.
completeStepMeasurement(snapshot: object): Promise.<void>
Publishes an aggregated step measurement and saves its sharpest frame.
Parameters
snapshot(object) — Temporal-window result returned by the collector.
Returns
Promise.<void>
processTrackingFrame(detection: *): Promise.<void>
Measures one tracking frame and evaluates it for a spike capture.
Parameters
detection(*) — face-api detection result.
Returns
Promise.<void>
storeCapture(
frame: HTMLCanvasElement,
distance: number,
kind: string,
): Promise.<void>
Watermarks and stores one frame, then marks it on the timeline.
Parameters
frame(HTMLCanvasElement) — Frame to store.distance(number) — Distance at capture time.kind(string) — Capture trigger.
Returns
Promise.<void>
captureNow(): Promise.<void>
Captures the current frame on demand.
Returns
Promise.<void>
processNoFace(): void
Handles a frame in which no face was found.
The timeline marks absence immediately with a no-value quality tick. The UI waits through a short debounce before disabling controls or announcing a pause, so a blink remains harmless without erasing elapsed time.
Returns
void
processFaceReturned(): void
Handles a face reappearing after an absence.
Returns
void
onFrame(): Promise.<void>
Runs one detection pass and schedules the next frame.
Returns
Promise.<void>
flushDistanceBuffer(): void
Averages buffered readings into one timeline sample.
Returns
void
startLoops(): void
Starts the detection and sampling loops.
Returns
void
stopLoops(): void
Stops the detection and sampling loops without touching the camera.
Returns
void
stopStream(): void
Releases the camera.
Only stopping the tracks turns the hardware indicator off. Pausing the video element leaves the light on, which on this project is exactly the wrong impression to give.
Returns
void
releaseLocalVideo()
Releases the object URL used by a local-video source.
initWebcam(): Promise.<void>
Requests the camera and binds it to the video element.
Returns
Promise.<void>
useLocalVideo(file: File): Promise.<void>
Replaces the camera with a local, seekable video. The file never leaves the browser; changing source invalidates the source-specific baseline.
Parameters
file(File) — Local video chosen by the operator.
Returns
Promise.<void>
useCameraSource()
Returns from a local-video experiment to the live camera.
loadModels(): Promise.<void>
Loads the vendored face-api models.
Every shard lives under /lab-js/vendor, so the page makes no third-party request and runs with the network unplugged. MODEL_URLS.tiny, .landmarks and .recognition all resolve to that one directory.
Returns
Promise.<void>
handleHidden(): void
Suspends work while the tab is hidden.
Window blur is deliberately not the trigger: it fires when another window is clicked while this tab is still on screen, which would kill the camera while the person is looking straight at it.
Returns
void
handleVisible(): Promise.<void>
Resumes work when the tab becomes visible again.
Returns
Promise.<void>
teardown(): void
Fully releases every resource held by the page.
Returns
void
bindListeners(): void
Binds interaction and lifecycle listeners.
Returns
void
boot(): Promise.<void>
Bootstraps the page and reports startup failures in the status pill.
Returns
Promise.<void>
Static Methods
initRealtime(): Promise.<void>
Initialises the visualizer and starts its loops.
Returns
Promise.<void>
Other
MATCH_THRESHOLD
dlib's documented default, measured on LFW. Cited, not tuned, not movable.
GRAPH_MAX_DISTANCE
Impostor pairs live below this; the ceiling exists so success has headroom.
NO_FACE_DEBOUNCE_MS
Long enough that a blink does not put controls into a paused UI state.
HIDDEN_STOP_DELAY_MS
Grace period before a hidden tab loses the camera entirely.