---
marp: true
theme: default
size: 16:9
paginate: true
header: "Hightube 开源跨平台个人直播平台"
footer: "Highground-Soft | 中期汇报 (v1.0.0-Beta4.7) | 2026.05.05"
style: |
:root {
--ink: #0f172a;
--muted: #475569;
--soft: #64748b;
--line: rgba(15, 23, 42, 0.10);
--blue: #2563eb;
--cyan: #0891b2;
--gold: #d97706;
--paper: #fffdf8;
--paper-blue: #f4f8ff;
}
section {
position: relative;
padding: 56px 68px 48px;
font-family: 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
font-size: 28px;
line-height: 1.35;
color: var(--ink);
background:
radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 28%),
radial-gradient(circle at bottom left, rgba(8, 145, 178, 0.12), transparent 24%),
linear-gradient(135deg, var(--paper) 0%, #f9fbff 45%, var(--paper-blue) 100%);
}
section::before {
content: "";
position: absolute;
inset: 22px;
border: 1px solid var(--line);
border-radius: 26px;
pointer-events: none;
}
header, footer { color: #64748b; font-size: 13px; letter-spacing: 0.04em; }
h1 { margin: 0 0 14px; font-family: 'Noto Serif CJK SC', 'STSong', serif; font-size: 52px; color: var(--ink); }
h2 { margin: 0 0 14px; font-size: 30px; color: var(--blue); font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 22px; color: var(--ink); font-weight: 700; }
p, ul, ol { margin-top: 0; }
ul, ol { padding-left: 1.15em; }
li { margin: 0 0 6px; }
table { border-collapse: collapse; table-layout: fixed; }
th, td { padding: 5px 8px; vertical-align: top; word-break: break-word; }
strong { color: var(--blue); font-weight: 800; }
.accent { color: var(--blue); font-weight: 800; }
.gold { color: var(--gold); font-weight: 700; }
section.cover {
color: #e8eefc;
background: linear-gradient(135deg, #07111f 0%, #0f1f3d 42%, #1d4ed8 100%);
}
section.cover h1, section.cover h2, section.cover strong { color: #ffffff; }
section.cover .eyebrow { color: rgba(232, 238, 252, 0.78); font-size: 15px; font-weight: 700; letter-spacing: 0.16em; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.card {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 20px;
padding: 20px 22px;
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}
.card.dark { background: rgba(15, 23, 42, 0.05); }
.metric-box { text-align: center; padding: 15px; border-radius: 15px; background: rgba(37, 99, 235, 0.05); }
.metric-value { font-size: 36px; font-weight: 800; color: var(--blue); display: block; }
.metric-label { font-size: 14px; color: var(--soft); }
.tag { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 14px; font-weight: 700; background: rgba(37, 99, 235, 0.1); color: var(--blue); margin-right: 5px; }
.eyebrow { color: var(--soft); font-size: 15px; font-weight: 700; letter-spacing: 0.16em; margin-bottom: 8px; }
.closing { display: grid; place-items: center; height: 80%; text-align: center; }
.closing h1 { font-size: 72px; font-weight: 900; margin-bottom: 8px; color: var(--blue); }
.toc-item { display: flex; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.toc-num { font-size: 32px; font-weight: 900; color: var(--blue); min-width: 56px; }
.toc-text { font-size: 22px; }
.toc-sub { font-size: 15px; color: var(--soft); }
section.compact {
padding: 46px 58px 40px;
font-size: 24px;
line-height: 1.25;
}
section.compact h1 { font-size: 42px; margin-bottom: 10px; }
section.compact h3 { font-size: 19px; margin-bottom: 6px; }
section.compact .card { padding: 14px 16px; border-radius: 16px; }
section.compact .grid-2 { gap: 14px; }
section.compact .grid-3 { gap: 12px; }
section.compact li { margin-bottom: 4px; }
section.compact .tag { font-size: 12px; padding: 3px 8px; }
section.compact p[style],
section.compact ul[style],
section.compact ol[style],
section.compact table[style] { font-size: 14px !important; }
section.toc-slide h1 { font-size: 46px; margin-bottom: 10px; }
section.toc-slide .toc-item { padding: 7px 0; }
section.toc-slide .toc-num { font-size: 27px; min-width: 48px; }
section.toc-slide .toc-text { font-size: 19px; }
section.toc-slide .toc-sub { font-size: 13px; }
section.arch-slide table { font-size: 14px !important; }
section.arch-slide th,
section.arch-slide td { padding: 4px 6px; }
section.challenge-slide table { font-size: 16px; line-height: 1.26; }
section.challenge-slide th,
section.challenge-slide td { padding: 7px 9px; }
section.challenge-slide h1 { margin-bottom: 8px; }
section.plan-slide table { font-size: 14px !important; }
section.plan-slide .card ul { margin-bottom: 0; }
section.showcase-slide .card h3 { color: var(--blue); }
---
Mid-term Progress Report
# Hightube 中期汇报
## 成果与展望：构建私有化直播生态
已实现从推流鉴权、多码率转码到多端互动观看的全链路闭环。
Highground-Soft 团队：程景愉、舒钰权、李俊友、张钊源
当前版本：v1.0.0-Beta4.7 | 项目状态：核心功能 100% 完成
---
# 目录
01
项目背景与目标
为什么做 Hightube？解决什么问题？
07
挑战、计划与演示
踩坑记录、后续规划、现场演示流程
---
# 项目背景与目标
行业痛点
- 平台依赖性强：主流直播平台抽成高、规则不可控，创作者缺乏自主权。
- 隐私风险：私有场景（教育、企业内训）数据流经公有云，存在合规隐患。
- 部署门槛高：RTMP + 转码 + Web 播放整套方案搭建复杂，个人开发者难以驾驭。
Hightube 的答案
- 单二进制部署：Go 编译为单一可执行文件，零依赖启动。
- 全链路闭环：从推流→转码→分发→播放→互动，一气呵成。
- 隐私可控：数据完全私有化，满足内网部署与合规需求。
- 开源生态：MIT 协议，社区可审计、可扩展。
目标：打造一个开箱即用、性能优异、生态开放的私有化个人直播基座。
---
# 中期成果概览：五大功能域
01
用户系统
RBAC 权限控制
Bcrypt 密码哈希
JWT 令牌鉴权
会话管理
02
直播核心
RTMP 推拉流
FFmpeg 多码率转码
定时缩略图抓取
流状态监控
03
实时互动
WebSocket Hub
弹幕遮罩渲染
消息历史持久化
心跳断线重连
04
管理后台
系统监控指标
SSE 实时日志流
用户 CRUD 管理
直播间状态面板
05
前端客户端
Flutter 3.x 跨平台
Windows / Android / iOS / Web
多清晰度无缝切换
累计交付 23 个功能模块，覆盖从注册到直播观看的完整业务生命周期。
---
# 研发数据统计
代码资产分布
| 模块 | 语言 | 源文件 | 行数 |
|---|
| 后端业务逻辑 | Go | 12 | 1,128 |
| 流媒体服务 | Go | 6 | 613 |
| Flutter 跨平台 | Dart | 15 | 2,761 |
| 管理后台 Web | HTML/JS | 5 | 789 |
| 总计 | - | 38 | 5,291 |
18
Go 后端源文件
15
Dart 前端源文件
12s
缩略图抓取间隔
2
转码清晰度档位
4
RESTful API 模块
30+
Git 贡献
4
支持平台数
60fps
弹幕渲染帧率
---
# 系统架构总览
OBS / 移动端推流 → RTMP Server → FFmpeg 转码管线 → Go 业务后端 → Flutter / Web 播放端
流媒体层
| 推流协议 | RTMP (端口 1935) |
| 转码引擎 | FFmpeg 子进程管线 |
| 输出档位 | 1080p 源码 + 720p 转码 |
| Web 分发 | HTTP-FLV (flv.js 播放) |
| 缩略图 | 每 12s 自动截取一帧 |
业务层 (Go)
| HTTP 框架 | Gin — 路由、中间件、CORS |
| 数据库 | SQLite + GORM ORM 抽象 |
| 认证体系 | JWT 签发 + Bcrypt 哈希 |
| 实时通信 | Gorilla WebSocket Hub 模式 |
| 日志推送 | SSE 单向流至管理后台 |
部署方式：Go 编译为单一静态二进制，内嵌 RTMP 模块与前端静态资源，单文件、零依赖即可启动完整服务。
---
# 关键技术突破：流媒体与多端适配
1. 动态转码管线 (FFmpeg)
- 自动触发：检测到推流到达即通过
exec.CommandContext 启动子进程。
- Context 管理：利用 Go
context.Context 树状派生，推流断开时自动 cancel() 级联终止，杜绝僵尸进程。
- 双档位输出：同时输出 Source (原始) 与 720p (转码) 两条流，互不阻塞。
2. 多端播放兼容
- 原生端（Flutter Windows / Android）：直连 RTMP 低延迟流，延迟约 1–2 秒。
- Web 端：通过 HTTP-FLV 重新封装 RTMP 流，前端使用
flv.js 解码播放。
- 清晰度切换：播放器无刷新切换 Source ↔ 720p，体验平滑。
---
# 关键技术突破：推流鉴权与弹幕系统
3. 推流鉴权机制
- RTMP 推流请求携带
stream_key，在 URL 路径级 进行实时校验。
- 数据库验证
StreamKey 有效性与归属，推流路径与播放路径分离。
- 鉴权通过的推流方可触发转码管线；非法推流直接拒绝连接。
4. 高性能弹幕引擎
- 服务端基于 Gorilla WebSocket 实现 Hub 模式：每个直播间一个独立 Room，消息精准广播。
- 客户端使用 Stack + GlobalKey 回收弹幕 Widget，避免频繁创建销毁。
- 支持 5 行轨道并发滚动，心跳检测自动断线重连，稳定保持 60fps。
- 弹幕层包裹
IgnorePointer，不拦截底层视频控制栏触摸事件。
管理工具：自研嵌入式 Web 控制台，通过 SSE 实时推送系统日志与运行指标，无需额外依赖。
---
# 界面展示：跨平台体验亮点
响应式网格
直播间列表采用自适应网格布局，不同屏幕尺寸自动调整列数，保持视觉一致性。
动态缩略图
后端每 12s 自动截取一帧封面，前端定时轮询，用户无需进入即可看到实时画面。
实时状态徽标
"直播中" 角标实时同步房间活跃状态，观众一目了然。
Flutter 跨平台一致性
基于 Flutter 3.x 自绘引擎，Windows / Android / iOS / Web 四端共用一套 UI 代码，平台间视觉偏差 < 5%。
播放器细节
支持横竖屏自动切换、双击暂停、进度条拖拽、亮度/音量手势调节（移动端），清晰度菜单一键切换。
---
# 团队协作与工程化实践
标准协作流程
- API 契约先行：前后端联调前先落定 RESTful 接口文档，消除理解歧义，显著降低集成摩擦。
- Feature Branch 工作流：功能分支 → PR → Code Review → 合并，main 分支始终保持可发布状态。
- 自动化规范：后端强制
gofmt 格式化；前端配置严格 analysis_options.yaml — 拒绝未使用的 import / 变量。
成员与分工
| 程景愉 | 后端核心开发、流媒体架构设计与 FFmpeg 转码管线 |
| 舒钰权 | RESTful API 开发、数据库建模、管理后台 |
| 李俊友 | Flutter 播放器核心、WebSocket 实时互动模块 |
| 张钊源 | 跨平台 UI 适配、Android 端推流联调、项目文档 |
经过 30+ 次审查与合并，形成稳定的迭代节奏。
---
# 遇到的挑战与解决方案
| 挑战 | 问题描述 | 解决方案 | 结果 |
| :--- | :--- | :--- | :---: |
| **RTMP 鉴权** | 默认 RTMP 无认证，任何人可推流 | 路径解析 `stream_key` + 数据库实时验证 | ✅ |
| **FFmpeg 僵尸进程** | 推流断开后子进程未回收，内存泄漏 | `context.Context` 树状管理 + `defer cancel()` | ✅ |
| **Web 端无法播放** | 浏览器不支持 RTMP 直连 | 增加 HTTP-FLV 封装层，前端接入 `flv.js` | ✅ |
| **弹幕拦截触控** | 弹幕层遮挡视频控制栏 | `IgnorePointer` 穿透弹幕层，保留交互 | ✅ |
| **跨平台 UI 偏差** | 不同平台渲染效果不一致 | 统一 Material Design 3 规范 + 响应式断点 | ✅ |
| **SSE 连接泄漏** | 管理后台长时间挂机导致连接堆积 | 引入心跳超时机制 + 客户端自动重连 | ✅ |
---
# 后续计划：迈向 AI 时代
核心创新
AI VTuber 互动引擎
- 对接大语言模型 (LLM)，直播间弹幕自动触发 AI 上下文回复。
- 结合 TTS 语音合成 与 Live2D 虚拟形象，实现无人值守的智能助播。
- 支持自定义角色人设与回复风格，丰富直播内容层。
体验优化
国际化与鲁棒性
- 接入 Flutter ARB 国际化框架，首期中/英双语支持。
- 移动端手势控制：亮度（左半屏）、音量（右半屏）滑动调节。
- 后端补充核心路径单元测试，覆盖率目标 ≥ 70%。
- 引入 Docker 容器化部署，降低运维门槛。
| 里程碑 | 时间 | 交付物 |
|---|
| Beta 4.7 | 2026.05 ✅ | 核心功能 100%，中期汇报 |
| AI 模块初版 | 2026.05 底 | LLM 接口联调 + TTS 集成 |
| v2.0 正式版 | 2026.06 初 | i18n、Docker、AI VTuber、单元测试 |
---
# 演示流程预览
演示主线（约 3 分钟）
- 零配置启动：一条命令启动，服务立即就绪。
- Flutter 端注册：创建账号，自动开通专属直播间。
- OBS 推流：配置 RTMP 地址 + StreamKey，开启 1080p 推流。
- 多端观看：PC / 手机 / 浏览器同时拉流，对比延迟。
- 弹幕互动：移动端发送弹幕，各端实时同步显示。
- 管理后台：SSE 实时日志滚动，指标面板刷新。
演示重点
- 低延迟：RTMP 直连实现秒级观看延迟。
- 平滑切换：Source / 720p 清晰度无刷新切换。
- 实时同步：弹幕、日志、状态多端一致。
- 全链路：从推流到播放，一条命令、零外部依赖。
---
Thank You
感谢聆听
Hightube — 私有化直播基座建设阶段性完成
欢迎老师指正，Q & A
开源地址：https://git.nudt.space/Highground-Soft/Hightube