Руководство по распознаванию жестов для Интернета

Задача «Распознаватель жестов MediaPipe» позволяет распознавать жесты рук в реальном времени и предоставляет результаты распознанных жестов рук и ориентиры обнаруженных рук. В этих инструкциях показано, как использовать Распознаватель жестов для веб-приложений и приложений JavaScript.

Увидеть эту задачу в действии можно, просмотрев демо-версию . Дополнительные сведения о возможностях, моделях и параметрах конфигурации этой задачи см. в разделе Обзор .

Пример кода

В примере кода Распознаватель жестов представлена полная реализация этой задачи на JavaScript. Этот код поможет вам протестировать эту задачу и приступить к созданию собственного приложения для распознавания жестов. Вы можете просматривать, запускать и редактировать пример кода Распознаватель жестов, используя только веб-браузер.

Настраивать

В этом разделе описаны ключевые шаги по настройке среды разработки специально для использования Распознаватель жестов. Общие сведения о настройке веб-среды и среды разработки JavaScript, включая требования к версии платформы, см. в руководстве по настройке веб-среды .

JavaScript-пакеты

Код Распознаватель жестов доступен через пакет MediaPipe @mediapipe/tasks-vision NPM . Вы можете найти и загрузить эти библиотеки, следуя инструкциям в руководстве по установке платформы.

Вы можете установить необходимые пакеты через NPM, используя следующую команду:

npm install @mediapipe/tasks-vision

Если вы хотите импортировать код задачи через службу сети доставки контента (CDN), добавьте следующий код в тег <head> вашего HTML-файла:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Модель

Для задачи Распознавателя жестов MediaPipe требуется обученная модель, совместимая с этой задачей. Дополнительную информацию о доступных обученных моделях для Распознаватель жестов см. в разделе «Модели» обзора задач.

Выберите и загрузите модель, а затем сохраните ее в каталоге вашего проекта:

<dev-project-root>/app/shared/models/

Создать задачу

Используйте одну из функций createFrom...() Распознаватель жестов, чтобы подготовить задачу к выполнению выводов. Используйте функцию createFromModelPath() с относительным или абсолютным путем к файлу обученной модели. Если ваша модель уже загружена в память, вы можете использовать метод createFromModelBuffer() .

В приведенном ниже примере кода показано использование функции createFromOptions() для настройки задачи. Функция createFromOptions позволяет настроить Распознаватель жестов с помощью параметров конфигурации. Дополнительные сведения о параметрах конфигурации см. в разделе Параметры конфигурации .

Следующий код демонстрирует, как создать и настроить задачу с настраиваемыми параметрами:

// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
  },
  numHands: 2
});

Варианты конфигурации

Эта задача имеет следующие параметры конфигурации для веб-приложений:

Название опции	Описание	Диапазон значений	Значение по умолчанию
`runningMode`	Устанавливает режим выполнения задачи. Есть два режима: ИЗОБРАЖЕНИЕ: Режим для ввода одного изображения. ВИДЕО: режим для декодированных кадров видео или прямой трансляции входных данных, например с камеры.	{ `IMAGE, VIDEO` }	`IMAGE`
`num_hands`	Максимальное количество рук может быть обнаружено с помощью `GestureRecognizer` .	`Any integer > 0`	`1`
`min_hand_detection_confidence`	Минимальный показатель достоверности, позволяющий считать обнаружение рук успешным в модели обнаружения ладоней.	`0.0 - 1.0`	`0.5`
`min_hand_presence_confidence`	Минимальный показатель достоверности оценки присутствия руки в модели обнаружения ориентиров рук. В режиме видео и режиме прямой трансляции Распознаватель жестов, если показатель достоверности присутствия руки по модели ориентира руки ниже этого порога, активируется модель обнаружения ладони. В противном случае для определения местоположения руки (рук) для последующего обнаружения ориентиров используется упрощенный алгоритм отслеживания рук.	`0.0 - 1.0`	`0.5`
`min_tracking_confidence`	Минимальный показатель достоверности, позволяющий считать отслеживание рук успешным. Это порог IoU ограничивающей рамки между руками в текущем кадре и последнем кадре. В режиме «Видео» и «Потоковый режим» Распознаватель жестов, если отслеживание не удается, Распознаватель жестов запускает обнаружение руки. В противном случае обнаружение руки пропускается.	`0.0 - 1.0`	`0.5`
`canned_gestures_classifier_options`	Параметры настройки поведения классификатора стандартных жестов. Стандартные жесты: `["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]` Язык отображаемых имен: языковой стандарт, используемый для отображаемых имен, указанных в метаданных модели TFLite, если таковые имеются. Максимальное количество результатов: максимальное количество возвращаемых результатов классификации с наибольшим количеством баллов. Если < 0, будут возвращены все доступные результаты. Порог оценки: балл, ниже которого результаты отклоняются. Если установлено значение 0, будут возвращены все доступные результаты. Список разрешенных категорий: список разрешенных названий категорий. Если значение не пусто, результаты классификации, категории которых нет в этом наборе, будут отфильтрованы. Взаимоисключающее со списком запретов. Список запрещенных категорий: список запрещенных имен категорий. Если не пусто, результаты классификации, категория которых находится в этом наборе, будут отфильтрованы. Взаимоисключающее со списком разрешений.	Локаль отображаемых имен: `any string` Максимальное количество результатов: `any integer` Порог оценки: `0.0-1.0` Список разрешенных категорий: `vector of strings` Список запрещенных категорий: `vector of strings`	Язык отображаемых имен: `"en"` Максимальное количество результатов: `-1` Порог оценки: `0` Белый список категорий: пусто Список запрещенных категорий: пустой
`custom_gestures_classifier_options`	Параметры настройки поведения классификатора пользовательских жестов. Язык отображаемых имен: языковой стандарт, используемый для отображаемых имен, указанных в метаданных модели TFLite, если таковые имеются. Максимальное количество результатов: максимальное количество возвращаемых результатов классификации с наибольшим количеством баллов. Если < 0, будут возвращены все доступные результаты. Порог оценки: балл, ниже которого результаты отклоняются. Если установлено значение 0, будут возвращены все доступные результаты. Список разрешенных категорий: список разрешенных названий категорий. Если значение не пусто, результаты классификации, категории которых нет в этом наборе, будут отфильтрованы. Взаимоисключающее со списком запретов. Список запрещенных категорий: список запрещенных имен категорий. Если значение не пусто, результаты классификации, категория которых находится в этом наборе, будут отфильтрованы. Взаимоисключающее со списком разрешений.	Локаль отображаемых имен: `any string` Максимальное количество результатов: `any integer` Порог оценки: `0.0-1.0` Список разрешенных категорий: `vector of strings` Список запрещенных категорий: `vector of strings`	Язык отображения отображаемых имен: `"en"` Максимальное количество результатов: `-1` Порог оценки: `0` Белый список категорий: пусто Список запрещенных категорий: пустой

Подготовьте данные

Распознаватель жестов может распознавать жесты на изображениях в любом формате, поддерживаемом хост-браузером. Задача также выполняет предварительную обработку входных данных, включая изменение размера, поворот и нормализацию значений. Чтобы распознавать жесты в видео, вы можете использовать API для быстрой обработки одного кадра за раз, используя метку времени кадра, чтобы определить, когда жесты происходят в видео.

Запустить задачу

Распознаватель жестов использует методы recognize() (с режимом работы 'image' ) и recognizeForVideo() (с режимом работы 'video' ) для запуска логических выводов. Задача обрабатывает данные, пытается распознать жесты рук, а затем сообщает о результатах.

Следующий код демонстрирует, как выполнить обработку с помощью модели задачи:

Изображение

const image = document.getElementById("image") as HTMLImageElement;
const gestureRecognitionResult = gestureRecognizer.recognize(image);

Видео

await gestureRecognizer.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video);
    processResult(gestureRecognitionResult);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Вызовы методов распознавания жестов recognize() и recognizeForVideo() выполняются синхронно и блокируют поток пользовательского интерфейса. Если вы распознаете жесты в видеокадрах с камеры устройства, каждое распознавание будет блокировать основной поток. Вы можете предотвратить это, реализовав веб-воркеры для запуска методов recognize() и recognizeForVideo() в другом потоке.

Более полную реализацию запуска задачи Распознавателя жестов смотрите в примере кода .

Обработка и отображение результатов

Распознаватель жестов генерирует объект результата обнаружения жестов для каждого запуска распознавания. Объект результата содержит ориентиры рук в координатах изображения, ориентиры рук в мировых координатах, направление руки (левая/правая рука) и категории жестов обнаруженных рук.

Ниже показан пример выходных данных этой задачи:

Полученный результат GestureRecognizerResult содержит четыре компонента, каждый из которых представляет собой массив, где каждый элемент содержит обнаруженный результат одной обнаруженной руки.

Рукава
Handedness показывает, являются ли обнаруженные руки левыми или правыми.
Жесты
Распознанные категории жестов обнаруженных рук.
Достопримечательности
Имеется 21 ручной ориентир, каждый из которых состоит из координат x , y и z . Координаты x и y нормализуются на [0,0, 1,0] по ширине и высоте изображения соответственно. Координата z представляет глубину ориентира, при этом глубина на запястье является началом координат. Чем меньше значение, тем ближе ориентир к камере. Величина z использует примерно тот же масштаб, что и x .
Достопримечательности мира
21 ручной ориентир также представлен в мировых координатах. Каждый ориентир состоит из x , y и z , представляющих реальные трехмерные координаты в метрах с началом координат в геометрическом центре руки.

GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : -3.41E-7
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
    ... (21 landmarks for a hand)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
    ... (21 world landmarks for a hand)

На следующих изображениях показана визуализация результатов задачи:

Рука в движении большим пальцем вверх с нанесенной на карту скелетной структурой руки

Более полную реализацию создания задачи Распознавателя жестов смотрите в примере кода .