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

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

时间:2024-10-09 09:22:46浏览次数:8  
标签:winfo 预览 AI 适配 程序 模式 camera 全屏

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

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

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

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

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

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

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

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

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

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

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

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互动等运动应用。

标签:winfo,预览,AI,适配,程序,模式,camera,全屏
From: https://www.cnblogs.com/alphaair/p/18452286

相关文章

  • 校园二手交易平台的小程序+ssm论文源码调试讲解
    2系统开发环境2.1微信开发者工具微信开发者工具现在已经被小程序开发团队开发运行,目前微信开发者工具任然在不断的完善中,在开发小程序时经常要不断的更新。可以使用微信扫码登陆开发者工具,开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。机型选择:小程序以智......
  • 云上考场小程序+ssm论文源码调试讲解
    2关键技术简介2.1微信小程序微信小程序,简称小程序,英文名MiniProgram,是一种全新的连接用户与服务的方式,可以快速访问、快速传播,并具有良好的使用体验。小程序的主要开发语言是JavaScript,它与普通web的开发有很多相似之处。小程序和普通网页开发并不是相同的东西,是有差......
  • 基于微信小程序的网上商城+ssm论文源码调试讲解
    2系统开发环境2.1微信开发者工具微信开发者工具现在已经被小程序开发团队开发运行,目前微信开发者工具任然在不断的完善中,在开发小程序时经常要不断的更新。可以使用微信扫码登陆开发者工具,开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。机型选择:小程序以智......
  • AI课堂教学质量评估系统
    AI课堂教学质量评估系统利用摄像头和人脸识别技术,AI课堂教学质量评估系统实时监测学生的上课表情和课堂行为。同时,系统还结合语音识别技术和听课专注度分析算法,对学生的听课专注度进行评估。AI课堂教学质量评估系统通过收集和分析这些数据,生成教学质量报告,并提供针对性的改进建议......
  • 实战逆向RUST语言程序
    实战为主,近日2024年羊城杯出了一道Rust编写的题目,这里将会以此题目为例,演示Rust逆向该如何去做。题目名称:sedRust_happyVm题目内容:unhappyrust,happyvm关于Rust逆向,其实就是看汇编,考验选手的基础逆向能力。在汇编代码面前,任何干扰都会成为摆设。1、初步分析64为程序,使用ID......
  • 【AI学习】Mamba学习(四):从SSM开始
    Mamba的发展,是从SSM->HiPPO->S4->Mamba演化过来。所以,了解Mamba,得从SSM开始。SSM,状态空间模型SSM,就是状态空间模型。为什么需要SSM?查看三十年前的教科书,控制论的发展,让人们对控制系统不再只满足于研究输出量的变化,对于系统内部的状态变量同时感到兴趣,以便设计和控制这些......
  • 窗体MainWindow的属性设置2
    文章目录1.控件名称2.菜单栏A.一级菜单B.子菜单①子菜单添加快捷键②子菜单添加图标3.工具栏A.将子菜单移除工具栏B.移除工具栏4.状态栏A.移除状态栏B.状态栏显示信息状态栏一直显示信息  本章将主要介绍窗体MainWindow控件的属性设置,例如控件名称、菜单栏、......
  • ‘pip‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
    当你新买的电脑想要配置虚拟环境或者执行其它操作时,cmd中使用pip操作可能会遇到这样的报错。为什么会出现这种问题呢?因为你的电脑里面没有配置pip的环境变量,自然无法执行pip的命令操作。解决如下:1:首先在C盘中找到pip应用程序文件,(python默认安装在C盘中,不要更改python以......
  • 流程转移与子程序
    转移概念一般情况下指令是顺序逐条执行,然而在实际情况中常常需要改变程序的执行流程。转移指令:可以控制CPU执行内存中某处代码的指令可以修改IP,或者同时修改CS和IP的指令转移指令按行为分为:段内转移:只修改IP,如jmpax段间转移:同时修改CS和IP,如jmp1000:0根据指......
  • LeetCode 1371. Find the Longest Substring Containing Vowels in Even Counts
    原题链接在这里:https://leetcode.com/problems/find-the-longest-substring-containing-vowels-in-even-counts/description/题目:Giventhestring s,returnthesizeofthelongestsubstringcontainingeachvowelanevennumberoftimes.Thatis,'a','e&......