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

引言 受小程序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、抽帧帧率下降

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

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

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