【一步步开发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即可满足大部分场景应用。

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

相关文章
|
27天前
|
人工智能 开发框架 安全
Smolagents:三行代码就能开发 AI 智能体,Hugging Face 开源轻量级 Agent 构建库
Smolagents 是 Hugging Face 推出的轻量级开源库,旨在简化智能代理的构建过程,支持多种大语言模型集成和代码执行代理功能。
272 69
Smolagents:三行代码就能开发 AI 智能体,Hugging Face 开源轻量级 Agent 构建库
|
23天前
|
人工智能 前端开发 程序员
通义灵码 AI 程序员全面上线,能和人类协作完成复杂开发任务
1 月 8 日消息,阿里云通义灵码 AI 程序员已全面上线,成为全球首个同时支持 VS Code、JetBrains IDEs 开发工具的 AI 程序员产品。此次上线的 AI 程序员相比传统 AI 辅助编程工具,能力更全面,可以让开发者以更高效、更沉浸的方式完成编码任务,通过全程对话协作的方式,就能完成从 0 到 1 的业务需求开发、问题修复、单元测试批量生成等复杂编码任务。
311 65
|
17天前
|
人工智能 开发框架 自然语言处理
Eko:一句话就能快速构建复杂工作流的 AI 代理开发框架!快速实现自动操作电脑和浏览器完成任务
Eko 是 Fellou AI 推出的开源 AI 代理开发框架,支持自然语言驱动,帮助开发者快速构建从简单指令到复杂工作流的智能代理。
202 12
Eko:一句话就能快速构建复杂工作流的 AI 代理开发框架!快速实现自动操作电脑和浏览器完成任务
|
6天前
|
人工智能 自然语言处理 JavaScript
微软开源课程!21节课程教你开发生成式 AI 应用所需了解的一切
微软推出的生成式 AI 入门课程,涵盖 21 节课程,帮助开发者快速掌握生成式 AI 应用开发,支持 Python 和 TypeScript 代码示例。
127 14
|
29天前
|
存储 人工智能 开发框架
Eliza:TypeScript 版开源 AI Agent 开发框架,快速搭建智能、个性的 Agents 系统
Eliza 是一个开源的多代理模拟框架,支持多平台连接、多模型集成,能够快速构建智能、高效的AI系统。
160 8
Eliza:TypeScript 版开源 AI Agent 开发框架,快速搭建智能、个性的 Agents 系统
|
8天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
14天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
47 0
|
15天前
|
人工智能 Java API
阿里云工程师跟通义灵码结伴编程, 用Spring AI Alibaba来开发 AI 答疑助手
本次分享的主题是阿里云工程师跟通义灵码结伴编程, 用Spring AI Alibaba来开发 AI 答疑助手,由阿里云两位工程师分享。
阿里云工程师跟通义灵码结伴编程, 用Spring AI Alibaba来开发 AI 答疑助手
|
12天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
14 0
|
9天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等