← 返回技术文章

pro2 · SaaS 智能视频批量生产平台

云剪辑系统技术介绍

在线视频「制作中心」——架构、核心链路与功能特性说明

一、系统概述

1.1 产品定位

视频剪辑（云剪辑）服务是视频的制作中心，支持剪切、拼接、混音、字幕、叠加、转场、特效等一系列功能，提供在线可视化的剪辑平台（控制台）及相应的 OpenAPI。本文介绍云剪辑的系统架构、核心链路与功能特性。

云剪辑是多轨道的音视频非线性编辑器（简称非编）。无论音轨还是视轨，在时间线上无需依次线性排列——即非线性编辑。下文内容也可概括为《音视频多轨道编辑渲染引擎设计》。

1.2 功能简介

视频制作在整个视频链路（采集、制作、播放、媒资管理）中具有非常重要的地位，将前期的采集拍摄与最终的分发播放连成一体，起着承前启后的作用，云剪辑服务就是其中的制作中心。

云剪辑是集视频制作、生产、分发为一体的在线视频制作平台，具备工具与服务两方面能力：

1.3 非线性编辑示例

使用非线性编辑，可以灵活编排音频与图像资源：时间上可顺序排列，也可重叠；空间上可任意叠加混合，不受线性剪辑「必须先 A 后 B」的限制。

二、系统架构设计

2.1 整体架构与演进历程

云剪辑系统经历了从 SpringBoot + JNI 混合架构到纯 C++ 分布式服务的演进。

阶段一：SpringBoot + JNI 混合架构

阶段二：纯 C++ 分布式服务（成熟阶段）

核心模块：

  1. 前端 Web 编辑界面：可视化编辑，支持拖拽操作。
  2. 后端云渲染服务：音视频处理与渲染，支持分布式部署。
  3. 任务调度层：基于 RocketMQ 的任务队列与异步处理。

2.2 技术选型与架构决策

为兼顾前端编解码/渲染需求与开发成本，系统采用以下方案：

渲染技术选型：

架构设计原则：高并发 · 高可用 · 高性能（FFmpeg SIMD 与硬件加速）· 易扩展（模块化）。

2.3 系统架构图

┌─────────────────────────────────────────────────────────┐
│              前端 Web 编辑界面（控制台 / OpenAPI）          │
└───────────────────────────┬─────────────────────────────┘
                            │ 提交剪辑任务 / 查询状态
                            ▼
┌─────────────────────────────────────────────────────────┐
│           RocketMQ 任务调度层（分布式消息队列）            │
└───────────────────────────┬─────────────────────────────┘
                            │ 分发至 Worker
                            ▼
┌─────────────────────────────────────────────────────────┐
│     后端云渲染服务（C++ · FFmpeg · OpenGL · GPU 加速）     │
│   解码 → 多轨合成 → 特效/字幕/贴纸 → 编码 → 封装输出      │
└───────────────────────────┬─────────────────────────────┘
                            │
                            ▼
                   点播媒资库 / 分发播放

调度与 Pipeline 编排的进阶设计见 云剪辑任务调度与 RocketMQ 编排。

三、核心技术特性

3.1 AE 特效支持与 libpag 集成

业务背景：Adobe After Effects（AE）是设计师常用的特效工具。客户希望复用现有 AE 模板、降低学习成本、保持设计一致性。

方案对比：

选型 libpag 的原因：开源免费、功能较完整、Web 端性能优化、社区与文档完善。

技术方案：

应用效果：设计师 AE 制作 → 导出 PAG → 平台完美渲染；降低特效开发成本，提升专业性与竞争力。

3.2 图层时长可变技术

业务痛点：客户素材时长从数秒到数分钟不等，传统 AE 模板固定各图层时空关系，导致：

典型场景：电商推广中，15 秒商品片、30 秒关于我、45 秒品牌故事——传统方案需三套完全独立模板，业务上不可持续。

技术方案：

实际效果：一套模板适配多种时长；降低设计与维护成本；支撑大规模定制化生产。

四、端侧渲染流程

4.1 渲染架构概述

云非编整体结构与移动端和传统非编相同，基于时间线的视音频流处理框架：

4.2 Web 端 WASM 渲染流程

将 C++ 渲染核心编译为 WebAssembly，在浏览器端直接解码与合成，减少网络往返，与 Linux 云端复用同一套渲染语义。

Timeline 协议
   ↓
WASM 渲染模块（C++ / OpenGL ES）
   ↓
浏览器 Canvas / WebGL 输出预览帧

4.3 服务端渲染流程

剪辑任务（Timeline / 协议 JSON）
   ↓
RocketMQ 入队 → Worker 拉取
   ↓
FFmpeg 解码 → OpenGL 多轨合成 → 编码封装
   ↓
成片写入媒资库 / 回调通知

4.4 macOS 端 IPC 渲染流程

Electron 主进程通过 ZeroMQ 与 C++ 渲染子进程通信：下发渲染指令、执行合成、回传帧数据，实现低延迟本地预览。

Electron 前端
   ↕ ZeroMQ IPC
macOS C++ 渲染子进程
   ↓
本地帧输出 / 视频流回传

4.5 Web 端渲染方案演进

实时预览需满足：拖拽时间轴即时出画、≥25 FPS 流畅度、Web 平台可用、前端团队可维护。

方案一：RTMP 推流

方案二：WASM 浏览器端渲染

方案三：macOS IPC（Electron + ZeroMQ）

五、功能特性详解（服务端渲染）

5.1 画面处理

基于 FFmpeg 与 OpenGL，实现精准画面处理：

基础编辑：时间裁剪 · 画面裁剪 · 倍速播放 · 循环/单次/快放/慢放

高级变换：平移旋转缩放 · 图层混合 · 转场特效 · 滤镜 · HDR · WEBM（YUVA420P）· 透明度 Overlay 动画

5.2 音频处理

基础：时间裁剪 · 倍速 · 音量 · 淡入淡出 · 静音

高级：多轨混音 · 格式转换 · 降噪（rnnoise）

5.3 水印与贴纸

水印：静态/动态水印，PNG/JPG，透明度，九宫格或精确坐标，等比/自由缩放

贴纸：PNG/GIF/APNG 贴纸库，帧动画贴纸，主题分类；Mask 视频遮罩，多种混合模式

5.4 文字处理

基于 libpag 与 Skia：

基础：字体/大小/颜色/粗细/斜体 · 对齐 · 行距字距 · 描边 · 阴影

高级：富文本 · 文字模板 · 动画（淡入/滑动/缩放/旋转）· 速度/循环/延迟控制

六、成片案例

营销成片示例已迁移至在线项目预览页，可在浏览器中查看时间线、包装效果与整体成片，无需在本站加载大体积视频文件。案例展示：https://agent.tfwang.top/#/project-preview

七、技术总结与项目价值

7.1 核心技术成果

7.2 项目价值与影响

商业价值：

技术价值：