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

通过 MediaPipe 姿势特征点标记器任务，您可以检测图像中人体的特征点，或 视频。您可以使用此任务来识别身体的关键位置、分析姿势、 以及对动作进行分类。此任务使用机器学习 (ML) 模型， 处理单一图片或视频。该任务会输出图片中的身体姿势特征点 坐标和三维世界坐标。

以下说明介绍了如何使用网页版和 JavaScript 版的姿势特征点标记器 。如需详细了解功能、模型和配置 选项，请参阅概览。

代码示例

姿势特征点的示例代码提供了此定位点的完整实现。 供您参考。此代码可帮助您测试此任务， 开始构建自己的姿势地标器应用。您可以查看、运行 修改姿势特征点示例代码 只需使用网络浏览器即可。

设置

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

JavaScript 软件包

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

<ph type="x-smartling-placeholder">

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

npm install @mediapipe/tasks-vision

如果您想通过内容分发网络 (CDN) 导入任务代码 服务，请将以下代码添加到 <head>标记之间：

<!-- You can replace JSDeliver with another CDN if you prefer -->
<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 poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

配置选项

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

选项名称 说明 值范围 默认值
runningMode 设置任务的运行模式。有两个 模式：

IMAGE：单图输入的模式。

视频：已解码的帧的模式。 视频或对输入数据（例如来自摄像头的直播数据）进行直播。		 {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)。

  • z：地标深度，臀部中点的深度作为 来源。值越小，地标就越靠近镜头。通过 z 的量级使用的比例与 x 大致相同。

  • visibility：地标在图片中可见的可能性。

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

  • x、y 和 z：真实的三维坐标（以米为单位）， 作为原点。

  • visibility：地标在图片中可见的可能性。

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

可选的分割掩码表示每个像素 。下图是 任务输出：

姿势特征点的示例代码演示了如何显示 结果，请参阅 代码示例