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

原创

赣州云智科技 2024-10-16 09:58:45 ©著作权

文章标签 AI运动 AI运动小程序 AI动作识别 AI计时计数云上运动会 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者赣州云智科技的原创作品，请联系作者获取转载授权，否则将追究法律责任

随着人工智能技术的不断发展，阿里体育等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封装好的代码。