【一步步开发AI运动APP】五、人体检测能力调用
之前我们为您分享了【一步步开发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()将资源释放掉，以免拖慢应用。
下篇我们将为您介绍运动检测分析调用，敬请期待...
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]