之前我们为您分享了【一步步开发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(){
const detector = createHumanDetector({
enabledGPU: true,
highPerformance: false,
multiple: false,
threadNumber: 4,
threshold: 0.3
});
}
三、调用检测识别
创建好人体检测实例后，便可以将从相机抽取的帧图像，传递给实例进行识别了，抽帧见前一章代码，简略代码如下：
function detection(){
const detector = createHumanDetector({
enabledGPU: true,
highPerformance: false,
multiple: false,
threadNumber: 4,
threshold: 0.3
});
let frame = .... //从相机抽取的帧
let humans = detector.estimates(frame);
console.log(humans);
}
四、骨骼图绘制
若需要将识别到人体骨骼图渲染出来，实现可视效果，可以使用yz-pose-grapher组件绘制，组件调用的原生图形渲染接口，相比小程序具有更高的性能。
<template>
<yz-pose-grapher ref="grapher" id="grapher" class="grapher" :scale-rate="previewRate" :offset-x="previewOffsetX"
:offset-y="previewOffsetY" point-color="#0091ff" left-color="#009d00" line-color="#FFFFFF" />
</template>
<script>
export default {
...
methods:{
drawing(){
let humans = ...//识别到人体结果
this.$refs.grapher.drawing(humans); //绘制
}
}
}
</script>
五、完整代码
<template>
<yz-ai-camera class="camera" :style="{
width:previewWidth,height:previewHeight}" :device="cameraDevice"
resolution="medium" @on-camera-ready="onCameraReady" />
<yz-pose-grapher ref="grapher" class="grapher" :style="{
width:previewWidth,height:previewHeight}"
:scaleRate="previewRate" :offsetX="previewOffsetX" :offsetY="previewOffsetY" lineColor="#FFFFFF"
pointColor="#0091ff" leftColor="#009d00" />
</template>
<script>
import {
createHumanDetector} from "@/uni_modules/yz-ai-sport";
export default {
data(){
return {
};
}
methods:{
onDetecting(){
let options = {
multiple: false,
enabledGPU: true,
highPerformance: false
};
humanDetector = createHumanDetector(options);
humanDetector.startExtractAndDetect({
onDetected(result){
let humans = result.humans;
this.$refs.grapher.drawing(humans);
}
});
}
}
}
</script>
另外，检测实例使用完毕后，要及时调用destroy()将资源释放掉，以免拖慢应用。
下篇我们将为您介绍运动检测分析调用，敬请期待...
