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

一、工具介绍

受限于微信小程序IDE,无法在IDE上直接调试camera组件及相关API,联机调试时console输出大数据时可能导致卡死的问题,为了弥补此项不足,我们为各位开发者准备了一个姿态调试的辅助桌面工具,帮助开发者更高效的进行姿态调试。

二、使用安装

请先按照集成文档,安装好工具的运行时。

三、启动服务器

点击【启动】按钮,启动调试工具回传服务器,准备接收回传数据,工具默认情况下是监听所有IP的20231端口,请关闭调试机器的防火墙,查看并记住本机的内网IP

四、小程序回传帧

小程序端是由BodyDebugClient对象,负责向工具进行回传人体识别数据的。

const AiSport = requirePlugin("aiSport");
const humanDetection = AiSport.humanDetection;
const BodyDebugClient = AiSport.BodyDebugClient; //新建客户端
const client = new BodyDebugClient("http://192.168.5.87:20231"); //假设您运行工具的机器IP是192.168.5.87,实际使用替换相应的IP即可
client.connect(); //抽帧
const context = wx.createCameraContext();
const listener = context.onCameraFrame((frame) => {
const image = {
width: Number(frame.width),
height: Number(frame.height),
rawData: frame.data
}; //人体识别
humanDetection.detectionAsync(image).then(human=>{
client.enqueue(frame, human);//回传暂存
});
});
listener.start();

//切记先停止抽帧和识别,再进行执行同步,否则可能会导致UI卡死
listener.stop(); uni.showLoading({
title: '同步帧数据...'
});
client.syncing((idx, total) => { uni.hideLoading();
if (idx >= total)
return; uni.showLoading({
title: `同步进度${idx}/${total}`
}); });

下篇将为您介绍姿态相似度比较功能,敬请期待...

【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用的更多相关文章

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

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

  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. 牛逼!Vue3.5的useTemplateRef让ref操作DOM更加丝滑

    前言 vue3中想要访问DOM和子组件可以使用ref进行模版引用,但是这个ref有一些让人迷惑的地方.比如定义的ref变量到底是一个响应式数据还是DOM元素?还有template中ref属性的值明明是 ...

  2. Gaussdb: CN修复失败对openssl版本依赖问题处理

    1.问题背景 GaussDB轻量化分布式集群安装完成后,进行openssh和openssl升级,现有环境openssh-8.2p1-9.p03.ky10.x86_64和openssl-1.1.1f-2 ...

  3. 痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是在MDK开发环境下自定义安装与切换不同编译器版本的方法. Keil MDK 想必是嵌入式开发者最熟悉的工具之一了,自 2005 年 Ar ...

  4. LinkedHashMap原理详解—从LRU缓存机制说起

    写在前面 从一道Leetcode题目说起 首先,来看一下Leetcode里面的一道经典题目:146.LRU缓存机制,题目描述如下: 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结 ...

  5. ASP.NET Core – Globalization & Localization

    前言 之前就写过 2 篇, 只是写的很乱, 这篇作为整理版. Asp.net core (学习笔记 路由和语言 route & language) Asp.net core 学习笔记之 glo ...

  6. SQL server temporal table 学习笔记

    refer: https://blog.csdn.net/Hehuyi_In/article/details/89670462 https://docs.microsoft.com/en-us/sql ...

  7. POJ-2385 Apple Catching(基础dp)

    It is a little known fact that cows love apples. Farmer John has two apple trees (which are convenie ...

  8. SpringMVC —— SpringMVC简介

    SpringMVC SpringMVC技术 与 Servlet技术功能等同,均属于web层开发技术 是一种基于java实现MVC模型的轻量级Web框架 SpringMVC 入门案例          ...

  9. httpclient调用接口

    有时候会将参数(返回结果)压缩(解压),加密(解密) 将json参数通过GZip压缩 Base64加密 1 public static String gzipAndEncryption(String ...

  10. 【赵渝强老师】史上最详细的PostgreSQL体系架构介绍

    PostgreSQL是最像Oracle的开源数据库,我们可以拿Oracle来比较学习它的体系结构,比较容易理解.PostgreSQL的主要结构如下: 一.存储结构 PG数据存储结构分为:逻辑存储结构和 ...