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

news2024/11/27 17:36:23

引言受小程序camera组件预览和抽帧图像不一致的特性影响，一直未全功能支持全屏模式，详见本系列文件第四节[小程序如何抽帧]https://blog.csdn.net/alphaair/article/details/133981787 “小程序如何抽帧”)；随着插件在云上赛事、健身锻炼、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;