Day 109: VideoStudio - 专业视频流分析工具

Author: global_name

_posts/2026-05-29-day-109-videostudio.md

@@ -0,0 +1,287 @@
+---
+layout: post
+title: "Day 109: VideoStudio - 专业视频流分析工具"
+author: iosdevlog
+date: 2026-05-29 00:00:00 +0800
+category: [AI, Video, C++]
+tags: [Video Analysis, Qt, FFmpeg, H.264, HEVC, AV1, StreamEye]
+---
+
+# Day 109: VideoStudio - 专业视频流分析工具
+
+![C++](https://img.shields.io/badge/C++-17-blue)
+![Qt](https://img.shields.io/badge/Qt-6.11.0-green)
+![FFmpeg](https://img.shields.io/badge/FFmpeg-7.1.1-orange)
+![License](https://img.shields.io/badge/License-MIT-success)
+
+> Build Your Own X With AI 系列：用 C++ 和 Qt 打造 Elecard StreamEye 级别的视频分析工具
+
+## 项目简介
+
+VideoStudio 是一款专业级视频流分析工具，灵感来自 [Elecard StreamEye](https://www.elecard.com/products/video-analysis/stream-eye)。它使用 C++ Qt 6 和 FFmpeg 构建，提供多编解码器支持、码率可视化、逐帧分析等专业功能。
+
+![VideoStudio 主界面](/assets/images/2026-05-29/day-109-1.png)
+
+*图 1：VideoStudio 主界面，展示帧大小分布、GOP 结构和运动矢量叠加*
+
+## 核心功能
+
+### 多编解码器支持
+
+- **H.264/AVC** - 最广泛使用的视频编码标准
+- **H.265/HEVC** - 高效率视频编码
+- **VP9** - Google 开源编码格式
+- **AV1** - 下一代开源编码格式
+- **MPEG-1/2** - 传统广播标准
+
+### 专业可视化
+
+**帧大小分布图**（Frame Size Distribution）：
+- 柱状图显示每帧大小（字节）
+- 颜色区分帧类型：红色=I帧，蓝色=P帧，绿色=B帧
+- 黄色线标记关键帧位置
+- 红色竖线指示当前播放位置
+
+**比特流分布图**（Bitstream Distribution）：
+- 更直观的码率波动展示
+- 清晰显示 I/P/B 帧的周期性模式
+
+### 运动矢量与块分区叠加
+
+- **运动矢量 (Motion Vectors)**：绿色箭头显示宏块的运动方向和幅度
+- **块分区 (Partitions/Blocks)**：黄色网格显示编码块的划分方式
+- **帧类型信息 (Frame Type Info)**：实时显示当前帧类型（I/P/B 帧）
+
+![VideoStudio 比特流视图](/assets/images/2026-05-29/day-109-2.png)
+
+*图 2：比特流分布视图 + 缩略图导航栏*
+
+### GOP 结构可视化
+
+底部面板以缩略图形式展示整个 GOP（图像组）结构：
+- I 帧标记为红色边框
+- P 帧标记为蓝色边框
+- B 帧标记为绿色边框
+- 绿色连线显示参考关系
+
+### 缩略图导航
+
+- 底部缩略图栏快速定位任意帧
+- 当前帧高亮显示
+- 点击即可跳转
+
+## 技术架构
+
+```
+VideoStudio/
+├── src/
+│   ├── main.cpp                # 入口点
+│   ├── mainwindow.h/cpp        # 主窗口
+│   ├── core/                   # 核心引擎
+│   │   ├── videodecoder.h/cpp  # FFmpeg 封装
+│   │   └── framedata.h/cpp     # 数据结构
+│   └── widgets/                # 自定义控件
+│       ├── videooutput.h/cpp   # 视频显示
+│       └── barchart.h/cpp      # 条形图
+├── CMakeLists.txt              # 构建配置
+└── resources/                  # 图标和资源
+```
+
+### 技术栈
+
+| 组件 | 版本 |
+|------|------|
+| Qt | 6.11.0 |
+| FFmpeg | 7.1.1 |
+| CMake | 3.16+ |
+| C++ 标准 | C++17 |
+| 目标平台 | macOS 10.15+ |
+
+## 核心模块解析
+
+### VideoDecoder（视频解码器）
+
+FFmpeg 的 C++ 封装层，负责：
+- 视频文件解封装（demux）
+- 视频解码（decode）
+- 帧元数据提取（PTS, DTS, 类型, 大小, QP值）
+
+### FrameData（帧数据）
+
+存储和管理每一帧的元信息：
+
+```cpp
+struct FrameInfo {
+    int index;          // 帧索引
+    int64_t pts;        // 显示时间戳
+    int64_t dts;        // 解码时间戳
+    FrameType type;     // I/P/B 帧
+    size_t size;        // 帧大小（字节）
+    int qp;             // 量化参数
+};
+```
+
+### BarChart（条形图）
+
+自定义 Qt 控件，实现：
+- 高性能渲染数百帧数据
+- 鼠标悬停显示详细信息
+- 点击跳转到对应帧
+- 支持缩放和平移
+
+### VideoOutput（视频输出）
+
+YUV 到 RGB 转换 + 渲染：
+- 支持 YUV420P, YUV422P, YUV444P
+- 叠加层系统（运动矢量、块边界等）
+- OpenGL 加速渲染
+
+## 构建指南
+
+### 安装依赖
+
+```bash
+# 安装 FFmpeg
+brew install ffmpeg
+
+# 下载 Qt 6.11.0: https://www.qt.io/download
+```
+
+### 编译运行
+
+```bash
+git clone https://github.com/build-your-own-x-with-ai/VideoStudio.git
+cd VideoStudio
+mkdir build && cd build
+cmake .. -DCMAKE_PREFIX_PATH=~/Qt/6.11.0/macos
+cmake --build .
+./VideoStudio.app/Contents/MacOS/VideoStudio
+```
+
+## 使用方法
+
+### 打开视频文件
+
+1. 启动 VideoStudio
+2. 点击 **File → Open** 或按 **Cmd+O**
+3. 选择视频文件（MP4, MKV, AVI, MOV 等）
+4. 视频自动索引并显示第一帧
+
+### 导航控制
+
+| 操作 | 快捷键 | 说明 |
+|------|--------|------|
+| 播放/暂停 | Space | 切换播放状态 |
+| 下一帧 | Alt+Right | 单步前进 |
+| 上一帧 | Alt+Left | 单步后退 |
+| 跳转 | 点击图表 | 跳到指定帧 |
+
+### 视频叠加层
+
+右侧面板可切换显示：
+- ✅ **Motion Vectors (ALT+3)** - 运动矢量箭头
+- ✅ **Partitions/Blocks (ALT+2)** - 编码块划分
+- ✅ **Frame Type Info (ALT+4)** - 帧类型标签
+
+## Stream Info 面板
+
+右侧信息面板实时显示：
+
+| 属性 | 示例值 |
+|------|--------|
+| stream type | H.264 |
+| profile | Main |
+| level / tier | 4.2@L0 |
+| chroma format | 4:2:0 |
+| bitdepth | 8 |
+| resolution | 640 x 360 |
+| frame rate | 60.00 |
+| declared bitrate | Undefined |
+
+## 项目路线图
+
+### v1.0 MVP（已完成 ✅）
+
+- [x] FFmpeg 视频解码
+- [x] 逐帧导航
+- [x] 码率可视化（条形图）
+- [x] 视频播放控制
+- [x] 帧元数据提取
+
+### v1.1（开发中 🚧）
+
+- [ ] 流信息面板增强
+- [ ] 缩略图导航栏
+- [ ] 质量指标（PSNR, SSIM）
+- [ ] 导出 YUV 帧
+
+### v1.2（规划中 📋）
+
+- [ ] 运动矢量叠加
+- [ ] 块/分区可视化
+- [ ] 参考流对比
+- [ ] CSV 指标导出
+
+### v2.0（远期 🔮）
+
+- [ ] VMAF 质量指标
+- [ ] 合规性验证
+- [ ] 缓冲区分析（CPB）
+- [ ] 命令行工具
+- [ ] 插件系统
+
+## 设计灵感
+
+VideoStudio 的设计深受 [Elecard StreamEye](https://www.elecard.com/products/video-analysis/stream-eye) 启发。StreamEye 是业界公认的专业视频分析工具，广泛应用于：
+
+- **编解码器开发** - 调试编码问题
+- **质量评估** - 验证编码参数效果
+- **合规检查** - 确保符合标准规范
+- **教育研究** - 学习视频编码原理
+
+我们的目标是打造一个**开源、跨平台、现代化**的替代方案。
+
+## 关键技术挑战
+
+### 1. 性能优化
+
+处理高分辨率视频时需要高效渲染：
+- 使用 OpenGL 加速图形绘制
+- 帧数据缓存避免重复计算
+- 可视化区域裁剪只渲染可见部分
+
+### 2. 内存管理
+
+长时间分析大文件时的内存控制：
+- 循环缓冲区存储最近帧
+- 按需加载历史帧元数据
+- 智能预读策略平衡响应速度
+
+### 3. UI 响应性
+
+保持界面流畅的同时进行后台解码：
+- 多线程架构：UI线程 + 解码线程
+- 信号槽机制安全通信
+- 进度反馈和取消支持
+
+## 总结
+
+Day 109 完成了 VideoStudio 的核心 MVP 功能：
+
+✅ **完整的视频解码管线**  
+✅ **专业的可视化界面**  
+✅ **多视图切换（帧分布/GOP/缩略图）**  
+✅ **叠加层系统（运动矢量/块分区）**  
+✅ **流信息面板**
+
+下一步将重点开发质量评估功能（PSNR/SSIM/VMAF），让 VideoStudio 成为真正的专业视频分析工具。
+
+---
+
+**项目地址**: [GitHub - VideoStudio](https://github.com/build-your-own-x-with-ai/VideoStudio)  
+**许可证**: MIT  
+**灵感来源**: [Elecard StreamEye](https://www.elecard.com/products/video-analysis/stream-eye)
+
+---
+
+*Build Your Own X With AI - Day 109/365*