不同视频模板需要不同的图表动画，还要配合旁白的时间。浏览器里能播放的效果，搬到服务器上渲染时又会遇到字体、编解码器和无头环境的问题。
做成了什么
平台把取数、图表组件、场景时间轴和渲染任务分开处理，模板可以重复用，组件按统一的数据格式接入，最后在服务端用 FFmpeg 输出视频。
先统一数据格式
先约定组件怎样拿数据、怎样配置和接入，再增加模板，减少后续逐个改造的工作。
返回代表作品
内容科技 / 音视频工程2020—2022
Case 032020—2022
金融短视频制作平台
Intelligent Video Platform
把金融数据做成带动态图表和旁白的短视频。编辑选择模板、调整内容后，由服务端完成渲染和合成。
图表动画、旁白和字幕，需要在同一条时间轴上对齐。
- 4 stages
- 生产流水线
- 60 fps
- 动态图表渲染
- SaaS
- 使用方式
PROJECT EXAMPLES
项目截图与示例
平台生成流程
项目当时的流程图，从选模板、配置视频、编辑页面，到任务队列、生成语音和音视频合成。
统一时间轴
页面切换、组件动画和虚拟主播的位置，都按同一条主时间轴来走。
虚拟主播帧动画
当时用来说明虚拟主播的帧序列、显示区域和位移关系的示意图。
01 / Context
要解决的问题
02 / System
系统怎样工作
- 01
数据池
取数和标准化都在后端做，组件只按数据键读最终的作图数据，模板里就少了很多解析分支。
- 02
业务组件
为具体业务编写图表和动画组件，每个组件只保留需要的配置项。
- 03
媒体渲染
在场景里排好图表动画、旁白和字幕，服务端再用帧流加 FFmpeg 合成指定规格的视频。
03 / Decisions
设计中的取舍
保留专用组件
有些业务组件只能给少数几个模板用，但是配置简单，动画效果也好保证，因此这里接受了一些重复。
处理服务端渲染问题
检查帧缓存、并行任务、码率和字体，并处理渲染失败后的重试。
04 / Our work
我们的职责
角色：我们负责项目和技术方案，参与核心开发，重点是图表组件、时间轴和服务端渲染。
- 01设计平台分层、组件分类与前后端数据协议
- 02主导动态图表、场景时间轴和 FFmpeg 服务端渲染方案
- 03参与核心代码开发并解决性能、清晰度和部署环境问题
Node.jsFFmpegCanvasWebGLMedia Pipeline