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

一、插件运动检测分析的流程

1.1、相关核心命名空间

插件关于姿态、运动检测的能力,都包含在calcsports两个命名空间下。其中sports命名空间下包含了所有的内置运动分析器类和运动检测相关计时、计数的核心逻辑抽象;calc命名空间下包含了人体姿态分析的角度、垂直、水平、视角等规则计算器、姿态相似度和关键点追踪等能力,sports也是基于此能力实现。

1.2、运动分析的过程

运动分析的过程,便是逐帧分析人体结果,当捕捉符合到要求的姿态动作,便触发计时、计数回调。UI便可以基于此回调与用户进行交互。

二、获取所有的内置运动

sports.SportBase是运动分析器抽象基类,实现了基本的计数、计时逻辑,其中SPORTS静态属性包含了所有的插件内置运动。

const SportBase = AiSport.sports.SportBase;
console.log(SportBase.SPORTS);
//输出结果
//0: {key: "Rope-Skipping", name: "跳绳"}
//1: {key: "Jumping-Jack", name: "开合跳"}
//2: {key: "Sit-Up", name: "仰卧起坐"}
//3: {key: "Push-Up", name: "俯卧撑"}
//4: {key: "Squat", name: "深蹲起"}
//5: {key: "Plank", name: "平板支撑"}
//6: {key: "Squat-Horse", name: "马步蹲"}

二、创建一个指定的运动分析器

//调用SportBase.create静态方法,创建一个俯卧撑运动分析器实例
const AiSport = requirePlugin("aiSport");
const SportBase = AiSport.sports.SportBase;
const sport = SportBase.create('Push-Up');
console.log(sport);

三、执行运动分析检测


//创建俯卧撑运动分析器
const AiSport = requirePlugin("aiSport");
const SportBase = AiSport.sports.SportBase;
const sport = SportBase.create('Push-Up');
sport.onTiCK = (cnt, times) => {
console.log('运动计数变化');
console.log(cnt, times);
}; //抽帧
const context = wx.createCameraContext();
const listener = context.onCameraFrame((frame) => {
const iamge = {
width: Number(frame.width),
height: Number(frame.height),
rawData: frame.data
}; //人体识别
humanDetection.detectionAsync(image).then(human=>{ //将人体识别结果推入运动分析器
sport.pushing(human); });
});
listener.start();

下篇将为您介绍姿态分析,敬请期待...

【一步步开发AI运动小程序】七、进行运动计时、计数的更多相关文章

  1. 微信小程序(七)-项目实例(原生框架 MINA转云开发)==02-云开发-配置

    云开发:1.就是用云函数的型式来使用云存储和云数据库完成各种操作!     2.只关注调什么函数,完成什么功能即可,无需关心HTTP请求哪一套!     3.此模式不代表没有服务器,只是部署在云环境中 ...

  2. 开发一个微信小程序教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序 ...

  3. 开发一个微信小程序项目教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  4. 如何快速地开发一个微信小程序

    如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...

  5. Java可视化日历(Date类、DATe Format类、Calendar类综合运用),开发可视化日历小程序

    Java时间日期类综合运用,开发可视化日历小程序 由键盘输入指定格式的日期,打印这个月的日历 1.代码 import java.text.DateFormat; import java.text.Pa ...

  6. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  7. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  8. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

  9. 全栈开发工程师微信小程序-上(下)

    全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search, ...

  10. 全栈开发工程师微信小程序-上(中)

    全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...

随机推荐

  1. java_Web

    开始进入学习java web部分 一.Socket技术 字节流传输 使用bytes[] 封装字节进行传输数据 文件传输 浏览器访问 使用http协议进行访问 二.MySQL数据库 环境 Phpstyd ...

  2. Vue 子组件修改父组件传递过来的值

    实现效果:通过点击选中的按钮控制左边的树是否进行展示 子组件篇: <el-button v-if="isShowTree&hasTree" type="te ...

  3. c++学习笔记(一):内存分区模型

    目录 内存分区模型 程序运行前 程序运行后 new操作符 内存分区模型 c++在执行时,将内存大方向划分为4个区域 代码区:存放函数体的二进制代码,由操作系统进行管理(编写的所有代码都会存放到该处) ...

  4. SpringMVC的视图

    目录 ThymeleafView 转发视图 重定向视图 视图控制器view-controller SpringMVC中的视图是View接口,视图的作用渲染数据,将模型Model中的数据展示给用户Spr ...

  5. sql语句去掉前面的0(前导零,零前缀)

    sql还有个stuff的函数,很强悍. 一个列的格式是单引号后面跟着4位的数字,比如'0003,'0120,'4333,我要转换成3,120,4333这样的格式,就是去掉单引号和前导的0,用以下语句就 ...

  6. TypeScript – tsconfig

    前言 上一篇 TypeScript – Get Started 使用了命令 tsc index.ts --module es2015 很少人会在命令时给写 config, 更正规的做法是创建一个 ts ...

  7. Qt连连看(三)非核心功能实现

    主要的界面设计好后,我们来看下非核心功能的实现.由于这块不需要用到稍微复杂的算法,解决起来相对来说容易许多,于是我们选择先实现这部分非核心功能,这块几乎不涉及游戏的核心逻辑. 游戏界面如下: 这时我们 ...

  8. String 的 intern() 方法

    问题: String s1 = "a" + "b"; //创建了几个对象? String s2 = new String("ab"); // ...

  9. GPUStack 0.2:开箱即用的分布式推理、CPU推理和调度策略

    GPUStack 是一个专为运行大语言模型(LLM)设计的开源 GPU 集群管理器,旨在支持基于任何品牌的异构 GPU 构建统一管理的算力集群,无论这些 GPU 运行在 Apple Mac.Windo ...

  10. MVC模式与三层架构

    MVC 模式    三层架构    MVC 模式 与 三层架构 的关系