【一步步开发AI运动小程序】十七、如何识别用户上传视频中的运动、动作、姿态?

【云智AI运动识别小程序插件】,可以为您的小程序,赋于人体检测识别、运动检测识别、姿态识别检测AI能力。本地原生识别引擎,内置10余个运动,无需依赖任何后台或第三方服务,有着识别速度快、体验佳、扩展性强、集成快、成本低的特点,本篇实现需要使用此插件,请先行在微信服务市场官网了解详情。

一、引言

通过本系列博文的前16篇文章,您已了解通过插件开发一个完整的运动、健身、学生体测、云上运动会等小程序的完整流程了,但是系列之前的文章都是基于相机实时取像的,有的开发者就会问,既然可以实现基于摄像头实时识别,那么能否实现用户上传视频识别呢?今天我们就来看看如何实现基于用户上传视频的运动、动作、姿态检测识别。

二、要解决的关键问题

image
首先我们来看一下基于相机的运动识别流程,如上图所示,将图像来源改为用户上传视频,只要将第一个环节的相机取帧,改为从用户上传视频中取帧即可,而且其它环节由于只依赖图像数据,不依赖具体来源,所以后续环节都是通用的。由于用户上传视频文件,是一个常见操作,故不在这里赘述,本章重点讨论如何从视频抽帧问题。要对视频抽帧,先要对视频进行解码,再逐帧抽取图像。

三、相关API

微信小程序内置了视频码器VideoDecoder,我们使用此API即可实现抽帧功能,关于此API的更多细节,可以查看官方文档。
image

四、代码实现

const AiSports = requirePlugin("aiSport");//获取插件对象
const humanDetection = AiSports.humanDetection;  //获取人体识别对象

function async decoding(){
   //创建解码器
   const decoder = wx.createVideoDecoder();
	
    //启动解码
    await decoder.start({
      abortAudio: true, //识别不需要音频
      source: tempFilePath, //通过wx.chooseMedia选择的视频tempPath
    });
	
    //循环抽帧,直到抽取完成
	let frame = null;
    do {
      frame = decoder.getFrameData();
      if(frame)
         break;

      //对帧进行人体识别
      let human =  await humanDetection.detectionAsync(frame);
      console.log(human);//此处可以将人体识别结果推入运动分析器
	  
    } while (!frame)
}

五、写在最后

到此就实现了基于录制视频的运动、人体、姿态识别的基本功能了,在实际产品应用中,可能还需实现帧图像预览、视频长度限制、跳帧抽取等功能,特别是视频长度大小限制,在实际应用中一定要实现,因为视频解码抽帧是非常消耗手机计算资源功能,上传过大过长的视频容易造成小程序卡顿、崩溃。

好了,本期为就为您介绍到这,下期继续为您基于相册图片上传的运动、人体、姿态识别…

UniApp是一个基于Vue.js的跨平台框架,它允许开发者编写一次代码,即可发布到微信小程序、H5、iOS、Android等多个平台上。关于视频抽帧功能,在UniApp的小程序开发,你可以利用其提供的Video组件和一些JavaScript处理能力来实现。 首先,你需要在小程序页面嵌入Video组件,并设置src属性指向你要提取视频帧的源文件。例如: ```html <video src="your_video_url" id="myVideo" /> ``` 然后,可以使用JavaScript的`requestAnimationFrame`或者`canvas` API来定期从视频抓取帧。每个时间间隔,你可以通过`video.currentTime`获取当前播放时间点,然后创建一个新的`canvas`元素,将视频绘制到这个新的画布上,最后保存该画布作为图片帧。 下面是一个简单的示例代码片段: ```javascript const video = document.getElementById('myVideo'); let canvas; uni.createSelectorQuery() .select('#myCanvas') .fields({ node: true }) .exec((res) => { canvas = res[0]; // 视频加载完成后开始抓帧 video.oncanplaythrough(() => { const drawFrame = () => { if (canvas && video.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) { canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0); // 把当前帧保存成图片 uni.saveImageToPhotosAlbum({ filePath: canvas.toDataURL(), success() { // 处理保存成功的回调... }, fail(err) { console.error('Failed to save frame:', err); } }); } requestAnimationFrame(drawFrame); }; drawFrame(); }); }); ``` 这只是一个基础的抽帧流程,实际应用可能需要处理更多的细节,如视频缓冲、错误处理以及帧率控制等。记得在`uni-app.config.json`配置相应权限以访问用户的相册。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值