| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="utf-8" />
|
| <meta name="viewport" content="width=device-width,initial-scale=1" />
|
| <title>MediaPipe Hands + FaceMesh (Bigger + Better)</title>
|
|
|
| <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3.1675466862/camera_utils.js" crossorigin="anonymous"></script>
|
| <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1675469240/hands.js" crossorigin="anonymous"></script>
|
| <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/face_mesh.js" crossorigin="anonymous"></script>
|
|
|
| <style>
|
| :root { color-scheme: dark; }
|
| html, body { margin: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }
|
| #video { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; z-index: -1; }
|
| #canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; background: #000; }
|
|
|
| #hud{
|
| position:fixed; left:14px; top:14px; z-index:10; display:none;
|
| padding:10px 12px; border-radius:10px;
|
| background:rgba(18,18,18,0.72); border:1px solid rgba(255,255,255,0.10);
|
| backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
|
| box-shadow:0 10px 24px rgba(0,0,0,0.45);
|
| font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
| line-height:1.15; user-select:none; min-width: 190px;
|
| }
|
| .row{ display:flex; justify-content:space-between; gap:10px; }
|
| .k{ color:rgba(255,255,255,0.65); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; }
|
| .v{ font-size:18px; font-weight:800; }
|
|
|
| #start{
|
| position:fixed; inset:0; margin:auto; z-index:20;
|
| width:min(380px, calc(100vw - 36px)); height:56px;
|
| border:0; border-radius:999px; cursor:pointer;
|
| font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
|
| color:#001114;
|
| background:linear-gradient(135deg, #00ffff 0%, #00d4ff 45%, #00ff9a 100%);
|
| box-shadow:0 0 0 1px rgba(0,255,255,0.18), 0 18px 44px rgba(0,255,255,0.18);
|
| }
|
| </style>
|
| </head>
|
|
|
| <body>
|
| <video id="video" playsinline muted></video>
|
| <canvas id="canvas"></canvas>
|
|
|
| <div id="hud">
|
| <div class="row"><div class="k">Render</div><div id="fpsR" class="v">0</div></div>
|
| <div class="row"><div class="k">Hands</div><div id="fpsH" class="v">0</div></div>
|
| <div class="row"><div class="k">Face</div><div id="fpsF" class="v">0</div></div>
|
| <div class="row"><div class="k">Face</div><div id="faceOn" class="v" style="font-size:14px;">OFF</div></div>
|
| </div>
|
|
|
| <button id="start">Start</button>
|
|
|
| <script>
|
| const HANDS_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1675469240/";
|
| const FACE_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/";
|
|
|
|
|
| const CAM_W = 320, CAM_H = 240;
|
|
|
|
|
|
|
| const HAND_SCALE = 1.35;
|
| const FACE_SCALE = 1.25;
|
|
|
|
|
| const HAND_LINE_W = 3.5;
|
| const HAND_POINT = 4;
|
| const FACE_POINT = 1.4;
|
|
|
|
|
| const HANDS_HZ = 24;
|
| const FACE_HZ = 10;
|
|
|
|
|
| const MAX_HANDS = 2;
|
| const HANDS_COMPLEXITY = 0;
|
| const FACE_REFINE = false;
|
|
|
| const videoEl = document.getElementById('video');
|
| const canvasEl = document.getElementById('canvas');
|
| const ctx = canvasEl.getContext('2d', { alpha: false, desynchronized: true });
|
|
|
| function resizeCanvas() {
|
| const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
|
| canvasEl.width = Math.floor(window.innerWidth * dpr);
|
| canvasEl.height = Math.floor(window.innerHeight * dpr);
|
| canvasEl.style.width = window.innerWidth + 'px';
|
| canvasEl.style.height = window.innerHeight + 'px';
|
| ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
| clearBlack();
|
| }
|
| function clearBlack() {
|
| ctx.fillStyle = '#000000';
|
| ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
|
| }
|
| window.addEventListener('resize', resizeCanvas, { passive: true });
|
| resizeCanvas();
|
|
|
|
|
| function getViewRect() {
|
| const cw = window.innerWidth, ch = window.innerHeight;
|
| const camAR = CAM_W / CAM_H;
|
| const canvasAR = cw / ch;
|
| let vw, vh, vx, vy;
|
| if (canvasAR > camAR) { vh = ch; vw = vh * camAR; vx = (cw - vw) * 0.5; vy = 0; }
|
| else { vw = cw; vh = vw / camAR; vx = 0; vy = (ch - vh) * 0.5; }
|
| return { x: vx, y: vy, w: vw, h: vh };
|
| }
|
| function mapLM(lm, view) {
|
| return { x: view.x + lm.x * view.w, y: view.y + lm.y * view.h };
|
| }
|
|
|
|
|
| function centroidPx(landmarks, view) {
|
| let sx = 0, sy = 0;
|
| const n = landmarks.length;
|
| for (let i = 0; i < n; i++) {
|
| const p = mapLM(landmarks[i], view);
|
| sx += p.x; sy += p.y;
|
| }
|
| return { x: sx / n, y: sy / n };
|
| }
|
|
|
| function drawPointsScaled(landmarks, color, sizePx, view, scale) {
|
| if (!landmarks || !landmarks.length) return;
|
| const c = centroidPx(landmarks, view);
|
| ctx.fillStyle = color;
|
| ctx.beginPath();
|
| for (let i = 0, n = landmarks.length; i < n; i++) {
|
| const p = mapLM(landmarks[i], view);
|
| const x = c.x + (p.x - c.x) * scale;
|
| const y = c.y + (p.y - c.y) * scale;
|
| ctx.rect(x, y, sizePx, sizePx);
|
| }
|
| ctx.fill();
|
| }
|
|
|
| function drawEdgesScaled(landmarks, edges, color, lineWidth, view, scale) {
|
| if (!landmarks || !landmarks.length) return;
|
| const c = centroidPx(landmarks, view);
|
| ctx.strokeStyle = color;
|
| ctx.lineWidth = lineWidth;
|
| ctx.beginPath();
|
| for (let i = 0; i < edges.length; i++) {
|
| const a = edges[i][0], b = edges[i][1];
|
| const p0 = mapLM(landmarks[a], view);
|
| const p1 = mapLM(landmarks[b], view);
|
| const x0 = c.x + (p0.x - c.x) * scale;
|
| const y0 = c.y + (p0.y - c.y) * scale;
|
| const x1 = c.x + (p1.x - c.x) * scale;
|
| const y1 = c.y + (p1.y - c.y) * scale;
|
| ctx.moveTo(x0, y0);
|
| ctx.lineTo(x1, y1);
|
| }
|
| ctx.stroke();
|
| }
|
|
|
|
|
| const HAND_EDGES = [
|
| [0,1],[1,2],[2,3],[3,4],
|
| [0,5],[5,6],[6,7],[7,8],
|
| [0,9],[9,10],[10,11],[11,12],
|
| [0,13],[13,14],[14,15],[15,16],
|
| [0,17],[17,18],[18,19],[19,20],
|
| [5,9],[9,13],[13,17]
|
| ];
|
|
|
|
|
| const EMA_HANDS = 0.65;
|
| const EMA_FACE = 0.45;
|
|
|
| function cloneLms(lms) {
|
| if (!lms) return null;
|
| const out = new Array(lms.length);
|
| for (let i = 0; i < lms.length; i++) out[i] = { x: lms[i].x, y: lms[i].y, z: lms[i].z };
|
| return out;
|
| }
|
| function emaUpdate(prev, next, alpha) {
|
| if (!next) return null;
|
| if (!prev || prev.length !== next.length) return cloneLms(next);
|
| const out = new Array(next.length);
|
| for (let i = 0; i < next.length; i++) {
|
| const p = prev[i], n = next[i];
|
| out[i] = { x: p.x + (n.x - p.x) * alpha, y: p.y + (n.y - p.y) * alpha, z: 0 };
|
| }
|
| return out;
|
| }
|
| function lerpFrame(a, b, t) {
|
| if (!a) return null;
|
| if (!b || a.length !== b.length) return a;
|
| const out = new Array(a.length);
|
| for (let i = 0; i < a.length; i++) {
|
| out[i] = { x: a[i].x + (b[i].x - a[i].x) * t, y: a[i].y + (b[i].y - a[i].y) * t, z: 0 };
|
| }
|
| return out;
|
| }
|
|
|
| let prevLH=null, currLH=null, prevRH=null, currRH=null;
|
| let prevFace=null, currFace=null;
|
|
|
| let prevHandsTs=0, lastHandsTs=0;
|
| let prevFaceTs=0, lastFaceTs=0;
|
|
|
|
|
| const hudEl = document.getElementById('hud');
|
| const fpsREl = document.getElementById('fpsR');
|
| const fpsHEl = document.getElementById('fpsH');
|
| const fpsFEl = document.getElementById('fpsF');
|
| const faceOnEl = document.getElementById('faceOn');
|
|
|
| let rFrames = 0, rLastT = performance.now();
|
| function tickRenderFps() {
|
| rFrames++;
|
| const now = performance.now();
|
| const dt = now - rLastT;
|
| if (dt >= 500) {
|
| fpsREl.textContent = String(Math.round((rFrames * 1000) / dt));
|
| rLastT = now; rFrames = 0;
|
| }
|
| }
|
| let hFrames = 0, hLastT = performance.now();
|
| function tickHandsFps() {
|
| hFrames++;
|
| const now = performance.now();
|
| const dt = now - hLastT;
|
| if (dt >= 900) {
|
| fpsHEl.textContent = String(Math.round((hFrames * 1000) / dt));
|
| hLastT = now; hFrames = 0;
|
| }
|
| }
|
| let fFrames = 0, fLastT = performance.now();
|
| function tickFaceFps() {
|
| fFrames++;
|
| const now = performance.now();
|
| const dt = now - fLastT;
|
| if (dt >= 1100) {
|
| fpsFEl.textContent = String(Math.round((fFrames * 1000) / dt));
|
| fLastT = now; fFrames = 0;
|
| }
|
| }
|
|
|
| function renderLoop() {
|
| clearBlack();
|
| const view = getViewRect();
|
| const now = performance.now();
|
|
|
| const hdt = Math.max(1, lastHandsTs - prevHandsTs);
|
| const ht = Math.min(1, Math.max(0, (now - lastHandsTs) / hdt));
|
| const drawLH = lerpFrame(prevLH, currLH, ht);
|
| const drawRH = lerpFrame(prevRH, currRH, ht);
|
|
|
| const fdt = Math.max(1, lastFaceTs - prevFaceTs);
|
| const ft = Math.min(1, Math.max(0, (now - lastFaceTs) / fdt));
|
| const drawFace = lerpFrame(prevFace, currFace, ft);
|
|
|
| if (drawLH) {
|
| drawEdgesScaled(drawLH, HAND_EDGES, '#00ff00', HAND_LINE_W, view, HAND_SCALE);
|
| drawPointsScaled(drawLH, '#00ff00', HAND_POINT, view, HAND_SCALE);
|
| }
|
| if (drawRH) {
|
| drawEdgesScaled(drawRH, HAND_EDGES, '#ffff00', HAND_LINE_W, view, HAND_SCALE);
|
| drawPointsScaled(drawRH, '#ffff00', HAND_POINT, view, HAND_SCALE);
|
| }
|
|
|
| if (drawFace) {
|
| drawPointsScaled(drawFace, '#ff00ff', FACE_POINT, view, FACE_SCALE);
|
| }
|
|
|
| tickRenderFps();
|
| requestAnimationFrame(renderLoop);
|
| }
|
|
|
|
|
| const hands = new Hands({ locateFile: (f) => HANDS_BASE + f });
|
| hands.setOptions({
|
| maxNumHands: MAX_HANDS,
|
| modelComplexity: HANDS_COMPLEXITY,
|
| minDetectionConfidence: 0.5,
|
| minTrackingConfidence: 0.5,
|
| });
|
| hands.onResults((res) => {
|
| prevHandsTs = lastHandsTs;
|
| lastHandsTs = performance.now();
|
| tickHandsFps();
|
|
|
| let left = null, right = null;
|
| const lms = res.multiHandLandmarks || [];
|
| const hd = res.multiHandedness || [];
|
| for (let i = 0; i < lms.length; i++) {
|
| const label = hd[i]?.label;
|
| if (label === 'Left') left = lms[i];
|
| else if (label === 'Right') right = lms[i];
|
| }
|
|
|
| prevLH = currLH; currLH = emaUpdate(currLH, left, EMA_HANDS);
|
| prevRH = currRH; currRH = emaUpdate(currRH, right, EMA_HANDS);
|
| });
|
|
|
| const faceMesh = new FaceMesh({ locateFile: (f) => FACE_BASE + f });
|
| faceMesh.setOptions({
|
| maxNumFaces: 1,
|
| refineLandmarks: FACE_REFINE,
|
| minDetectionConfidence: 0.5,
|
| minTrackingConfidence: 0.5,
|
| });
|
| faceMesh.onResults((res) => {
|
| prevFaceTs = lastFaceTs;
|
| lastFaceTs = performance.now();
|
| tickFaceFps();
|
|
|
| const face = res.multiFaceLandmarks?.[0] || null;
|
| prevFace = currFace;
|
| currFace = emaUpdate(currFace, face, EMA_FACE);
|
|
|
| faceOnEl.textContent = face ? "ON" : "OFF";
|
| faceOnEl.style.color = face ? "#00ff80" : "#ff3b3b";
|
| });
|
|
|
|
|
| let busy = false;
|
| let lastHandsRun = 0, lastFaceRun = 0;
|
| let preferFaceNext = true;
|
|
|
| function due(now, lastT, hz) { return (now - lastT) >= (1000 / hz); }
|
|
|
| async function runScheduled(now) {
|
| if (busy) return;
|
|
|
| const handsDue = due(now, lastHandsRun, HANDS_HZ);
|
| const faceDue = due(now, lastFaceRun, FACE_HZ);
|
|
|
| let run = null;
|
| if (handsDue && !faceDue) run = 'hands';
|
| else if (!handsDue && faceDue) run = 'face';
|
| else if (handsDue && faceDue) run = (preferFaceNext ? 'face' : 'hands');
|
| else return;
|
|
|
| busy = true;
|
| try {
|
| if (run === 'hands') {
|
| lastHandsRun = now;
|
| preferFaceNext = true;
|
| await hands.send({ image: videoEl });
|
| } else {
|
| lastFaceRun = now;
|
| preferFaceNext = false;
|
| await faceMesh.send({ image: videoEl });
|
| }
|
| } finally {
|
| busy = false;
|
| }
|
| }
|
|
|
| const camera = new Camera(videoEl, {
|
| width: CAM_W,
|
| height: CAM_H,
|
| onFrame: async () => { await runScheduled(performance.now()); }
|
| });
|
|
|
| document.getElementById('start').addEventListener('click', async () => {
|
| document.getElementById('start').style.display = 'none';
|
| hudEl.style.display = 'block';
|
| clearBlack();
|
|
|
| const t = performance.now();
|
| prevHandsTs = lastHandsTs = t;
|
| prevFaceTs = lastFaceTs = t;
|
|
|
| lastHandsRun = t - 1000;
|
| lastFaceRun = t - 1000;
|
|
|
| await camera.start();
|
| requestAnimationFrame(renderLoop);
|
| });
|
| </script>
|
| </body>
|
| </html>
|
|
|
