四、小程序如何抽帧

随着深度学习推理技术的不断发展，让小型设备运行深度学习成为可能，阿里体育等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以下，以便兼顾中低机型。

代码语言：html复制

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

三、调用API抽帧

代码语言：javascript复制

...
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封装好的代码。