TypeScript SDK Reference / HeatmapRenderer

Class: HeatmapRenderer

Headless heatmap overlay that renders animated thermal field visualizations on top of a video element. Designed to integrate with the VitalSignCamera SDK pipeline — created and fed data automatically when visualizationOptions.heatmap is enabled.

The renderer uses face landmark detection to identify 4 hotspot regions (forehead, left cheek, right cheek, chin), clips rendering to the face outline, and blends multiple radial gradients additively to produce a smooth thermal field effect. Animation effects including pulsing, drifting, color cycling, and flicker are configurable per preset.

Example

import HeatmapRenderer from "./visualizations/heatmap/HeatmapRenderer";

const heatmap = new HeatmapRenderer(videoElement, { enabled: true, mode: "neon" });
// Feed frame data:
heatmap.update(faceBox, landmarks, signalValues);
// Switch preset at runtime:
heatmap.mode = "pulse";
// Clean up:
heatmap.destroy();

Constructors

Constructor

new HeatmapRenderer(video, options?): HeatmapRenderer

Create a new HeatmapRenderer overlay.

Parameters

video

HTMLVideoElement

The <video> element to overlay heatmap on.

options?

HeatmapOptions

Optional configuration.

Returns

HeatmapRenderer

Properties

overlay?

optional overlay: HTMLDivElement

The overlay container element appended next to the video.

Accessors

config

Get Signature

get config(): HeatmapVariantConfig

Get the current active config. Returns the resolved HeatmapVariantConfig (always a concrete object, not a preset name).

Returns

HeatmapVariantConfig

---

enabled

Set Signature

set enabled(val): void

Enable or disable the heatmap overlay. When disabled, the canvas is cleared and rendering stops.

Parameters

val

boolean

Returns

void

---

mode

Set Signature

set mode(m): void

Set the heatmap mode to a built-in preset name or a custom config object. Changes take effect on the next rendered frame.

Parameters

m

HeatmapPresetName | HeatmapVariantConfig

Returns

void

Methods

destroy()

destroy(): void

Destroy the heatmap renderer. Stops the render loop, clears the canvas, and removes the overlay from the DOM.

Returns

void

---

update()

update(faceBox?, landmarks?, signalValues?): void

Feed per-frame face data into the renderer. Typically called automatically by the VitalSignCamera pipeline.

Parameters

faceBox?

NormalizedFacebox

Normalized face bounding box (or undefined to clear).

landmarks?

NormalizedLandmark[]

Face landmark array (or undefined to clear).

signalValues?

number[]

PPG signal values for intensity modulation (optional).

Returns

void

---

updateOptions()

updateOptions(options): void

Update heatmap options at runtime.

Parameters

options

HeatmapOptions

Partial or full HeatmapOptions.

Returns

void