【一步步开发AI运动APP】四、使用相机组件抽帧

admin管理员组

文章数量:1443946

【一步步开发AI运动APP】四、使用相机组件抽帧

之前我们为您分享了【一步步开发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。

下篇我们将为您介绍人体识别检测，敬请期待...

本文标签： 一步步开发AI运动APP四使用相机组件抽帧