【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式?

引言 受小程序camera组件预览和抽帧图像不一致的特性影响,一直未全功能支持全屏模式,详见本系列文件第四节小程序如何抽帧;随着插件在云上赛事、健身锻炼、AI体测、AR互动场景的深入应用,各开发者迫切的希望能在全屏模式下应用,以便获得更合理的UI布局和更佳的用户体验,经过我们的努力摸索小程序camera组件的预览处理逻辑,优化更新插件特性,现在已完美支持相机全屏模式应用。

一、全屏模式下产生的问题?

1.1、入镜检测与预览不一致。

camera组件的宽高比与相机输出的图像不一致时,会对预览图像进行裁切,这便有可能会导致检测到了人体,但是预览图像看不到人体的现象。

1.2、骨骼图与人体不重合。

还是由于camera对相机输出图像进行裁切预览的问题,可能会导致输出的骨骼图,人体关键点点位与预览图像不重合的现象。

二、camera如何裁剪预览图像?

经过我们的实测分析,小程序camera组件在宽高比与相机输出图像宽高比不一致时,采用的是长边按比缩放,短边居中裁切 的模式进行缩放,如下图所示:

这是在相机输出帧大小640px480px/480px 640px,camera组件在iPhone 8 plus(屏大小414px*736px)横竖屏下的裁切效果。

三、如何适配处理全屏模式的问题?

根据上面camera的预览裁切模式效果观察,我们只要计算出被裁剪缩放比例及短边两边的留白,并进行相应的缩放及偏移即可,代码如下:

javascript 复制代码
function fullScreenFit(width, height) {
	const winfo = uni.getWindowInfo();

	this.previewWidth = winfo.windowWidth;
	this.previewHeight = winfo.windowHeight;

	if (winfo.windowHeight > winfo.windowWidth) {
		//竖屏
		console.log('竖屏');
		this.previewRate = winfo.windowHeight / height;
		this.previewOffsetX = winfo.windowWidth - width * this.previewRate;
		this.previewOffsetX /= 2;
		this.previewOffsetY = 0;
	} else {
		//横屏
		console.log('横屏');
		this.previewRate = winfo.windowWidth / width;
		this.previewOffsetX = 0;
		this.previewOffsetY = winfo.windowHeight - height * this.previewRate;
		this.previewOffsetY /= 2;
	}
}

//配置骨骼图偏移,需升级插件版本至1.5.5以上
this.poseGraphs = new PoseGraphs(ctx, canvas.width, canvas.height, that.previewRate);
this.poseGraphs.offsetX = that.previewOffsetX;
this.poseGraphs.offsetY = that.previewOffsetY;

当然实际使用中,还需要适配横竖屏的样式等,完整代码代码请参考我们提供的Demo项目。

三、全屏模式的副作用及建议。

上面便适配处理好了全屏模式,当然在此模式也可能会带来一些副作用,具体跟相机的输出帧图像和屏幕大小有关。

3.1、人体可视区域变小

由于全屏模式下,会对短边进行裁切,而用户根据的是可视区域进行调整人体站位,所以人体区域便变小了,可能会降低人体识别效果;建议提高camera的分辨率和帧大小至中级,将人体检测范围提高,具体请参考本系列文章相关章节。

3.2、人体检测范围变化

若您在运动时进行了人体远、近站位预检,那相应的range坐标也需进行偏移。

3.2、抽帧帧率下降

由于提高了分辨率和帧大小来应对可视区域变小的问题,在一些偏老机型可能会导致帧率下降问题。

当然以上问题,根据我们的实测,大部分情况和机型不会影响使用。

好了,全屏适配问题就为您介绍到这里,未尽问题可以联系我们进行咨询,插件将致力为您提供全面的AI运动识别解决方案,助力您快速落地AI运动AI体育AI健身AI体测AR互动等运动应用。

相关推荐
搞笑的秀儿33 分钟前
信息新技术
大数据·人工智能·物联网·云计算·区块链
阿里云大数据AI技术1 小时前
OpenSearch 视频 RAG 实践
数据库·人工智能·llm
XMAIPC_Robot1 小时前
基于ARM+FPGA的光栅尺精密位移加速度测试解决方案
arm开发·人工智能·fpga开发·自动化·边缘计算
加油吧zkf1 小时前
YOLO目标检测数据集类别:分类与应用
人工智能·计算机视觉·目标跟踪
Blossom.1182 小时前
机器学习在智能制造业中的应用:质量检测与设备故障预测
人工智能·深度学习·神经网络·机器学习·机器人·tensorflow·sklearn
天天扭码2 小时前
AI时代,前端如何处理大模型返回的多模态数据?
前端·人工智能·面试
难受啊马飞2.02 小时前
如何判断 AI 将优先自动化哪些任务?
运维·人工智能·ai·语言模型·程序员·大模型·大模型学习
顺丰同城前端技术团队2 小时前
掌握未来:构建专属领域的大模型与私有知识库——从部署到微调的全面指南
人工智能·deepseek
许泽宇的技术分享2 小时前
用.NET9+Blazor+Semantic Kernel,打造企业级AI知识库和智能体平台——AntSK深度解读
人工智能
烟锁池塘柳02 小时前
【深度学习】强化学习(Reinforcement Learning, RL)主流架构解析
人工智能·深度学习·机器学习