【一步步开发AI运动APP】五、人体检测能力调用

敖可发表于 2025-6-1 19:00:14

之前我们为您分享了【一步步开发AI运动小程序】开发系列博文，通过该系列博文，很多开发者开发出了很多精美的AI健身、线上运动赛事、AI学生体测、美体、康复锻炼等应用场景的AI运动小程序；为了帮助开发者继续深耕AI运动领域市场，今天开始我们将为您分享新系列【一步步开发AI运动APP】的博文，带您开发性能更强、体验更好的AI运动APP。

一、人体检测AI介绍

识别并检测图像中的人体结构，是开展运动分析检测、姿态分析以及姿态交互场景应用前不可或缺的前置步骤。为了满足不同场景和需求，APP版本插件精心提供了多种人体检测模式，包括“高性能”模式以满足快速响应的需求，“高精度”模式以确保检测结果的准确无误，以及“多人检测”模式以应对复杂场景中的多人识别挑战。相较于小程序版本，APP版本插件不仅提供了更为丰富的性能配置参数，让用户能够根据实际需求进行灵活调整，还省去了模型部署的繁琐步骤，实现了更便捷、更高效的集成体验。

二、创建人体检测实例

插件的人体检测能力由APIcreateHumanDetector(options: DetectionOptions): IHumanDetector提供。
import {createHumanDetector} from "@/uni_modules/yz-ai-sport";

function detection(){
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>const detector = createHumanDetector({
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>enabledGPU: true,
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>highPerformance: false,
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>multiple: false,
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>threadNumber: 4,
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>threshold: 0.3
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>});
}三、调用检测识别

创建好人体检测实例后，便可以将从相机抽取的帧图像，传递给实例进行识别了，抽帧见前一章代码，简略代码如下：
function detection(){
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>const detector = createHumanDetector({
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>enabledGPU: true,
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>highPerformance: false,
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>multiple: false,
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>threadNumber: 4,
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>threshold: 0.3
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>});
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>let frame = .... //从相机抽取的帧
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>let humans = detector.estimates(frame);
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>console.log(humans);
}四、骨骼图绘制

若需要将识别到人体骨骼图渲染出来，实现可视效果，可以使用yz-pose-grapher组件绘制，组件调用的原生图形渲染接口，相比小程序具有更高的性能。
<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>五、完整代码

<template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template><template>
<yz-pose-grapher ref="grapher" id="grapher":scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>另外，检测实例使用完毕后，要及时调用destroy()将资源释放掉，以免拖慢应用。
下篇我们将为您介绍运动检测分析调用，敬请期待...

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

篙菠发表于 2025-11-5 10:00:02

这个好，看起来很实用

筒濂发表于 2025-12-7 09:43:18

谢谢楼主提供！

乱蚣发表于 2026-1-14 10:44:30

谢谢分享，试用一下

狞嗅发表于 2026-1-15 23:49:25

前排留名，哈哈哈

姥恫发表于 2026-1-23 12:06:50

感谢发布原创作品，程序园因你更精彩

啪炽发表于 2026-1-27 07:16:05

喜欢鼓捣这些软件，现在用得少，谢谢分享！

辜酗徇 发表于 2026-1-29 09:58:58

很好很强大我过来先占个楼待编辑

辜酗徇 发表于 2026-2-1 05:53:15

懂技术并乐意极积无私分享的人越来越少。珍惜

账暴发表于 2026-2-4 03:36:50

这个好，看起来很实用

矛赓宁 发表于 2026-2-4 23:17:28

收藏一下不知道什么时候能用到

撷监芝 发表于 2026-2-5 11:46:01

感谢分享，下载保存了，貌似很强大

琦谓发表于 2026-2-7 08:52:15

用心讨论，共获提升！

每捎京 发表于 2026-2-7 11:38:05

分享、互助让互联网精神温暖你我

强怀梅 发表于 2026-2-10 02:53:37

懂技术并乐意极积无私分享的人越来越少。珍惜

水苯发表于 2026-2-10 03:23:04

这个有用。

滥眩发表于 2026-2-22 19:14:04

分享、互助让互联网精神温暖你我

森萌黠 发表于 2026-3-3 15:37:52

喜欢鼓捣这些软件，现在用得少，谢谢分享！

指陡发表于 2026-3-9 17:18:54

用心讨论，共获提升！

溶绚发表于 2026-3-11 01:41:48

yyds。多谢分享

页: [1] 2

程序园's Archiver

【一步步开发AI运动APP】五、人体检测能力调用