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

简介: 随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现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组件大小是不一致的!!!

image.png

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

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

4.2 全屏适配的问题。

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

4.3 抽帧参数选择

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

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

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
11天前
|
人工智能 小程序 IDE
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
随着AI技术的发展,各大厂商推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念大热。本文将指导你如何利用“云智AI运动识别小程序插件”,在微信小程序中实现类似功能,包括工具搭建、服务启动及数据回传等步骤,助力开发者高效开发AI运动小程序。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
|
3天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
3天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
18天前
|
人工智能 小程序 前端开发
【一步步开发AI运动小程序】六、人体骨骼图绘制
随着AI技术的发展,阿里体育等公司推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始,利用“云智AI运动识别小程序插件”,在小程序中实现类似功能,包括人体骨骼图的绘制原理及其实现代码,确保骨骼图与人体图像精准重合。下篇将继续介绍运动分析方法。
|
18天前
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
47 0
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
278 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
114 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
4月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
111 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序