之前我们为您分享了【一步步开发AI运动小程序】开发系列博文,通过该系列博文,很多开发者开发出了很多精美的AI健身、线上运动赛事、AI学生体测、美体、康复锻炼等应用场景的AI运动小程序;为了帮助开发者继续深耕AI运动领域市场,今天开始我们将为您分享新系列【一步步开发AI运动APP】的博文,带您开发性能更强、体验更好的AI运动APP。
根据我们之前的介绍可知,本系列使用的「AI运动识别」插件在运动识别时,完全依赖于设备端算力进行动识别推理,不会将用户图像上传至后台或第三方服务;所以运动识别后是无法再获得运动时的现场图像的,但是像体测和严肃的赛事场景可能又有留存运动现场图像进行后期审核核验的需求,本篇就带您来实现这个场景需求。
一、相机提取图像相关API
「AI运动识别」插件自带的相机组件,相机操控提供了将帧解析成jpeg格式图像并保存文件或Base64编码的相关API,详情如下,请可以参考插件API文档。
1.2、ICameraContext.saveFrameToAlbum将帧数据转换成base64字符串

二、实现留存图像代码
<template>
<yz-ai-camera class="camera" :style="{
width:previewWidth,height:previewHeight}" :device="cameraDevice"
resolution="medium" @on-camera-ready="onCameraReady" />
<yz-pose-grapher ref="grapher" class="grapher" :style="{
width:previewWidth,height:previewHeight}"
:scaleRate="previewRate" :offsetX="previewOffsetX" :offsetY="previewOffsetY" lineColor="#FFFFFF"
pointColor="#0091ff" leftColor="#009d00" />
</template>
<script>
import {
getCameraContext,createHumanDetector} from "@/uni_modules/yz-ai-sport";
export default {
data(){
return {
previewWidth:480,
height:640
};
}
methods:{
onCameraReady(){
//相机就绪后获取相机操控上下文
this.cameraContext = getCameraContext();
},
onDetecting(){
let options = {
multiple: false,
enabledGPU: true,
highPerformance: false
};
const that = this;
humanDetector = createHumanDetector(options);
humanDetector.startExtractAndDetect({
onDetected(result){
let humans = result.humans;
this.$refs.grapher.drawing(humans);
//推送进行运动识别
//将帧转换成Base64
that.cameraContext.convertFrameToBase64({
frame:result.frame,
success(res){
//转换后的Base64,可以进一步上传到后台
console.log(res);
},
fail(err){
console.error(err);
}
});
}
});
}
}
}
</script>
三、现场图像留存功能的小建议
3.1、做好隐私合规性
根据现行的相关监管法律法规要求,实现获取用户图像的功能场景,一定要做好隐私的合规性,提前向用户声明要会获取图像数据,在获得用户明确许可的情况,相关功能才能使用,以免造成应用上架时审查不通过。
3.1、不要全程留存
为了减轻识别时的手机端计算压力、公网带宽传输、后台存储服务压力,不建议全流程留存图像,可以考虑在特定时机(如:签到、触发计数等)下,进行随机抽取的方式留存。
