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

适用于 Web 的姿势特征点检测指南

借助 MediaPipe 姿势地标检测器任务，您可以在图片或视频中检测人体地标。您可以使用此任务来识别关键身体位置、分析姿势和对动作进行分类。此任务使用机器学习 (ML) 模型，这些模型可处理单张图片或视频。该任务会以图片坐标和三维世界坐标输出身体姿势地标。

以下说明介绍了如何将姿势地标检测器用于 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 -->
<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() 函数，您可以使用配置选项自定义姿势地标检测器。如需详细了解配置选项，请参阅配置选项。

以下代码演示了如何使用自定义选项构建和配置任务：

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

配置选项

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

选项名称	说明	值范围	默认值
`runningMode`	设置任务的运行模式。有两种模式： IMAGE：适用于单张图片输入的模式。 VIDEO：适用于视频的解码帧或输入数据（例如来自摄像头）的直播的模式。	{`IMAGE, VIDEO`}	`IMAGE`
`numPoses`	姿势地标检测器可以检测到的姿势数量上限。	`Integer > 0`	`1`
`minPoseDetectionConfidence`	姿势检测被视为成功的最低置信度分数。	`Float [0.0,1.0]`	`0.5`
`minPosePresenceConfidence`	姿势地标检测中姿势存在性分数的最低置信度分数。	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	姿势跟踪被视为成功的最低置信度分数。	`Float [0.0,1.0]`	`0.5`
`outputSegmentationMasks`	姿势地标检测器是否为检测到的姿势输出分割掩码。	`Boolean`	`False`

准备数据

姿势地标检测器可以检测主机浏览器支持的任何格式的图片中的姿势。该任务还会处理数据输入预处理，包括调整大小、旋转和值归一化。如需在地标视频中添加姿势，您可以使用 API 快速处理每个帧，并使用帧的时间戳来确定姿势在视频中出现的时间。

运行任务

姿势地标检测器使用 detect()（运行模式为 IMAGE）和 detectForVideo()（运行模式为 VIDEO）方法来触发推断。该任务会处理数据，尝试在地标中添加姿势，然后报告结果。

对姿势地标检测器 detect() 和 detectForVideo() 方法的调用会同步运行，并阻止用户插入线程。如果您从设备的摄像头检测视频帧中的姿势，则每次检测都会阻止主线程。您可以通过实现 Web Worker 在另一个线程上运行 detect() 和 detectForVideo() 方法来避免这种情况。

以下代码演示了如何使用任务模型执行处理：

图片

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

视频

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

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

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

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

如需更完整地了解如何运行姿势地标检测器任务，请参阅示例。

处理和显示结果

姿势地标检测器会为每次检测运行返回一个 poseLandmarkerResult 对象。结果对象包含每个姿势地标的坐标。

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

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

输出包含每个地标的归一化坐标 (Landmarks) 和世界坐标 (WorldLandmarks)。

输出包含以下归一化坐标 (Landmarks)：

x 和 y：地标坐标，由图片宽度 (x) 和高度 (y) 归一化为介于 0.0 和 1.0 之间。
z：地标深度，以臀部中点的深度为原点。值越小，地标离摄像头越近。z 的大小与 x 的比例大致相同。
visibility：地标在图片中可见的可能性。

输出包含以下世界坐标 (WorldLandmarks)：

x、y 和 z：以米为单位的真实世界三维坐标，以臀部中点为原点。
visibility：地标在图片中可见的可能性。

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

一位女士摆出冥想姿势。她的姿势以线框突出显示，线框指示了她的四肢和躯干的位置

可选的分割掩码表示每个像素属于检测到的人的可能性。下图是任务输出的分割掩码：

上一张图片中勾勒出女性轮廓的分割遮罩

姿势地标检测器示例代码演示了如何显示任务返回的结果，请参阅示例