Як зробити browser camera depth і liveness check: камера, Canvas та Face Landmarker
Практичний гайд зі створення browser-based camera sandbox: live-відео, псевдоглибина, preprocessing для AI, Face Landmarker та перевірка поворотів голови.
Browser camera sandbox будується як послідовність capture → pixels → landmarks → decision. getUserMedia дає відеопотік, Canvas дозволяє читати й перетворювати пікселі, а Face Landmarker знаходить ключові точки обличчя та допомагає оцінити поворот голови. Для справжнього anti-spoof потрібна додаткова модель liveness, бо landmarks самі по собі не доводять, що перед камерою фізична людина.
Від live-камери до зрозумілого сигналу
Замість приховувати inference за кнопкою ми зробили маленьку лабораторію: кожен шар видно, його можна перемкнути, а логіку — повторити.
Чотири шари, які легко пояснити
Такий поділ корисний і для демо, і для production-прототипу.
Отримати відео
Запитуємо getUserMedia з video: true, показуємо permission state і зупиняємо всі tracks під час cleanup.
Намалювати кадр
Через drawImage переносимо поточний frame у Canvas. Після цього можна читати ImageData, рахувати luma, contrast, edges і будувати власні візуалізації.
Знайти структуру
Face Landmarker повертає landmarks обличчя. Положення носа відносно очей дає просту оцінку yaw, а зміна вертикальної пози — сигнал для pitch.
Перевірити challenge
Для кожної команди задаємо умову, коротке утримання пози і переходимо далі лише після підтвердження. У фіналі показуємо результат, а не просто зелений badge.
Мінімальний capture loop на JavaScript
Перший крок — отримати permission і під’єднати MediaStream до video element. Важливо запускати камеру тільки після дії користувача, обробляти відмову і зупиняти tracks, коли сторінка більше не використовує камеру.
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "user" },
audio: false,
});
video.srcObject = stream;
await video.play();
return () => {
stream.getTracks().forEach((track) => track.stop());
};У нашій демці наступним кроком є requestAnimationFrame. Він малює video у canvas, після чого той самий кадр можна показати в різних режимах без додаткового network request.
Як із RGB-кадру зробити depth-like карту
Звичайна вебкамера не має LiDAR, але навіть простий pixel analysis добре пояснює, що бачить модель.
const luma = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
const edge = Math.abs(luma - rightLuma) + Math.abs(luma - downLuma);
const signal = clamp((luma * 0.72 + edge * 4.4) * sensitivity, 0, 1);Luma
Зводимо RGB до perceived brightness: R × 0.299 + G × 0.587 + B × 0.114. Це дає стабільніший grayscale сигнал.
Local contrast
Порівнюємо піксель із сусідом справа та знизу. Великі перепади стають edge signal і підсвічують межі об’єктів.
Visualization
Перетворюємо intensity у палітру. Вона допомагає оком побачити структуру, але не створює справжню геометричну глибину.
Як перевірити ліво, право та вгору
Для gesture challenge не потрібно одразу будувати складну систему ідентифікації. Достатньо знайти обличчя, вибрати стабільні landmarks і порівнювати їхні координати. У нашому прототипі nose tip порівнюється із серединою між очима, нормалізовано на відстань між очима. Це зменшує залежність від того, наскільки близько людина сидить до камери.
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;Для руху вгору абсолютний поріг часто дає false positive: нейтральне обличчя вже має певну вертикальну геометрію. Тому краще зберегти baseline на початку кроку і перевіряти delta. Саме це виправило проблему, коли остання команда одразу скіпалась.
const baselinePitch = baseline.pitch;
const pitchDelta = currentPitch - baselinePitch;
const isUp = pitchDelta < -0.08;Що означає результат і чого він не означає
Це важлива межа між хорошим навчальним прототипом і security product.
Що ми реально бачимо
Face Landmarker може сказати, що в кадрі є обличчя, де приблизно розташовані його landmarks і чи відповідає поза очікуваному напрямку.
Що ще не доведено
Landmarks не доводять, що це фізична людина. Відео на планшеті, replay або deepfake можуть містити такі самі рухи й потенційно пройти простий challenge.
Що додати в production
Randomized challenges, blink/eye closure, texture and screen reflection signals, temporal consistency, depth/stereo cues і спеціальну anti-spoof модель.
Де такий camera liveness flow справді корисний
Це не тільки про логін. Перевірка команд і присутності камери може бути окремим UX- та risk-сигналом.
Онбординг і KYC
Перевірити позу перед selfie/document capture. Це допоміжний UX-шар, а не заміна regulated identity verification.
Remote proctoring
Попросити випадкову позу та перевірити, що сесія не стала статичним відеозаписом.
Sensitive actions
Додати короткий challenge перед зміною recovery-даних або іншою дією з підвищеним ризиком.
Computer vision research
Порівняти RGB, edge map, псевдоглибину та landmarks на одному кадрі без чорної скриньки.
Як чесно перевірити відео з планшета
Цей тест показує межу між gesture detection і справжнім anti-spoofing.
Запишіть чесну сесію
Зніміть себе на іншому пристрої, виконуючи команди по черзі.
Відтворіть запис перед камерою
Поставте планшет перед webcam і подивіться, чи landmarks залишаються стабільними.
Змініть порядок
Якщо фіксована послідовність проходить після replay, challenge занадто передбачуваний.
Додайте випадковість
Генеруйте команди й nonce на сесію, а не використовуйте один сценарій для всіх.
Не називайте це доказом людини
Landmarks підтверджують позу, але не фізичність людини. Для цього потрібні screen/texture/depth сигнали та anti-spoof модель.
Часті запитання
Ні, не як точну фізичну відстань. У цій демці depth mode — візуальний proxy на основі яскравості та контрасту. Для metric depth потрібні stereo camera, LiDAR або спеціальна monocular depth model.
Так, landmarks та частину preprocessing можна запускати локально. Але якість anti-spoof залежить від моделі, даних і тестування проти replay, screen recapture, масок та deepfake-сценаріїв.
Face Landmarker повертає геометричні точки обличчя та допомагає читати позу. Він не підтверджує особу, не порівнює людину з документом і сам по собі не доводить, що перед камерою жива людина.
Фіксована послідовність легше відтворюється заздалегідь записаним відео. Randomized challenge підвищує складність replay-атаки, але все одно має доповнюватися anti-spoof сигналами.
У нашому [Camera / Depth Sandbox](/sandbox/camera-depth): зверху live demo, нижче pipeline, tutorial і starter code з кнопкою копіювання.
Документація та додаткове читання
Спробуйте експеримент самі
У Camera / Depth Sandbox можна увімкнути камеру, перемикати режими, побачити preprocessing, а потім запустити liveness challenge з поворотами голови. Відео та аналіз працюють локально у браузері; модель Face Landmarker завантажується для inference, але ми не зберігаємо кадри.
Пов'язані статті
Скільки коштує розробка AI асистента у 2026: RAG чатбот, база знань, CRM, Telegram та підтримка
Практичний гід для бізнесу: від чого залежить ціна розробки AI асистента у 2026 році, що входить у RAG чатбот, інтеграції з CRM, Telegram, guardrails, оцінювання, моніторинг і супровід.
AI може зробити більше. Не краще: що насправді кажуть дослідження про розробку ігор
Generative AI входить у production ігор, але докази складніші за хайп. Розбираємо adoption, ставлення гравців, ризики якості та практичний workflow.
AI для розробки лендінгів: де він реально прискорює запуск, а де псує конверсію
Дослідження про використання AI у розробці лендінгів: v0, Webflow AI, Builder.io, Framer-подібні AI builders, генерація UX, copy, SEO, персоналізація, A/B тести, ризики шаблонності, безпеки, доступності та технічного боргу.
AI SEO / GEO у 2026: ваші наступні клієнти — не люди, а агенти
Пошук зміщується від кліків до відповідей. Боти та AI-агенти сканують, цитують, рекомендують і дедалі частіше купують. Дізнайтесь, що таке AI SEO / GEO, чому класичного SEO вже недостатньо, і як PAS7 Studio допомагає брендам перемагати у «агентному» вебі.
Професійна розробка для вашого бізнесу
Створюємо сучасні веб-рішення та боти для бізнесу. Дізнайтеся, як ми можемо допомогти вам досягти цілей.