【一步步开发AI运动小程序】四、小程序如何抽帧

随着人工智能技术的不断发展，阿里体育等IT大厂，推出的“乐动力”、“天天跳绳”AI运动APP，让云上运动会、线上运动会、健身打卡、AI体育指导等概念空前火热。那么，能否将这些在APP成功应用的场景搬上小程序，分享这些概念的红利呢？本系列文章就带您一步一步从零开始开发一个AI运动小程序，本系列文章将使用“云智AI运动识别小程序插件”，请先行在微信服务市场或官网了解详情。

一、微信小程序抽帧相关API

微信小程序抽帧需要用到Camera组件和CameraContext组件，可以参考官网文档：

1.1、Camera组件

https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

1.2、CameraContext API

https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/wx.createCameraContext.html

二、Camera组件设置

相机组件的frame-size属性直接影响到抽帧后的图像数组大小，所以建议设为medium以下，以便兼顾中低机型。

<camera id="preview" class="preview" style="width:100vw;height:80vh;" flash="off" device-position="back"
	resolution="high" frame-size="low" @initdone="onCameraReady">
</camera>

三、调用API抽帧

...
onCameraReady(e) {
	const context = wx.createCameraContext();
	const listener = context.onCameraFrame((frame) => {
	//frame.data图像数组将用于后续的人体识别
		console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height);
	});
	listener.start();
}
...

以上便是微信小程序抽帧的代码，实际应用中还需要对抽帧进行流控，以便达到最佳的性能，可以直接使用Demo项目中的camera-device.js封装好的代码。

四、抽帧的注意事项

4.1 抽取的帧图像大小与camera组件大小是不一致的!!!

这是微信小程序的官方提示，并未说明具体的原因。即：假设给camera组件设定为宽480px高640px,但抽取的帧就不一定是同camera大小宽480px高640px了，具体为frame-size大小决定的，实际要上抽取帧后才能确定。

至于导致这个问题的原因，我们认为是抽帧相接口，需要根据相机支持的分辨率，匹配相应的视频格式，进行视频流编码后返回给抽帧接口。

4.2 全屏适配的问题。

我们建议在实际场景应用中，特别是要开启视频骨骼图的场景，camera及骨骼图canvas保持与帧大小的同比绽放。所以如果要使用全屏，需要自己做适配。

4.3 抽帧参数选择

建议将frame-size设为small，resolution设为high，抽帧FPS设为12即可满足大部分场景应用。

下篇我们将为您介绍如何进行人体识别，敬请期待...