How to Build Browser Camera Depth and Liveness Checks with Canvas and Face Landmarker
A practical guide to building a browser camera sandbox with live video, depth-like visualization, AI preprocessing, MediaPipe Face Landmarker and head-pose challenges.
A browser camera sandbox follows capture → pixels → landmarks → decision. getUserMedia provides the stream, Canvas lets you inspect pixels, and Face Landmarker provides face landmarks for approximate head-pose checks. A real anti-spoof system still needs additional liveness signals because landmarks alone do not prove a physical person is in front of the camera.
A visible path from live video to a useful signal
The point of a sandbox is to make inference understandable. Every layer can be switched on and inspected.
Capture, pixels, landmarks, decision
Get the stream
Request getUserMedia after a user action, handle permission errors and stop every track during cleanup.
Draw the frame
Copy video into Canvas with drawImage. From there you can inspect ImageData and build visual filters.
Find structure
Face Landmarker returns face landmarks. The nose position relative to the eyes gives a simple normalized yaw signal.
Check the challenge
Hold each expected pose briefly, advance only after it is detected and show an explicit final result.
The smallest useful camera loop
Start with a local MediaStream. The browser should ask for permission only after a clear user action and should always release tracks when the component unmounts.
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "user" },
audio: false,
});
video.srcObject = stream;
await video.play();
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);The same Canvas frame can feed visualization, pixel analysis and a vision model without a server round trip.
Checking left, right and up
For a gesture challenge, compare stable face landmarks instead of trying to identify a person. Normalize the nose position by eye distance so the signal is less sensitive to how close the user sits to the camera.
const eyeDistance = Math.max(Math.abs(rightEye.x - leftEye.x), 0.01);
const eyeMidX = (leftEye.x + rightEye.x) / 2;
const yaw = (nose.x - eyeMidX) / eyeDistance;
const isLeft = yaw > 0.1;
const isRight = yaw < -0.1;For an upward look, an absolute threshold can match a neutral face. Save a baseline at the beginning of the step and compare the change instead:
const pitchDelta = currentPitch - baselinePitch;
const isUp = pitchDelta < -0.08;What this result does and does not prove
What it sees
A face, approximate landmarks and whether the observed pose matches the requested gesture.
What it does not prove
Landmarks do not prove a physical person is present. Replay video, screen recapture or deepfake content may still pass a simple challenge.
Production additions
Randomized challenges, blink cues, texture and screen-reflection analysis, temporal consistency, depth signals and a dedicated anti-spoof model.
Where a camera liveness flow is useful
This is not only about login. Pose challenges can become a UX and risk signal wherever a product needs an active camera session.
Onboarding and KYC
Check a stable pose before selfie or document capture. This supports UX but does not replace regulated identity verification.
Remote proctoring
Ask for a random pose and notice when a session has become a static recording.
Sensitive actions
Add a short challenge before changing recovery details or confirming a high-impact action.
Vision research
Compare RGB, edge maps, depth-like color and landmarks on one frame without hiding behavior behind a black box.
How to test a tablet video honestly
This red-team exercise shows the boundary between gesture detection and real anti-spoofing.
Record an honest session
Film yourself on a second device while completing each prompt in order.
Replay it to the camera
Place the tablet in front of the webcam and see whether landmarks remain stable.
Change the order
If a fixed sequence still passes, the challenge is too predictable.
Add randomness
Generate commands and a nonce per session instead of using one script for everyone.
Do not call it proof of a person
Landmarks confirm pose, not physical presence. Add screen, texture and depth signals plus an anti-spoof model.
FAQ
Not as a precise physical distance. The depth mode is a visual proxy based on brightness and contrast. Metric depth requires stereo, LiDAR or a dedicated monocular depth model.
Landmarks and some preprocessing can run locally. Production anti-spoof quality depends on the model and testing against replay, screen recapture, masks and synthetic media.
No. It returns face geometry and helps estimate pose. It does not identify a person or prove that a live human is present.
A fixed sequence is easier to replay. Randomized commands make a pre-recorded response harder, but they still need additional anti-spoof signals.
Try the [Camera / Depth Sandbox](/sandbox/camera-depth), with the live demo on top and the pipeline, tutorial and starter code below it.
Documentation
Try the experiment yourself
Open the Camera / Depth Sandbox to switch between the live frame, depth-like map, AI preprocessing and liveness challenge. The demo is designed to make the pipeline visible and easy to extend.
Related Articles
AI Assistant Development Cost in 2026: RAG Chatbots, CRM Integrations, Guardrails, and Support
A practical buyer guide to AI assistant development cost in 2026: prototypes, RAG chatbots, knowledge-base assistants, CRM and website integrations, guardrails, evaluations, monitoring, and support.
AI Can Make More. Not Better: What Game Development Research Actually Says
Generative AI is entering game production, but the evidence is more nuanced than the hype. We examine developer adoption, player reception, quality risks, and a practical production model for using AI without outsourcing taste.
AI for landing page development: where it speeds up launches and where it hurts conversion
A practical research piece on using AI for landing page development: v0, Webflow AI, Builder.io, Framer-like builders, UX generation, copy, SEO, personalization, A/B testing, template risk, accessibility, security and technical debt.
AI SEO / GEO in 2026: Your Next Customers Aren’t Humans — They’re Agents
Search is shifting from clicks to answers. Bots and AI agents crawl, cite, recommend, and increasingly buy. Learn what AI SEO / GEO means, why classic SEO is no longer enough, and how PAS7 Studio helps brands win visibility in the agentic web.
Professional development for your business
We create modern web solutions and bots for businesses. Learn how we can help you achieve your goals.