【一步步开发AI运动APP】六、运动计时计数能调用

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

通过前几篇博文，您已经可以通过插件在APP上进行抽帧、人体检测了，在获得到人体结构后，便可以进行运行分析实现人体计时计数了，uniAPP插件同微信小程序一样，仍然内置了跳绳、开合跳、俯卧撑、仰卧起坐、深蹲(深蹲起)、平板支撑、马步蹲等多个常见运动，可以满足健身、线上赛事、学生体测等场景需求，若有个性运动定制需求，也可以使用插件提供的pose-calc姿态分析检测接口，进行自定义扩展，后续章节再向您介绍。

一、创建运动分析器

通过createSport(key string)可以创建相应的运动实例：

import {
   getSports,createSport} from "@/uni_modules/yz-ai-sport";

function createSport(){
   
    //获取已注册的所有运动列表
    let sports = getSports();
    console.log(sports);

    //创建了一个开合跳运动分析器
    const sport = createSport('jumping-jack');
}

二、进行运动分析，监听计数变化

启动运动分析，并向运动分析器推送人体结构，即可开展运动分析进行计时计数：

import {
   getSports,createSport} from "@/uni_modules/yz-ai-sport";

function createSport(){
   

    //创建了一个开合跳运动分析器
    const sport = createSport('jumping-jack');
    sport.onTick = (counts,times)=>{
   
        //当计时计数发生变化时，会触发onTick回调
        console.log(counts,times);
        //更新UI等操作
    };
    sport.start();//启动运动分析

    let human = ... //见前一节，进行人体识别
    sport.pushing(human);
}

三、停止、重置运动分析

可以调用sport.stop()停止或暂停运动分析,sport.reset()重置计数状态。

四、完整代码

<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 {
    getCameraContext,createHumanDetector,getSports,createSport} from "@/uni_modules/yz-ai-sport";

let cameraContext;
let sport;

export default {
    
    data(){
    
        return {
    };
    }
    methods:{
    
        onCameraReady(){
    
            cameraContext = getCameraContext();
            sport = createSport('jumping-jack');
            sport.onTick=(counts,times)=>{
    
                console.log(counts,times);
            };
            soprt.start();
        },
        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);

                    sport.pushing(humans[0]);
                }
            });
        }
    }
}
</script>