【一步步开发AI运动小程序】二、引入插件

合集 - 一步步开发AI运动小程序(24)

1.【一步步开发AI运动小程序】一、准备工作2023-05-18

2. 【一步步开发AI运动小程序】二、引入插件2023-05-18

3.【一步步开发AI运动小程序】三、运动识别处理流程2023-05-194.【一步步开发AI运动小程序】四、小程序如何抽帧2023-05-195.【一步步开发AI运动小程序】五、帧图像人体识别2023-05-236.【一步步开发AI运动小程序】六、人体骨骼图绘制2023-05-247.【一步步开发AI运动小程序】七、进行运动计时、计数2023-05-258.【一步步开发AI运动小程序】八、利用body-calc进行姿态识别2023-05-269.【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用2023-05-2910.【一步步开发AI运动小程序】十、姿态动作相似度比较2023-05-3111.【一步步开发AI运动小程序】十一、人体关键点跳跃追踪2023-06-0512.【一步步开发AI运动小程序】十二、自定义一个运动分析器，实现计时计数012023-06-1613.【一步步开发AI运动小程序】十三、自定义一个运动分析器，实现计时计数022023-07-1014.【一步步开发AI运动小程序】十四、主包超出2M大小限制，如何将插件分包发布？2023-12-2015.【一步步开发AI运动小程序】十五、AI运动识别中，如何判断人体站位的远近？2023-12-2516.【一步步开发AI运动小程序】十六、AI运动识别中，如何判断人体站位？2023-12-2817.【一步步开发AI运动小程序】十八、如何识别用户上传图片中的人体、运动、动作、姿态？2024-05-2818.【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态？2024-05-2019.【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片？2024-07-0920.【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式？2024-10-0921.AI运动小程序开发常见问题集锦一2024-09-1922.AI运动小程序开发常见问题集锦二2024-11-0523.【更新日志】新发布的1.5.0版本插件中的增强模式，作用几何？2024-03-2624.【一步步开发AI运动小程序】二十一、如果将AI运动项目配置持久化到后端？2024-11-11

收起

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

一、新建uni-app项目

新一个空的uni-app项目。

二、配置项目引用插件。

编辑mmanifest.json文件（在HBuilderX编辑器无法编译此文件内容，请使用计事本、VSCode等其它编辑器编辑），在mp-weixin节中增加下面的下面插件引用内容：

 "mp-weixin": {
      "appid": "xxxx",
      ...
      "plugins": {
          "aiSport": {
              "version": "1.0.12",
              "provider": "wx6130e578c4a26a1a"
           }
      }
}

三、部署模型

插件会提供一个识别模型文件，将解压的文件夹上传至一个可访问Web站点，并保证目录下的所有文件可访问下载。

四、安装npm依赖包

# 若未初始化npm包，请先执行npm init
npm install fetch-wechat --save

五、插件全局初始

在小程序的入口App.vue执行全局初始化：

<script>
	
	import * as fetchWechat from "fetch-wechat";
	
	export default {
		onLaunch: function() {
			
			const plugin = requirePlugin('aiSport');
			plugin.initialize({
				modelUrl: 'http://xx.xx.xx.xx/model.json', //刚刚部署的模型下载地址
				fetchFunc: fetchWechat.fetchFunc(),
				humanPointThreshold: 0.45,
				debugEnabled: true
			});
			
		},
		onShow: function() {
			
		},
		onHide: function() {
			
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

六、调用插件内对象

const AiSports = requirePlugin("aiSport");//获取插件对象
const PoseGraphs = AiSports.PoseGraphs; //获取人体骨骼图绘制器
const humanDetection = AiSports.humanDetection;  //获取人体识别对象

//实例化一个人体绘制对象
const graphs = new PoseGraphs();