隆重推出 Google AI Edge Portal：大规模对边缘 AI 进行基准测试。注册以在非公开预览期间申请访问权限。

网页版手势识别指南

借助 MediaPipe 手势识别器任务，您可以实时识别手势，并提供识别出的手势结果和检测到的手部特征点。这些说明介绍了如何将手势识别器用于 Web 应用和 JavaScript 应用。

您可以观看演示，了解此任务的实际效果。如需详细了解此任务的功能、模型和配置选项，请参阅概览。

代码示例

手势识别器示例代码提供了此任务的完整 JavaScript 实现，供您参考。此代码可帮助您测试此任务，并开始构建自己的手势识别应用。您只需使用 Web 浏览器即可查看、运行和修改手势识别器示例。

设置

本部分介绍了设置开发环境以专门使用手势识别器的关键步骤。如需了解有关设置 Web 和 JavaScript 开发环境的一般信息（包括平台版本要求），请参阅 Web 设置指南。

JavaScript 软件包

手势识别器代码可通过 MediaPipe @mediapipe/tasks-vision NPM 软件包获取。您可以按照平台设置指南中的说明查找并下载这些库。

您可以使用以下命令通过 NPM 安装所需的软件包：

npm install @mediapipe/tasks-vision

如果您想通过内容分发网络 (CDN) 服务导入任务代码，请在 HTML 文件中的 <head> 标记中添加以下代码：

<!-- 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 手势识别器任务需要与该任务兼容的已训练模型。如需详细了解手势识别器可用的已训练模型，请参阅任务概览的“模型”部分。

选择并下载模型，然后将其存储在项目目录中：

<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
});

配置选项

此任务针对 Web 应用具有以下配置选项：

选项名称	说明	值范围	默认值
`runningMode`	设置任务的运行模式。有两种模式： IMAGE：用于单张图片输入的模式。 VIDEO：视频或输入数据（例如来自摄像头的数据）直播的解码帧模式。	{`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，将返回所有可用的结果。类别许可名单：类别名称的许可名单。如果非空，则会过滤掉类别不在该集合中的分类结果。与 denylist 互斥。类别拒绝名单：类别名称的拒绝名单。如果非空，则会过滤掉类别在此集中的分类结果。与许可名单互斥。	显示名称的语言区域：`any string` 结果数量上限：`any integer` 得分阈值：`0.0-1.0` 类别许可名单：`vector of strings` 类别拒绝名单：`vector of strings`	显示名称的语言区域：`"en"` 结果数量上限：`-1` 得分阈值：`0` 类别许可名单：空类别拒绝名单：空
`custom_gestures_classifier_options`	用于配置自定义手势分类器行为的选项。显示名称语言区域：用于通过 TFLite 模型元数据指定的显示名称的语言区域（如果有）。结果数上限：要返回的得分最高的分类结果的数量上限。如果小于 0，则返回所有可用的结果。得分阈值：低于此得分的结果会被拒绝。如果设置为 0，将返回所有可用的结果。类别许可名单：类别名称的许可名单。如果非空，则会过滤掉类别不在该集合中的分类结果。与 denylist 互斥。类别拒绝名单：类别名称的拒绝名单。如果非空，则会过滤掉类别在此集中的分类结果。与许可名单互斥。	显示名称的语言区域：`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();
  });
}

对 Gesture Recognizer recognize() 和 recognizeForVideo() 方法的调用会同步运行，并阻塞界面线程。如果您在设备摄像头的视频帧中识别手势，每次识别都会阻塞主线程。您可以通过实现 Web Worker 在另一个线程上运行 recognize() 和 recognizeForVideo() 方法来防止这种情况。

如需查看运行手势识别器任务的更完整实现，请参阅示例。

处理和显示结果

手势识别器会在每次识别运行时生成一个手势检测结果对象。结果对象包含图像坐标中的手部特征点、世界坐标中的手部特征点、手性（左手/右手）以及检测到的手的手势类别。

以下显示了此任务的输出数据示例：

生成的 GestureRecognizerResult 包含四个组件，每个组件都是一个数组，其中每个元素都包含单个检测到的手的检测结果。

惯用手

惯用手表示检测到的手是左手还是右手。
手势

检测到的手势的识别类别。
地标

有 21 个手部地标，每个地标都由 x、y 和 z 坐标组成。x 和 y 坐标分别通过图片宽度和高度归一化到 [0.0, 1.0]。z 坐标表示地标深度，以手腕处的深度为原点。值越小，地标离相机越近。z 的大小与 x 的大致相同。
世界地标

21 个手部特征点也以世界坐标表示。每个地标都由 x、y 和 z 组成，表示以手部几何中心为原点的真实世界 3D 坐标（以米为单位）。

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)

下图显示了任务输出的可视化效果：

一只手做出竖起大拇指的动作，并显示了手部的骨骼结构

如需查看创建手势识别器任务的更完整实现，请参阅示例。