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

通过 MediaPipe Pose Markerer 任务,您可以检测图片或视频中人体的特征点。您可以使用此任务识别关键的身体位置,分析姿势并对动作进行分类。此任务使用适用于单个图片或视频的机器学习 (ML) 模型。该任务会在图片坐标和三维世界坐标中输出身体姿势地标。

以下说明介绍了如何在 Web 应用和 JavaScript 应用中使用姿势特征点。如需详细了解此任务的功能、模型和配置选项,请参阅概览

代码示例

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

初始设置

本部分介绍了专门为使用姿势地标而设置开发环境的关键步骤。如需了解有关设置 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.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:单张图片输入的模式。

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 工作器以在另一个线程上运行 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):

  • xy:地标坐标,在 0.0 到 1.0 之间按图片宽度 (x) 和高度 (y) 进行标准化。

  • z:地标深度,以臀部中点的深度为起点。值越小,特征点越靠近镜头。z 量级使用的尺度与 x 大致相同。

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

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

  • xyz:真实的三维坐标(以米为单位),臀部中点为原点。

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

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

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

姿势特征点示例代码演示了如何显示任务返回的结果,请参阅代码示例