本文原创发布在华为开发者社区，更多鸿蒙场景化示例请见华为开发者联盟官网“行业实践与常见问题”专题页。

介绍

本示例基于C++侧录制渲染，ArkTs侧UI展示和接口功能。

1. 预览：NDKCamera（）
2. 渲染：RenderThread（）
3. 取帧：glReadPixels（）

基于OpenGL渲染实现Lut滤镜相机源码链接

效果预览

使用说明

1. 预览：相机、设备、渲染器、管理器、窗口、初始化并开启
2. 渲染：渲染线程进入渲染主循环，额外线程开启lut上传、任务信号、绑定纹理、输出滤镜
3. 录制：渲染线程进入渲染主循环，录制线程进入录制循环
4. 拍照：渲染线程进入渲染主循环，额外线程开启帧输出
5. 保存：photoAccessHelper保存，SaveButton获取权限

实现思路

1. 初始化：

   1） 获取环境XComponent对象和id，绑定nativeXComponent、render，注册回调，暴露接口

2. 预览程序主流程：

   1） 获取render实例，渲染线程获取到nativeImageSurfaceid后，相机配置初始化并开启预览流

3. 渲染程序主流程：

   1） 渲染线程初始化开启进入渲染主循环，初始化eglcontext、垂直同步、帧画面nativeimage生成并监听，根据条件封锁等待唤醒信号，主线程继续执行，nativexcomponent注册回调，回调自动获取window，window初始化eglsurface，eglsurface关联eglcontext，可获取eglsurfaceid，eglcontext配置egl渲染程序、矩阵

4. 录制程序主流程：

   1） 获取render实例，配置视频格式，创建编码Surface，开始录制，进入录制主循环

5. 获取渲染帧图像：

   1） glReadPixels获取帧数据

   2） 线程间获取图片先后顺序：渲染获取图片顺序后于执行任务顺序，导致当前任务无法获得当前渲染图，需要设置条件锁（线程和锁解决当前图片为最新获取图片）

   3） 图片数据、宽高可以获取到，但传回arkts侧一直接收不到（去除解码再编码步骤，image.createPixelMap直接把arraybufer转pixelmap解决）

   4） 图像上下颠倒、重复多次、花屏（数据上下倒转解决）

   5） 图片能正常获取到，渲染颜色混乱，滤镜之外带有额外滤镜颜色偏蓝紫（rb通道互换解决）

   6） 图片右侧部分空白，图片宽高倒转（原为屏幕宽高，录制宽高对调为录制高宽解决）