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

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

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

Пример кода

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

Настраивать

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

пакеты JavaScript

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

Необходимые пакеты можно установить через 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.mjs"
    crossorigin="anonymous"></script>
</head>

Модель

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

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

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

Создайте задачу

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

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

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

Параметры конфигурации

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

Название варианта	Описание	Диапазон значений	Значение по умолчанию
`runningMode`	Задает режим выполнения задачи. Доступны два режима: ИЗОБРАЖЕНИЕ: Режим для ввода одного изображения. ВИДЕО: Режим декодирования кадров видео или потока входных данных в реальном времени, например, с камеры.	{ `IMAGE, VIDEO` }	`IMAGE`
`numHands`	Максимальное количество рук, обнаруженных детектором ориентиров рук.	`Any integer > 0`	`1`
`minHandDetectionConfidence`	Минимальный показатель достоверности, необходимый для успешного обнаружения руки в модели распознавания ладони.	`0.0 - 1.0`	`0.5`
`minHandPresenceConfidence`	Минимальный показатель достоверности обнаружения руки в модели определения ориентиров руки. В режиме видео и режиме прямой трансляции, если показатель достоверности обнаружения руки в модели определения ориентиров руки ниже этого порога, Hand Landmarker запускает модель обнаружения ладони. В противном случае, облегченный алгоритм отслеживания руки определяет местоположение руки (рук) для последующего обнаружения ориентиров.	`0.0 - 1.0`	`0.5`
`minTrackingConfidence`	Минимальный показатель достоверности, при котором отслеживание рук считается успешным. Это пороговое значение IoU ограничивающей рамки между руками в текущем кадре и в предыдущем кадре. В видеорежиме и потоковом режиме Hand Landmarker, если отслеживание не удается, Hand Landmarker запускает обнаружение рук. В противном случае, обнаружение рук пропускается.	`0.0 - 1.0`	`0.5`

Подготовка данных

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

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

Функция Hand Landmarker использует методы detect() (с image в режиме бега) и detectForVideo() (с video в режиме бега) для запуска вывода результатов. Задача обрабатывает данные, пытается обнаружить ориентиры рук, а затем сообщает о результатах.

Вызовы методов detect() и detectForVideo() объекта Hand Landmarker выполняются синхронно и блокируют поток пользовательского интерфейса. Если вы обнаруживаете ориентиры рук в видеокадрах с камеры устройства, каждое обнаружение блокирует основной поток. Этого можно избежать, реализовав веб-воркеры, которые будут запускать методы detect() и detectForVideo() в другом потоке.

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

Изображение

const image = document.getElementById("image") as HTMLImageElement;
const handLandmarkerResult = handLandmarker.detect(image);

Видео

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

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

  if (video.currentTime !== lastVideoTime) {
    const detections = handLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

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

Более подробную информацию о реализации задачи Hand Landmarker см. в примере .

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

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

Ниже приведён пример выходных данных, полученных в результате выполнения этой задачи:

Выходные данные HandLandmarkerResult содержат три компонента. Каждый компонент представляет собой массив, где каждый элемент содержит следующие результаты для одной обнаруженной руки:

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

HandLandmarkerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  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)

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

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

Пример кода Hand Landmarker демонстрирует, как отобразить результаты, возвращаемые задачей; см. пример.