【一步步开发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秒的倒计时并请进行语音播报,再开始运动识别检查,让用户有充分的准备时间,以免让用措手不及。

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

相关推荐
一人一程温一壶酒1 天前
微信小程序uniapp开发附源码——图片加水印
微信小程序·uni-app·notepad++
vx_bscxy3221 天前
告别毕设焦虑!Python 爬虫 + Java 系统 + 数据大屏,含详细开发文档 基于微信小程序的民宿预约系统22398 (上万套实战教程,赠送源码)
java·spring boot·mysql·微信小程序·课程设计
千寻技术帮2 天前
50015_基于微信小程序的红色旅游系统
微信小程序·小程序·源码·ppt·项目文档
sg_knight2 天前
微信小程序中 WebView 组件的使用与应用场景
前端·javascript·微信·微信小程序·小程序·web·weapp
我很苦涩的2 天前
使用微信小程序实现多格验证码效果
微信小程序·小程序
阿里花盘2 天前
花店微信小程序怎么做,创建一个小程序需要多少钱
微信小程序·小程序
2501_933509072 天前
无锡制造企税惠防错指南:知了问账帮守政策红利线
大数据·人工智能·微信小程序
汤姆yu2 天前
基于微信小程序的智慧社区娱乐服务管理平台
微信小程序·娱乐
千寻技术帮3 天前
50013_基于微信小程序的校园志愿者系统
mysql·微信小程序·springboot·文档·ppt
汤姆yu3 天前
基于微信小程序的民宿预定系统
微信小程序·小程序·民宿预定