Задача «Распознаватель жестов 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"] |
|
|
custom_gestures_classifier_options | Параметры настройки поведения классификатора пользовательских жестов. |
|
|
Подготовьте данные
Распознаватель жестов может распознавать жесты на изображениях в любом формате, поддерживаемом хост-браузером. Задача также выполняет предварительную обработку входных данных, включая изменение размера, поворот и нормализацию значений. Чтобы распознавать жесты в видео, вы можете использовать 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)
На следующих изображениях показана визуализация результатов задачи:
Более полную реализацию создания задачи Распознавателя жестов смотрите в примере кода .