Web 版手部特征检测指南

通过 MediaPipe 手部地标器任务，您可以检测图片中手部的特征点。以下说明介绍了如何使用手部特征点。

如需详细了解功能、模型和配置选项部分，请参阅概览。

代码示例

手部特征器的示例代码提供了此特征供您参考。此代码可帮助您测试此任务，开始打造自己的手部特征点检测应用。您可以查看、运行修改手部特征点示例代码只需使用网络浏览器即可。

设置

本部分介绍设置开发环境的关键步骤。有关设置 Web 和 JavaScript 开发环境平台版本要求，请参阅网页版设置指南。

JavaScript 软件包

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

您可以通过 NPM 安装所需的软件包创建 Deployment

npm install @mediapipe/tasks-vision

如果您想通过内容分发网络 (CDN) 导入任务代码服务，请将以下代码添加到 <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.js"
    crossorigin="anonymous"></script>
</head>

型号

MediaPipe 手部地标器任务需要一个与此训练兼容的模型，任务。如需详细了解适用于手部特征器的训练后模型，请参阅任务概览的“模型”部分。

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

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

创建任务

使用其中一个手部特征点 createFrom...() 函数为运行推理准备任务。使用 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
    });

配置选项

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

选项名称	说明	值范围	默认值
`runningMode`	设置任务的运行模式。有两个模式： IMAGE：单图输入的模式。视频：已解码的帧的模式。视频或对输入数据（例如来自摄像头的直播数据）进行直播。	{`IMAGE, VIDEO`}	`IMAGE`
`numHands`	手部地标检测器检测到的手的数量上限。	`Any integer > 0`	`1`
`minHandDetectionConfidence`	手部检测要计算的最低置信度分数在手掌检测模型中被认为是成功的。	`0.0 - 1.0`	`0.5`
`minHandPresenceConfidence`	手持的手存在分数的最低置信度分数特征点检测模型。在“视频”模式和“直播”模式下如果来自手部特征码模型的手部状态置信度分数低于达到此阈值后，手部地标器就会触发手掌检测模型。否则，轻量级的手部跟踪算法可以确定进行后续地标检测。	`0.0 - 1.0`	`0.5`
`minTrackingConfidence`	要考虑的手部跟踪的最低置信度分数成功。这是两只手之间的边界框 IoU 阈值，分别表示当前帧和最后一帧。处于视频模式和直播模式手部地标工具，如果追踪失败，手部地标工具会触发手部检测。否则，它会跳过手部检测。	`0.0 - 1.0`	`0.5`

准备数据

手部地标器可以检测图片中采用托管浏览器该任务还会处理数据输入预处理，包括调整大小、旋转和值归一化。如需检测视频中的手部特征点，您可以利用该 API 根据时间戳和时间戳，一次快速处理一帧。以确定视频中出现的手部特征点。

运行任务

手部特征点使用 detect()（跑步模式 image）和要触发的 detectForVideo()（采用运行模式 video）方法推理。任务处理数据，尝试检测手部特征点，然后报告结果

对手部特征器 detect() 和 detectForVideo() 方法的调用会运行同时阻塞界面线程。如果您检测到手部特征点设备摄像头的视频帧中，每次检测都会屏蔽主要线程。您可以通过实现 Web Worker 来运行 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();
  });
}

有关运行手部特征点任务的完整实现，请参阅代码示例。

处理和显示结果

手部地标器会为每次检测生成手部地标器结果对象运行。结果对象包含以图片坐标表示的手部地标世界坐标上的地标和所检测到的惯用手（左/右手）的双手。

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

HandLandmarkerResult 输出包含三个组成部分。每个组成部分都是一个数组，其中每个元素都包含所检测到的单个手的以下结果：

惯用手

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

图中有 21 个手形标志，每个标志由 x、y 和 z 坐标组成。通过 x 和 y 坐标按图片宽度和高度。z 坐标表示地标深度，手腕的深度就是起点。值越小，与镜头相接。z的震级使用的刻度与 x。
世界地标

21 个手形地标也以世界坐标表示。每个地标由 x、y 和 z 组成，表示现实世界中的 3D 坐标以指针的几何中心为起点

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)

下图直观显示了任务输出：

手部特征器示例代码演示了如何显示结果，请参阅代码示例