之前我们为您分享了【一步步开发AI运动小程序】开发系列博文,通过该系列博文,很多开发者开发出了很多精美的AI健身、线上运动赛事、AI学生体测、美体、康复锻炼等应用场景的AI运动小程序;为了帮助开发者继续深耕AI运动领域市场,今天开始我们将为您分享新系列【一步步开发AI运动APP】的博文,带您开发性能更强、体验更好的AI运动APP。
一、ai-camera
组件介绍
使用过uni开发过APP的开发者,应该了解在uni-app
和uni-app x
的APP模式下,不像小程序模式下有原生Camera
组件可以使用操控相机,需要引入第三方插件或自行实现相机的预览、拍照、抽帧、录像等能力。
为了进一步减轻AI运动APP开发者的工作量,降低AI运动能力集成难度,在UNI-APP
版的「AI运动识别」插件中,我们专门为AI运动
场景量身打造了相机操控组件ai-camera
。
组件同时支持Android和iOS多平台;配置和操控API借鉴了小程序的风格,以减少开发者的学习使用成本;ai-camera
相较于小程序的Camera
更贴合AI运动场景,有些更强的操控能力、更高的抽帧处理效果、更多的高频应用API。
当然其他非AI运动APP开发者,也可以用来平替APP模式无相机组件的问题,完全能满足其它场景的预览、拍照、抽帧需求,以满足相机多端发布的需求。
二、获取相机上下文
在对相机进行抽帧、拍照等操作前,需要获得相机组件的操控上下文,而且成功获取上下的前提是,页面中有ai-camera
组件,且建议在on-ready
触发时获取,代码如下:
<template><yz-ai-camera id="camera" class="camera" :device="cameraDevice" resolution="medium" @on-camera-ready="onCameraReady" />
</template>
<script>
//相机调用前须申请相应权限
import {Frame, ExtractFrameOptions, getCameraContext} from "@/uni_modules/yz-ai-sport";
export default {data(){cameraDevice: 'back'},methods:{onCameraReady() {const context = getCameraContext();let cameraDesc = context.getCurrentCamera();console.log(cameraDesc);}}
}
</script>
三、执行相机抽帧
在获得了相机操控上下文后,就可以对相机进行抽帧操作了,代码如下:
...
<script>
export default {....methods:{onExtract() {const context = getCameraContext();context.startExtractFrame({onFrame(frame){console.log(frame.width,frame.height,frame);}});//5s后停止抽帧setTimeout(()=>{context.stopExtractFrame();},5000);}}
}
</script>
四、将帧保存到相册
在相机抽帧中,经常会遇到需要将抽取的帧将转换成jpg等格式图像进行保存,插件专门为类似场景提供解析并保存帧图像至相册中的能力,代码如下:
...
<script>
export default {....methods:{onExtract() {const context = getCameraContext();context.startExtractFrame({onFrame(frame){//不建议每帧都保存,抽帧率都非常高,容易在相册中留下非常多的文件,浪费存储空let file = context.saveFrameToAlbum(frame);console.log(file);}});}}
}
</script>
好了,相机组件的基本应用就为您介绍到这,更多的相机能力,请参考插件API文档和Demo。
下篇我们将为您介绍人体识别检测,敬请期待...