【一步步开发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>
AI 代码解读

三、调用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();
}
...
AI 代码解读

以上便是微信小程序抽帧的代码,实际应用中还需要对抽帧进行流控,以便达到最佳的性能,可以直接使用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即可满足大部分场景应用。

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

目录
打赏
0
2
2
0
104
分享
相关文章
Smolagents:三行代码就能开发 AI 智能体,Hugging Face 开源轻量级 Agent 构建库
Smolagents 是 Hugging Face 推出的轻量级开源库,旨在简化智能代理的构建过程,支持多种大语言模型集成和代码执行代理功能。
277 69
Smolagents:三行代码就能开发 AI 智能体,Hugging Face 开源轻量级 Agent 构建库
通义灵码 AI 程序员全面上线,能和人类协作完成复杂开发任务
1 月 8 日消息,阿里云通义灵码 AI 程序员已全面上线,成为全球首个同时支持 VS Code、JetBrains IDEs 开发工具的 AI 程序员产品。此次上线的 AI 程序员相比传统 AI 辅助编程工具,能力更全面,可以让开发者以更高效、更沉浸的方式完成编码任务,通过全程对话协作的方式,就能完成从 0 到 1 的业务需求开发、问题修复、单元测试批量生成等复杂编码任务。
313 65
Eko:一句话就能快速构建复杂工作流的 AI 代理开发框架!快速实现自动操作电脑和浏览器完成任务
Eko 是 Fellou AI 推出的开源 AI 代理开发框架,支持自然语言驱动,帮助开发者快速构建从简单指令到复杂工作流的智能代理。
210 12
Eko:一句话就能快速构建复杂工作流的 AI 代理开发框架!快速实现自动操作电脑和浏览器完成任务
微软开源课程!21节课程教你开发生成式 AI 应用所需了解的一切
微软推出的生成式 AI 入门课程,涵盖 21 节课程,帮助开发者快速掌握生成式 AI 应用开发,支持 Python 和 TypeScript 代码示例。
156 14
Eliza:TypeScript 版开源 AI Agent 开发框架,快速搭建智能、个性的 Agents 系统
Eliza 是一个开源的多代理模拟框架,支持多平台连接、多模型集成,能够快速构建智能、高效的AI系统。
164 8
Eliza:TypeScript 版开源 AI Agent 开发框架,快速搭建智能、个性的 Agents 系统
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
16天前
|
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
50 0
阿里云工程师跟通义灵码结伴编程, 用Spring AI Alibaba来开发 AI 答疑助手
本次分享的主题是阿里云工程师跟通义灵码结伴编程, 用Spring AI Alibaba来开发 AI 答疑助手,由阿里云两位工程师分享。
阿里云工程师跟通义灵码结伴编程, 用Spring AI Alibaba来开发 AI 答疑助手
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
14 0
云大使 X 函数计算 FC 专属活动上线!享返佣,一键打造 AI 应用
如今,AI 技术已经成为推动业务创新和增长的重要力量。但对于许多企业和开发者来说,如何高效、便捷地部署和管理 AI 应用仍然是一个挑战。阿里云函数计算 FC 以其免运维的特点,大大降低了 AI 应用部署的复杂性。用户无需担心底层资源的管理和运维问题,可以专注于应用的创新和开发,并且用户可以通过一键部署功能,迅速将 AI 大模型部署到云端,实现快速上线和迭代。函数计算目前推出了多种规格的云资源优惠套餐,用户可以根据实际需求灵活选择。
AI助理

你好,我是AI助理

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