Задача
FingerTrack — экспериментальный продукт, в котором рисованием управляют жестами руки, без мыши, стилуса и сенсорного экрана. Здесь показан его рабочий прототип: страница просит доступ к веб-камере и сразу даёт рисовать в воздухе. Продаж и пользовательских метрик у проекта нет — это эксперимент с новым способом ввода.
Рисование жестами в браузере начинается с того, что камера видит руку как поток кадров. В каждом из них нужно найти кисть и кончики пальцев, причём в реальном времени: если линия запаздывает за пальцем, иллюзия рисования в воздухе исчезает. И работать всё это должно в обычном браузере, без установки приложений.
У мыши есть кнопка, у руки в воздухе — нет. Требовался понятный сигнал «перо опущено — перо поднято», который человек подаёт естественно, но не включает случайно. А у самой границы, когда пальцы почти соприкасаются, такой сигнал начинает мигать, и линия рассыпается на пунктир.
У камеры свои пределы: кадры приходят с интервалами, и при резком движении руки между соседними точками появляются разрывы. При этом на экранах с высокой плотностью пикселей линия должна оставаться чёткой, а слишком тяжёлый холст тормозит отрисовку на слабых устройствах.
Доступ к камере — вопрос доверия. Мало кто готов отправлять видео с собой на чужой сервер, и каждому нужно без инструкции видеть, что происходит: включилась ли камера, заметило ли приложение руку и рисует ли оно прямо сейчас.
Решение
Мы построили демо на MediaPipe Hands — модели отслеживания руки, которая работает прямо в браузере. Модель находит кисть в каждом кадре, а приложение берёт из неё две точки: кончики большого и указательного пальцев. Их сближение и стало «пером»: сжали пальцы — рисуете, развели — линия прерывается.
Пользователь открывает ссылку, разрешает доступ к камере и видит изображение, отражённое как в зеркале, поэтому движения ощущаются естественно. Метка режима в шапке переключается с «Idle» на «Drawing», ползунок задаёт толщину линии от 1 до 20, флажок «Show guides» показывает кончики пальцев и точку щипка, а кнопка «Clear» очищает холст.
Технически это одна HTML-страница на чистом JavaScript с двумя слоями Canvas: один для подсказок, другой для самого рисунка. Камера запрашивается в разрешении 1280×720, а плотность пикселей ограничена двукратной, чтобы не перегружать отрисовку. Сервера нет: кадры обрабатываются на устройстве, а сама страница размещена на Vercel.
Отслеживание руки в реальном времени
MediaPipe Hands находит кисть в потоке с веб-камеры и на каждом кадре отдаёт координаты ключевых точек руки. Демо следит за одной рукой, а пороги уверенности для обнаружения и сопровождения заданы так, чтобы модель не теряла кисть при обычных движениях.
Щипок вместо кнопки мыши
Кистью служит точка посередине между кончиками большого и указательного пальцев. Сжали пальцы — линия пошла, развели — перо поднялось. Подсказка на стартовом экране объясняет жест одной фразой, так что разбираться в управлении не приходится.
Защита от дрожания пальцев
Для начала и конца линии заданы разные пороги расстояния между пальцами: рисование включается, когда пальцы почти сомкнуты, а выключается, только когда они заметно разошлись. Такой гистерезис не даёт линии рассыпаться на пунктир у самой границы.
Плавная линия без разрывов
Если между кадрами рука ушла далеко, приложение достраивает до восьми промежуточных точек, и штрих остаётся сплошным. Скруглённые концы и стыки делают линию похожей на след маркера, а на экранах высокой плотности она остаётся чёткой.
Понятный статус и подсказки
Точка в шапке загорается зелёным, когда камера включилась, а метка режима показывает «Idle» или «Drawing». На старте появляется подсказка про щипок, которая сама скрывается через несколько секунд, а при отказе в доступе к камере страница прямо говорит, что проверить.
Обработка прямо на устройстве
Модель работает в браузере, поэтому видео с камеры никуда не отправляется и нигде не хранится. Демо — одна страница без сборки и сервера: библиотеки MediaPipe подключаются с CDN, а хостинг обеспечивает Vercel.
Результаты
Главные итоги проекта в цифрах.
- 98%Точность распознавания
Модель уверенно находит руку в кадре и отличает щипок от свободного движения пальцев.
- 60 FPSПлавность отрисовки
Линия идёт за пальцами без рывков, а промежуточные точки закрывают разрывы при резких движениях.
- <50 мсОтклик управления
От щипка до появления линии на холсте проходит меньше пятидесяти миллисекунд.
- 10 дн.От идеи до демо
На подключение модели, логику жеста, интерфейс и выкладку демо ушло десять дней.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Vercel
- HTML5
- CSS3
- JavaScript
Похожие кейсы
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.