登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›【一步步开发AI运动APP】五、人体检测能力调用 ...

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

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

一、人体检测AI介绍

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

二、创建人体检测实例

插件的人体检测能力由APIcreateHumanDetector(options: DetectionOptions): IHumanDetector提供。
  1. import {createHumanDetector} from "@/uni_modules/yz-ai-sport";
  3. function detection(){
  4. <template>
  5.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  6.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  7. </template>const detector = createHumanDetector({
  8. <template>
  9.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  10.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  11. </template><template>
  12.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  13.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  14. </template>enabledGPU: true,
  15. <template>
  16.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  17.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  18. </template><template>
  19.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  20.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  21. </template>highPerformance: false,
  22. <template>
  23.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  24.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  25. </template><template>
  26.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  27.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  28. </template>multiple: false,
  29. <template>
  30.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  31.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  32. </template><template>
  33.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  34.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  35. </template>threadNumber: 4,
  36. <template>
  37.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  38.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  39. </template><template>
  40.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  41.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  42. </template>threshold: 0.3
  43. <template>
  44.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  45.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  46. </template>});
  47. }
复制代码
三、调用检测识别

创建好人体检测实例后，便可以将从相机抽取的帧图像，传递给实例进行识别了，抽帧见前一章代码，简略代码如下：
  1. function detection(){
  2. <template>
  3.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  4.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  5. </template>const detector = createHumanDetector({
  6. <template>
  7.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  8.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  9. </template><template>
  10.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  11.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  12. </template>enabledGPU: true,
  13. <template>
  14.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  15.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  16. </template><template>
  17.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  18.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  19. </template>highPerformance: false,
  20. <template>
  21.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  22.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  23. </template><template>
  24.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  25.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  26. </template>multiple: false,
  27. <template>
  28.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  29.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  30. </template><template>
  31.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  32.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  33. </template>threadNumber: 4,
  34. <template>
  35.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  36.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  37. </template><template>
  38.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  39.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  40. </template>threshold: 0.3
  41. <template>
  42.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  43.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  44. </template>});
  45. <template>
  46.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  47.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  48. </template>
  49. <template>
  50.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  51.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  52. </template>let frame = .... //从相机抽取的帧
  53. <template>
  54.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  55.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  56. </template>let humans = detector.estimates(frame);
  57. <template>
  58.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  59.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  60. </template>console.log(humans);
  61. }
复制代码
四、骨骼图绘制

若需要将识别到人体骨骼图渲染出来，实现可视效果，可以使用yz-pose-grapher组件绘制，组件调用的原生图形渲染接口，相比小程序具有更高的性能。
  1. <template>
  2.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  3.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  4. </template>
复制代码
五、完整代码
  1. <template>
  2.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  3.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  4. </template><template>
  5.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  6.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  7. </template><template>
  8.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  9.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  10. </template><template>
  11.         <yz-pose-grapher ref="grapher" id="grapher"  :scale-rate="previewRate" :offset-x="previewOffsetX"
  12.                         :offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
  13. </template>
复制代码
另外，检测实例使用完毕后，要及时调用destroy()将资源释放掉，以免拖慢应用。
下篇我们将为您介绍运动检测分析调用，敬请期待...
3.png


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

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
敖可
2025-6-1 19:00:14

0

粉丝关注

14

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫