随着人工智能技术的不断发展，阿里体育等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即可满足大部分场景应用。
下篇我们将为您介绍如何进行人体识别，敬请期待...
