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

本文链接：https://blog.csdn.net/alphaair/article/details/146903476

之前我们为您分享了【一步步开发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>