之前我們為您分享了【一步步開發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>