index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>landmarks</title>
<style>
:root {
--bg: #ffffff;
--ink: #111111;
--line: #e6e6e6;
--muted: #8a8a8a;
--frame: #111111;
--stage-bg: #f6f6f6;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 780px; margin: 0 auto; padding: 32px 20px 64px; }
header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--frame); margin-bottom: 22px;
}
h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.sub { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.controls { display: flex; align-items: center; gap: 10px; }
label.mlabel { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
select {
appearance: none; -webkit-appearance: none; background: #fff;
border: 1px solid var(--frame); border-radius: 0; color: var(--ink);
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.04em;
padding: 8px 30px 8px 12px; cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
background-position: right 13px center, right 8px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.stage {
position: relative; width: 100%; aspect-ratio: 4 / 3;
background: var(--stage-bg); border: 1px solid var(--frame); overflow: hidden;
}
.mirror { transform: scaleX(-1); }
video, canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
canvas { filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.55)); }
/* metadata overlay — NOT mirrored (sits inside stage, no .mirror class) */
.meta {
position: absolute; top: 10px; left: 10px; z-index: 2;
background: rgba(255,255,255,0.9); border: 1px solid var(--frame);
padding: 9px 11px; min-width: 138px;
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; line-height: 1.55;
letter-spacing: 0.03em; color: var(--ink); backdrop-filter: blur(2px);
}
.meta h2 { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.meta .row { display: flex; justify-content: space-between; gap: 14px; }
.meta .row span:last-child { color: #000; font-weight: 600; }
.meta .row.bs span:first-child { color: var(--muted); font-weight: 400; }
.start {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
z-index: 3; background: var(--stage-bg);
}
.start button {
background: #fff; border: 1px solid var(--frame); color: var(--ink);
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.1em;
text-transform: uppercase; padding: 12px 20px; cursor: pointer;
}
.start button:hover { background: var(--ink); color: #fff; }
.start .err { color: #b00020; max-width: 60%; text-align: center; font-size: 12px; line-height: 1.5; }
.readout {
display: flex; gap: 28px; margin-top: 14px;
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.04em;
}
.readout div { color: var(--muted); }
.readout b { color: var(--ink); font-weight: 600; }
/* parameter panel */
.panel { margin-top: 20px; border: 1px solid var(--line); padding: 16px 18px; }
.prow { display: grid; grid-template-columns: 84px 1fr 42px; align-items: center; gap: 14px; margin-bottom: 12px; }
.prow:last-of-type { margin-bottom: 0; }
.prow label {
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase;
}
.prow output {
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
color: var(--ink); font-weight: 600; text-align: right;
}
input[type=range] {
-webkit-appearance: none; appearance: none; width: 100%; height: 1px; background: var(--frame); cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%;
background: #fff; border: 1px solid var(--frame);
}
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 1px solid var(--frame); }
.cap { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.note { margin-top: 22px; font-size: 12px; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.note code { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); font-size: 11px; }
</style>
</head>
<body>
<div class="wrap">
<header>
<div>
<h1>Landmarks</h1>
<div class="sub">mediapipe tasks · single webcam</div>
</div>
<div class="controls">
<label class="mlabel" for="mode">track</label>
<select id="mode" disabled>
<option value="pose">Body</option>
<option value="hand">Hands</option>
<option value="face">Face</option>
</select>
</div>
</header>
<div class="stage" id="stage">
<video id="video" class="mirror" playsinline muted></video>
<canvas id="canvas" class="mirror"></canvas>
<div class="meta" id="meta" style="display:none"></div>
<div class="start" id="start"><button id="startBtn">Start camera</button></div>
</div>
<div class="readout">
<div>fps <b id="rFps">—</b></div>
<div>status <b id="rStatus">idle</b></div>
</div>
<section class="panel">
<div class="prow">
<label for="det">detection</label>
<input id="det" type="range" min="0" max="1" step="0.05" value="0.5" />
<output id="detv">0.50</output>
</div>
<div class="prow">
<label for="pres">presence</label>
<input id="pres" type="range" min="0" max="1" step="0.05" value="0.5" />
<output id="presv">0.50</output>
</div>
<div class="prow">
<label for="track">tracking</label>
<input id="track" type="range" min="0" max="1" step="0.05" value="0.5" />
<output id="trackv">0.50</output>
</div>
<div class="prow">
<label for="smooth">smoothing</label>
<input id="smooth" type="range" min="0" max="95" step="5" value="40" />
<output id="smoothv">40%</output>
</div>
<p class="cap">confidence thresholds map to the active track and reload that model on release. smoothing is applied live (0% = raw, higher = steadier but laggier).</p>
</section>
<p class="note">
Pick <b>Body / Hands / Face</b> — one model at a time, cached after first load. Overlay panel (top-left)
shows what's being tracked. Camera needs <code>https://</code> or <code>localhost</code>.
</p>
</div>
<script type="module">
import {
FilesetResolver, PoseLandmarker, HandLandmarker, FaceLandmarker, DrawingUtils
} from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest";
// Pin @latest -> a fixed version (e.g. @0.10.31) for production so bundle + wasm stay aligned.
const WASM = "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm";
const MODELS = {
pose: "https://storage.googleapis.com/mediapipe-models/pose_landmarker/pose_landmarker_lite/float16/1/pose_landmarker_lite.task",
hand: "https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task",
face: "https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",
};
const POINTS = { pose: 33, hand: 21, face: 478 };
const OVERLAY = "#ffffff"; // monochrome overlay — change to taste
const $ = id => document.getElementById(id);
const video = $("video"), canvas = $("canvas"), ctx = canvas.getContext("2d");
const draw = new DrawingUtils(ctx);
const modeSel = $("mode"), startEl = $("start"), startBtn = $("startBtn");
const meta = $("meta"), rFps = $("rFps"), rStatus = $("rStatus");
// parameters
const params = { det: 0.5, pres: 0.5, track: 0.5 };
let smoothPct = 40;
let vision = null;
const cache = { pose: null, hand: null, face: null };
let mode = "pose", running = false, raf = 0, lastTime = -1;
let fpsT = performance.now(), fpsN = 0;
let smoothState = null;
const status = s => rStatus.textContent = s;
async function getVision() {
if (!vision) vision = await FilesetResolver.forVisionTasks(WASM);
return vision;
}
function optionsFor(m) {
const base = { modelAssetPath: MODELS[m], delegate: "GPU" };
const c = params;
if (m === "pose") return { baseOptions: base, runningMode: "VIDEO", numPoses: 1,
minPoseDetectionConfidence: c.det, minPosePresenceConfidence: c.pres, minTrackingConfidence: c.track };
if (m === "hand") return { baseOptions: base, runningMode: "VIDEO", numHands: 2,
minHandDetectionConfidence: c.det, minHandPresenceConfidence: c.pres, minTrackingConfidence: c.track };
return { baseOptions: base, runningMode: "VIDEO", numFaces: 1, outputFaceBlendshapes: true,
minFaceDetectionConfidence: c.det, minFacePresenceConfidence: c.pres, minTrackingConfidence: c.track };
}
async function getLandmarker(m) {
if (cache[m]) return cache[m];
status("loading " + m);
const v = await getVision();
const opt = optionsFor(m);
const cls = m === "pose" ? PoseLandmarker : m === "hand" ? HandLandmarker : FaceLandmarker;
cache[m] = await cls.createFromOptions(v, opt);
status("running");
return cache[m];
}
// rebuild active model with current confidence params (invalidate all so all pick up new values)
let rebuildT = 0;
function scheduleRebuild() {
clearTimeout(rebuildT);
rebuildT = setTimeout(async () => {
for (const k in cache) { try { cache[k]?.close?.(); } catch (e) {} cache[k] = null; }
smoothState = null;
if (running) await getLandmarker(mode);
}, 250);
}
// exponential moving average smoothing over instances[][]{x,y,z}
function smoothAlpha() { return Math.max(0.03, 1 - smoothPct / 100); }
function applySmooth(instances) {
const a = smoothAlpha();
if (a >= 0.999 || instances.length === 0) { smoothState = null; return instances; }
const shapeMatch = smoothState && smoothState.length === instances.length &&
smoothState[0] && instances[0] && smoothState[0].length === instances[0].length;
if (!shapeMatch) { smoothState = instances.map(inst => inst.map(p => ({ x: p.x, y: p.y, z: p.z }))); return instances; }
const out = [];
for (let i = 0; i < instances.length; i++) {
const inst = instances[i], prev = smoothState[i], o = [];
for (let j = 0; j < inst.length; j++) {
const p = inst[j], q = prev[j];
q.x += (p.x - q.x) * a; q.y += (p.y - q.y) * a; q.z += (p.z - q.z) * a;
o.push({ x: q.x, y: q.y, z: q.z, visibility: p.visibility });
}
out.push(o);
}
return out;
}
function renderInstances(instances, m) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (m === "pose") {
for (const l of instances) {
draw.drawConnectors(l, PoseLandmarker.POSE_CONNECTIONS, { color: OVERLAY, lineWidth: 2.5 });
draw.drawLandmarks(l, { color: OVERLAY, fillColor: OVERLAY, radius: 3 });
}
} else if (m === "hand") {
for (const l of instances) {
draw.drawConnectors(l, HandLandmarker.HAND_CONNECTIONS, { color: OVERLAY, lineWidth: 2.5 });
draw.drawLandmarks(l, { color: OVERLAY, fillColor: OVERLAY, radius: 3 });
}
} else {
for (const l of instances) {
draw.drawConnectors(l, FaceLandmarker.FACE_LANDMARKS_TESSELATION, { color: "rgba(255,255,255,0.35)", lineWidth: 0.6 });
draw.drawConnectors(l, FaceLandmarker.FACE_LANDMARKS_FACE_OVAL, { color: OVERLAY, lineWidth: 1.6 });
draw.drawConnectors(l, FaceLandmarker.FACE_LANDMARKS_LIPS, { color: OVERLAY, lineWidth: 1.6 });
draw.drawConnectors(l, FaceLandmarker.FACE_LANDMARKS_LEFT_EYE, { color: OVERLAY, lineWidth: 1.4 });
draw.drawConnectors(l, FaceLandmarker.FACE_LANDMARKS_RIGHT_EYE, { color: OVERLAY, lineWidth: 1.4 });
draw.drawConnectors(l, FaceLandmarker.FACE_LANDMARKS_LEFT_EYEBROW, { color: OVERLAY, lineWidth: 1.4 });
draw.drawConnectors(l, FaceLandmarker.FACE_LANDMARKS_RIGHT_EYEBROW, { color: OVERLAY, lineWidth: 1.4 });
}
}
}
function updateMeta(res, m) {
let html = "";
if (m === "pose") {
const inst = res.landmarks || [];
let vis = 0, n = 0;
for (const l of inst) for (const p of l) if (typeof p.visibility === "number") { vis += p.visibility; n++; }
const avg = n ? Math.round(vis / n * 100) : 0;
html = `<h2>Body</h2>
<div class="row"><span>poses</span><span>${inst.length}</span></div>
<div class="row"><span>points</span><span>${inst.length ? POINTS.pose : 0}</span></div>
<div class="row"><span>visibility</span><span>${avg}%</span></div>`;
} else if (m === "hand") {
const inst = res.landmarks || [];
const hd = res.handedness || res.handednesses || [];
let rows = "";
hd.forEach(h => { const c = h && h[0]; if (c) rows += `<div class="row"><span>${c.categoryName.toLowerCase()}</span><span>${c.score.toFixed(2)}</span></div>`; });
html = `<h2>Hands</h2>
<div class="row"><span>hands</span><span>${inst.length}</span></div>
<div class="row"><span>points</span><span>${inst.length ? POINTS.hand + " ea" : 0}</span></div>${rows}`;
} else {
const inst = res.faceLandmarks || [];
const bs = (res.faceBlendshapes && res.faceBlendshapes[0] && res.faceBlendshapes[0].categories) || [];
const top = [...bs].sort((a, b) => b.score - a.score).slice(0, 3);
let rows = "";
top.forEach(c => rows += `<div class="row bs"><span>${c.categoryName}</span><span>${c.score.toFixed(2)}</span></div>`);
html = `<h2>Face</h2>
<div class="row"><span>faces</span><span>${inst.length}</span></div>
<div class="row"><span>points</span><span>${inst.length ? POINTS.face : 0}</span></div>${rows}`;
}
meta.innerHTML = html;
}
function loop() {
if (!running) return;
const lm = cache[mode];
if (lm && video.currentTime !== lastTime) {
lastTime = video.currentTime;
const t = performance.now();
const res = lm.detectForVideo(video, t);
const instances = (mode === "face" ? res.faceLandmarks : res.landmarks) || [];
renderInstances(applySmooth(instances), mode);
updateMeta(res, mode);
fpsN++;
if (t - fpsT >= 500) { rFps.textContent = Math.round(fpsN * 1000 / (t - fpsT)); fpsT = t; fpsN = 0; }
}
raf = requestAnimationFrame(loop);
}
async function startCamera() {
try {
startBtn.disabled = true;
status("requesting camera");
const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 960 }, audio: false });
video.srcObject = stream;
await video.play();
canvas.width = video.videoWidth; canvas.height = video.videoHeight;
startEl.remove();
meta.style.display = "block";
modeSel.disabled = false;
await getLandmarker(mode);
running = true;
loop();
} catch (e) {
startBtn.disabled = false;
startEl.innerHTML = '<div class="err">Camera unavailable: ' + e.message + '<br><br>Serve over https:// or localhost, then reload.</div>';
}
}
// wiring
modeSel.addEventListener("change", async () => {
mode = modeSel.value;
meta.innerHTML = "";
lastTime = -1; smoothState = null;
ctx.clearRect(0, 0, canvas.width, canvas.height);
await getLandmarker(mode);
});
function bindConf(id, key) {
const el = $(id), out = $(id + "v");
el.addEventListener("input", () => { params[key] = +el.value; out.textContent = (+el.value).toFixed(2); });
el.addEventListener("change", scheduleRebuild);
}
bindConf("det", "det"); bindConf("pres", "pres"); bindConf("track", "track");
const sm = $("smooth"), smv = $("smoothv");
sm.addEventListener("input", () => { smoothPct = +sm.value; smv.textContent = sm.value + "%"; });
startBtn.addEventListener("click", startCamera);
</script>
</body>
</html>