之前我们为您分享了【一步步开发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。
下篇我们将为您介绍人体识别检测，敬请期待...
