【一步步开发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(){
   
    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()将资源释放掉，以免拖慢应用。

下篇我们将为您介绍运动检测分析调用，敬请期待...