引言 受小程序
camera
组件预览和抽帧图像不一致的特性影响,一直未全功能支持全屏模式,详见本系列文件第四节
小程序如何抽帧;随着插件在云上赛事、健身锻炼、AI体测、AR互动场景的深入应用,各开发者迫切的希望能在全屏模式下应用,以便获得更合理的UI布局和更佳的用户体验,经过我们的努力摸索小程序camera
组件的预览处理逻辑,优化更新插件特性,现在已完美支持相机全屏模式应用。
一、全屏模式下产生的问题?
1.1、入镜检测与预览不一致。
当camera
组件的宽高比与相机输出的图像不一致时,会对预览图像进行裁切,这便有可能会导致检测到了人体,但是预览图像看不到人体的现象。
1.2、骨骼图与人体不重合。
还是由于camera
对相机输出图像进行裁切预览的问题,可能会导致输出的骨骼图,人体关键点点位与预览图像不重合的现象。
二、camera
如何裁剪预览图像?
经过我们的实测分析,小程序camera
组件在宽高比与相机输出图像宽高比不一致时,采用的是长边按比缩放,短边居中裁切的模式进行缩放,如下图所示:
这是在相机输出帧大小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、抽帧帧率下降
由于提高了分辨率和帧大小来应对可视区域变小的问题,在一些偏老机型可能会导致帧率下降问题。
当然以上问题,根据我们的实测,大部分情况和机型不会影响使用。
标签:winfo,预览,AI,适配,程序,模式,camera,全屏 From: https://www.cnblogs.com/alphaair/p/18452286好了,全屏适配问题就为您介绍到这里,未尽问题可以联系我们进行咨询,插件将致力为您提供全面的AI运动识别解决方案,助力您快速落地AI运动、AI体育、AI健身、AI体测、AR互动等运动应用。