【一步步开发AI运动APP】十三、如何进行运动开始前的站位预检,提升用户体验

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

本篇将为您介绍,如何实现正式运动检测前的远、近,视角预检、语音提示等典型应用场景。

一、为什么要进行站位预检

在运动检测时,用户无法手持和操作手机(或者是固定的终端设备),所以在放置好手机后,有必要进行人体远近、视角的预检查,这样的预检查一是有助手提升用户初次使用时的体验,在首次使用时不至于茫然不知道如何使用。二是有助于提升运动检测通过率,合适的距离、正确的视角是影响运动检测通过率两大关键因素,用户在运动开始前站位好距离、视角能极大的提高检测通过率,获得最佳的运动检测体验。 实现以上的预检查,需要使用到插件的pose-calc自定义姿态识别,可以参考本系的前面章节或插件的pose-calc文档了解pose-calc的使用。

二、如何进行站位远近检测

如下图所示,人距离设备过远或过近会影响取像中的人体范围,太远了人物太小关键点不清晰、太近了人无法全身入镜无法识别完整姿态,这都将影响运动的检测识别,我们建议识别范围为人居中占整个图像60%-85%之间为最佳。

要判断人站位的远、近,我们可以使用Pose-Calc中的Whole检查规则来进行判断,代码如下:

javascript 复制代码
import { createCalculator } from "@/uni_modules/yz-ai-sport";
const calculator = createCalculator();

 //human受检人体姿态,调用抽帧、人体检测接口,得到实时人体结构

function farNearChcking(human){
	let range = 0.85;
	let rule = {
		name: '人太近检查',
		calc: 'whole',
		range: {
			top: human.height * (1 - range) / 2,
			left: human.width * (1 - range) / 2,
			width: human.width * range,
			height: human.height * range
		},
		relaxed: true
	};

	let pass = calculator.calculating(human, rule);
	if(!pass){
		console.log('您离相机太近了,请远离');
		return false;
		//进行UI显示,比如检测范围框闪动
		//建议进一步进行语音播放提醒
	}

	range = 0.65;
	rule = {
		name: '人太远检查',
		calc: 'whole',
		range: {
			top: human.height * (1 - range) / 2,
			left: human.width * (1 - range) / 2,
			width: human.width * range,
			height: human.height * range
		},
		relaxed: true
	};
	pass = calculator.calculating(human, rule);
	if(pass){
		console.log('您离相机太远了,请靠近些');
		return false;
		//进行UI显示,比如检测范围框闪动
		//建议进一步进行语音播放提醒
	}
	
	return true;
}

四、如何进行视角检查

为了保证能尽量完整的识别到运动姿态,不同的运动定义了不能的检查视角(可以通过运动分析器的实例的view属性获得),在定义的视角下进行相应的运动检测,检测效果为最佳,如下图所示: pose-calc提供了camera-view检测规则,专门用来检测站位视角,应用代码如下:

javascript 复制代码
import { createCalculator } from "@/uni_modules/yz-ai-sport";
const calculator = createCalculator();

 //human受检人体姿态,调用抽帧、人体检测接口,得到实时人体结构
 
function cameraViewChecking(human, view){

	let backOrFrontRule = {
		name: '前后视角预检查',
		calc: '$or',
		ruels: [{
			name: '正对摄像头检查',
			calc: 'camera-view',
			position: 'front'
		},{
			name: '背对摄像头检查',
			calc: 'camera-view',
			position: 'back'
		}]
	};
	
	let sideRule = {
		name: '侧身视角预检查',
		calc: '$or',
		ruels: [{
			name: '左对摄像头检查',
			calc: 'camera-view',
			position: 'left'
		},{
			name: '右对摄像头检查',
			calc: 'camera-view',
			position: 'right'
		}]
	};
	
	let pass = false;
	let msg = null;
	switch(view){
		case 'back_front':
		    msg = '请背对或正对手机';
			pass = calculator.calculating(human, rule)
			break;
		case 'side':
			msg = '请背侧身对手机';
			pass = calculator.calculating(human, rule)
			break;
	    //还进行更多的独立视角检查
	}
	
	if(!pass){
		console.log(msg);
		//进行UI显示,比如检测范围框闪动
		//建议进一步进行语音播放提醒
	}
	
	return pass;
}

五、预检完成后的过渡

为了让用户有一个缓冲反应时间,建议在所有预检查通过后,进行3-5秒的倒计时并请进行语音播报,再开始运动识别检查,让用户有充分的准备时间,以免让用措手不及。

好了,本篇就为您介绍到这,敬请继续关注更多典型场景实现

相关推荐
蛋先生DX4 小时前
AI 友好的云开发 MySQL SDK 它来了!微信小程序能直连关系型数据库了
mysql·ai编程·小程序·云开发
TiAmo zhang18 小时前
微信小程序开发案例 | 简易登录小程序
微信小程序·小程序·1024程序员节
黑马源码库miui5208619 小时前
场馆预定系统小程序
微信·微信小程序·小程序·1024程序员节
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生2 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
從南走到北2 天前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节
菜鸟una3 天前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
從南走到北3 天前
JAVA国际版一对一视频交友视频聊天系统源码支持H5 + APP
java·微信·微信小程序·小程序·音视频·交友