Привет, друзья!

Еще недавно управление содержимым веб-страницы с помощью жестов можно было наблюдать разве что в фантастических фильмах. Сегодня все, что для этого требуется — видеокамера и браузер (и библиотека от Google).

В данном туториале мы рассмотрим 5 примеров:

• получение данных с видеокамеры и их отрисовка на холсте (canvas);
• обнаружение и отслеживание кисти руки;
• управление "курсором" с помощью указательного пальца;
• определение жеста "щипок" (pinch);
• нажатие кнопки с помощью щипка.

Все примеры будут реализованы на чистом JavaScript.

Источником вдохновения для меня послужила эта замечательная статья.

Для обнаружения и отслеживания руки и жестов будет использоваться MediaPipe. Для работы с зависимостями — Yarn.

Код примеров можно найти в этом репозитории.