## 引言：从单点能力到完整产品

在移动互联网的黄金十年，相机早已超越“拍照工具”的原始定位，演变为**内容创作、身份认证、AR互动、智能感知**的核心入口。无论是抖音的美颜滤镜、支付宝的刷脸支付，还是高德地图的实景导航，背后都离不开高性能、低延迟、高定制化的相机能力。

然而，在 HarmonyOS 生态早期，开发者往往只能依赖系统提供的 `@ohos.multimedia.camera` 模块，通过简单的 `startPreview()` 和 `takePhoto()` 实现基础功能。这种“黑盒式”调用虽便捷，却严重限制了**渲染控制、算法集成、性能优化**的空间。

转折点出现在 **HarmonyOS NEXT** 的发布。随着纯血鸿蒙时代的开启，华为彻底重构了多媒体底层架构，引入了：
- **Camera Kit 2.0**：基于 Session 会话机制的全新 API；
- **XComponent + SurfaceId**：实现 Native 层与 UI 层的高效纹理共享；
- **MindSpore Lite + NDK**：打通 AI 推理与图像处理的“最后一公里”。

正是在这一背景下，我们决定启动 **“轻相机”**（LightCam）项目——一个集**电影级实时滤镜、AI 视觉检测、动态贴纸、高清拍照与录像**于一体的独立相机应用。

### 项目灵感来源

本项目的两大技术支柱源于两个经典开源项目：
1. **GPUImage**（iOS/Android）：由 Brad Larson 开创的实时滤镜框架，利用 OpenGL ES 实现毫秒级图像处理；
2. **TensorFlow Lite**：Google 的轻量级移动端 AI 推理引擎，支持人脸、物体、姿态等实时检测。

在 HarmonyOS 6 上，我们将其全面升级为：
- **libgpuimagelib**：基于 OpenGL ES 3.0 + EGL + libohcamera.so 的原生高性能图像处理库；
- **MindSpore Lite**：深度集成华为自研 AI 引擎，支持 `.ms` 模型的端侧推理。

本系列文章将手把手带你从零构建“轻相机”，而本文作为**第一篇**，聚焦于**整体功能规划**与**基础框架搭建**。

---

## 一、功能全景图：我们要做什么？

“轻相机”的核心目标是：**在保证 60fps 流畅预览的前提下，同时运行滤镜、AI 检测、贴纸叠加三大模块，并支持一键拍照/录像**。

### 1.1 核心功能模块

| 模块 | 功能描述 | 技术栈 |
|------|--------|--------|
| **1. 相机预览** | 高清、低延迟、可调节分辨率/帧率的实时预览流 | Camera Kit 2.0 + XComponent |
| **2. 实时滤镜** | 支持 20+ 种电影级滤镜（如 Lomo、Vignette、Sketch） | libgpuimagelib (OpenGL ES) |
| **3. AI 视觉检测** | 实时人脸检测、关键点定位、物品识别 | MindSpore Lite + 自定义 .ms 模型 |
| **4. 动态贴纸** | 基于人脸关键点的 AR 贴纸（如兔耳朵、墨镜） | OpenGL 纹理叠加 + 坐标变换 |
| **5. 拍照与录像** | 高清 JPEG/PNG 照片 + H.264/H.265 视频录制 | PhotoOutput / VideoOutput |
| **6. 性能监控** | 实时 FPS、内存占用、GPU 利用率显示 | ArkTS Profiler + NDK Stats |

### 1.2 用户交互流程

![tongyi-mermaid-2026-04-28-220447.png](https://developer.qcloudimg.com/http-save/yehe-2276240/40d8c2ea657196909f4d2deac2516b78.png)

### 1.3 性能指标要求

- **预览延迟**：< 100ms（从传感器到屏幕）
- **滤镜处理**：< 16ms（60fps）
- **AI 推理**：< 33ms（30fps）
- **内存占用**：< 300MB（中端设备）
- **功耗**：连续使用 30 分钟，温升 < 8°C

---

## 二、技术选型与架构设计

要同时满足上述功能与性能要求，必须采用**分层解耦、Native 优先**的架构。

### 2.1 整体架构图
![image.png](https://developer.qcloudimg.com/http-save/yehe-2276240/72506ff0d3ffd8f7b62cf04363a1ec67.png)
### 2.2 关键技术选型理由

#### （1）为何不用纯 ArkTS 实现？

- **性能瓶颈**：ArkTS 的 Canvas 2D 渲染无法满足 60fps 实时滤镜需求；
- **AI 支持弱**：ArkTS 缺乏对 `.ms` 模型的直接调用能力；
- **硬件控制浅**：无法精细控制曝光、白平衡、对焦等参数。

#### （2）为何选择 OpenGL ES 而非 Vulkan？

- **生态成熟**：HarmonyOS 对 OpenGL ES 3.0 支持完善；
- **开发效率**：GLSL 着色器编写比 Vulkan 简单得多；
- **兼容性广**：覆盖从低端到旗舰的所有鸿蒙设备。

#### （3）为何采用双路流（Dual Stream）？

- **渲染流**：高帧率（60fps），低分辨率（720p），用于 UI 预览；
- **AI流**：低帧率（15fps），高分辨率（1080p），用于精准检测。

这样可在保证用户体验的同时，降低 NPU 负载。

---

## 三、开发环境准备

### 3.1 软件依赖

| 组件 | 版本要求 | 说明 |
|------|--------|------|
| DevEco Studio | 5.0+ | 官方 IDE，支持 API 20 |
| HarmonyOS SDK | NEXT Beta 3 | 必须为纯血鸿蒙版本 |
| NDK | 9.0+ | 用于编译 C++ 代码 |
| CMake | 3.21+ | 构建 Native 库 |
| MindSpore Lite | 2.3+ | AI 推理引擎 |

### 3.2 权限与能力声明

在 `module.json5` 中必须声明以下内容：

```json
{
  "module": {
    "requestPermissions": [
      { "name": "ohos.permission.CAMERA" },
      { "name": "ohos.permission.WRITE_MEDIA" },
      { "name": "ohos.permission.READ_MEDIA" }
    ],
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "skills": [{ "entities": ["entity.system.home"] }]
      }
    ],
    "dependencies": {
      "@ohos/camera": "2.0.0",
      "@ohos/multimedia": "1.0.0"
    }
  }
}
```

> **注意**：HarmonyOS NEXT 已移除 Android 兼容层，所有权限必须显式声明。

---

## 四、基础框架搭建：从零到预览

现在，我们开始动手搭建最基础的相机预览功能。

### 4.1 UI 层：XComponent 绑定

`MainPage.ets`:

```typescript
// MainPage.ets
import { XComponent } from '@ohos/xcomponent';
import cameraManager from '../ndk/CameraManager';

@Entry
@Component
struct MainPage {
  private xcomponentId: string = 'xcomponent';
  private surfaceId: string = '';

  build() {
    Column() {
      XComponent({
        id: this.xcomponentId,
        type: 'surface',
        libraryName: 'liblightcam.so'
      })
      .onLoad(() => {
        // 获取 SurfaceId 并传递给 Native
        this.surfaceId = XComponent.getSurfaceId(this.xcomponentId);
        cameraManager.initCamera(this.surfaceId);
      })
      .width('100%')
      .height('80%');

      Button('Take Photo')
        .onClick(() => {
          cameraManager.takePhoto();
        });
    }
  }
}
```

### 4.2 Native 层：Camera Session 初始化

`CameraManager.cpp`:

```cpp
#include "camera_manager.h"
#include "camera_kit.h"
#include "surface.h"

using namespace OHOS::Media;

std::shared_ptr<CameraKit> g_cameraKit = nullptr;
std::shared_ptr<Camera> g_camera = nullptr;
std::shared_ptr<CaptureSession> g_captureSession = nullptr;

void InitCamera(const char* surfaceId) {
    // 1. 获取 CameraKit 实例
    g_cameraKit = CameraKit::GetInstance();
    if (!g_cameraKit) return;

    // 2. 获取后置摄像头
    std::vector<CameraInfo> cameraInfos;
    g_cameraKit->GetSupportedCameras(cameraInfos);
    for (const auto& info : cameraInfos) {
        if (info.cameraType == CAMERA_TYPE_BACK) {
            g_camera = g_cameraKit->CreateCamera(info.cameraId);
            break;
        }
    }

    // 3. 创建 CaptureSession
    g_captureSession = g_cameraKit->CreateCaptureSession();

    // 4. 创建 Preview Output
    sptr<Surface> previewSurface = Surface::CreateSurfaceAsConsumer();
    previewSurface->SetQueueSize(3);
    int32_t surfaceIdInt = atoi(surfaceId);
    previewSurface->SetDefaultWidthAndHeight(1280, 720);
    previewSurface->SetPixelFormat(PIXEL_FMT_RGBA_8888);

    std::shared_ptr<PreviewOutput> previewOutput = 
        g_cameraKit->CreatePreviewOutput(previewSurface);

    // 5. 将输出绑定到 Session
    g_captureSession->AddOutput(previewOutput);
    g_captureSession->Start();

    // 6. 开始预览
    g_camera->TriggerLoopingCapture(*previewOutput);
}
```

### 4.3 NAPI 接口桥接

`napi_camera_manager.cpp`:

```cpp
#include "napi/native_api.h"
#include "camera_manager.h"

static napi_value InitCamera(napi_env env, napi_callback_info info) {
    size_t argc = 1;
    napi_value args[1];
    napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

    char surfaceId[256] = {0};
    size_t strLen = 0;
    napi_get_value_string_utf8(env, args[0], surfaceId, sizeof(surfaceId), &strLen);

    InitCamera(surfaceId);
    return nullptr;
}

EXTERN_C_START
static napi_value Init(napi_env env, napi_value exports) {
    napi_property_descriptor desc = {
        "initCamera", nullptr, InitCamera, nullptr, nullptr, nullptr, napi_default, nullptr
    };
    napi_define_properties(env, exports, 1, &desc);
    return exports;
}
EXTERN_C_END
```

### 4.4 构建配置

`CMakeLists.txt`:

```cmake
cmake_minimum_required(VERSION 3.21)
project(lightcam)

set(CMAKE_CXX_STANDARD 17)

# 查找 HarmonyOS NDK
find_package(harmony REQUIRED)

# 添加源文件
file(GLOB_RECURSE SRC_FILES "*.cpp" "*.c")

# 创建动态库
add_library(lightcam SHARED ${SRC_FILES})

# 链接系统库
target_link_libraries(lightcam
    -lmedia
    -lcamera
    -lEGL
    -lGLESv3
    -lmindspore-lite
)
```

---

## 五、双路流框架：为 AI 与渲染分离铺路

单一预览流无法同时满足渲染与 AI 的需求。我们必须创建**两条独立的数据流**。

### 5.1 流程设计

```
Camera Sensor
     |
     v
[Frame Producer] --> [Preview Stream] --> XComponent (720p@60fps)
     |
     v
[AI Stream] ------> MindSpore Lite (1080p@15fps)
```

### 5.2 实现方案

在 `CaptureSession` 中添加两个 `PreviewOutput`：

```cpp
// 渲染流
auto previewSurface = Surface::CreateSurfaceAsConsumer();
auto previewOutput = cameraKit->CreatePreviewOutput(previewSurface);

// AI流
auto aiSurface = Surface::CreateSurfaceAsConsumer();
aiSurface->SetQueueSize(2); // 降低队列深度以减少延迟
auto aiOutput = cameraKit->CreatePreviewOutput(aiSurface);

session->AddOutput(previewOutput);
session->AddOutput(aiOutput);
```

然后通过 **SurfaceListener** 分别处理两路数据：

```cpp
class AISurfaceListener : public SurfaceListener {
public:
    void OnBufferAvailable() override {
        sptr<SurfaceBuffer> buffer;
        SurfaceError ret = aiSurface->AcquireBuffer(buffer);
        if (ret != SURFACE_ERROR_OK) return;

        // 将 buffer 转为 cv::Mat 或 MindSpore Tensor
        ProcessAIFrame(buffer);

        aiSurface->ReleaseBuffer(buffer);
    }
};
```

---

## 六、性能优化初探

即使是最基础的预览，也需考虑性能。

### 6.1 关键优化点

1. **Surface 队列大小**：设为 2–3，避免内存堆积；
2. **分辨率匹配**：预览分辨率应与屏幕 DPI 匹配，避免缩放开销；
3. **帧率控制**：通过 `CameraSetting` 设置 `FRAME_RATE_RANGE`；
4. **内存复用**：使用 `OH_NativeBuffer` 复用 GPU 内存。

### 6.2 示例：设置帧率

```cpp
CameraSetting setting;
Range<int32_t> fpsRange(30, 30); // 锁定 30fps
setting.SetValue(CAMERA_FRAME_RATE_RANGE, fpsRange);
g_camera->SetCameraSetting(setting);
```

---

## 七、下一步预告

本篇完成了“轻相机”的**骨架搭建**——我们拥有了一个可运行的相机预览，并设计了支持未来扩展的双路流架构。

在下一篇《**HarmonyOS 6 轻相机应用开发2：实时滤镜引擎集成**》中，我们将：
- 集成 `libgpuimagelib`；
- 实现第一个 GLSL 滤镜（灰度）；
- 构建滤镜链（Filter Group）；
- 通过 NAPI 实现 ArkTS 动态切换滤镜。

敬请期待！

---

## 附录：常见问题解答（FAQ）

**Q1：为什么预览黑屏？**  
A：检查 `module.json5` 是否声明了 `CAMERA` 权限，并确保 `XComponent` 的 `type` 为 `"surface"`。

**Q2：如何切换前后摄像头？**  
A：需先 `Stop()` 当前 Session，销毁所有 Output，再重新创建新的 Camera 实例。

**Q3：能否在模拟器上运行？**  
A：不能。相机功能必须在真机调试，建议使用 Mate 60/Pura 70 系列。

**Q4：libgpuimagelib 从何而来？**  
A：需自行移植 GPUImage 项目，或使用社区开源版本。

---

**参考资料**：
1. [HarmonyOS 官方文档 - Camera Kit](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V6/camera-kit-overview-0000001919848541-V6)
2. [MindSpore Lite 部署指南](https://www.mindspore.cn/lite/docs/zh-CN/master/index.html)

*本文为原创技术教程，转载请注明出处。*

在移动互联网的黄金十年，相机早已超越“拍照工具”的原始定位，演变为内容创作、身份认证、AR互动、智能感知的核心入口。无论是抖音的美颜滤镜、支付宝的刷脸支付，还是高德地图的实景导航，背后都离不开高性能、低延迟、高定制化的相机能力。

HarmonyOS 6 相机应用开发1：功能介绍与框架搭建（万字深度教程）

人工智能

音视频

客户端

HarmonyOS轻相机开发实战：基于CameraKit2.0构建高性能相机应用，集成OpenGLES实时滤镜、MindSporeLiteAI检测与双路流架构，实现60fps流畅预览。从基础框架搭建到性能优化，详解HarmonyOSNEXT原生相机开发全流程。

图像处理

数据流

Android

4核4G3M云服务器 新用户低至38元/年！

2026采购季 | AI焕新·智启新局

imageprocess

人脸识别10万次资源包新用户19.9元起


facerecognition

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

HarmonyOS 6 相机应用开发1：功能介绍与框架搭建（万字深度教程）-腾讯云开发者社区-腾讯云

HarmonyOS 6 相机应用开发1：功能介绍与框架搭建（万字深度教程）

HarmonyOS 6 相机应用开发1：功能介绍与框架搭建（万字深度教程）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐