677 lines
28 KiB
Markdown
677 lines
28 KiB
Markdown
---
|
||
marp: true
|
||
theme: default
|
||
size: 16:9
|
||
paginate: true
|
||
header: "Hightube 开源跨平台个人直播平台最终汇报"
|
||
footer: "Highground-Soft | 验收汇报 (v1.0.1-Release) | 2026.06.29"
|
||
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); }
|
||
---
|
||
|
||
<!-- _class: cover -->
|
||
<!-- _paginate: false -->
|
||
|
||
<div class="eyebrow">Final Project Presentation</div>
|
||
|
||
# Hightube 项目验收汇报
|
||
|
||
## 成果与展望：构建私有化直播生态
|
||
|
||
<p class="lead">已实现从<strong>高并发流引擎、后端性能优化</strong>到<strong>多端自适应拉流与公网部署</strong>的完整闭环。</p>
|
||
|
||
<div style="margin-top: 40px; font-size: 18px;">
|
||
Highground-Soft 团队：程景愉、舒钰权、李俊友、张钊源<br />
|
||
当前版本：<strong>v1.0.1-Release</strong> | 项目状态：已完成公网发布与性能验证
|
||
</div>
|
||
|
||
---
|
||
|
||
<!-- _class: toc-slide -->
|
||
|
||
# 目录
|
||
|
||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap: 12px 32px;">
|
||
|
||
<div class="toc-item">
|
||
<span class="toc-num">01</span>
|
||
<div>
|
||
<span class="toc-text">项目背景与最终目标</span>
|
||
<div class="toc-sub">为什么做 Hightube？解决了什么问题？</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-item">
|
||
<span class="toc-num">02</span>
|
||
<div>
|
||
<span class="toc-text">系统架构与技术选型</span>
|
||
<div class="toc-sub">Go 语言后端与 Flutter 客户端</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-item">
|
||
<span class="toc-num">03</span>
|
||
<div>
|
||
<span class="toc-text">后端性能优化</span>
|
||
<div class="toc-sub">SQLite 调优、内存缓存与 bufio 缓冲</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-item">
|
||
<span class="toc-num">04</span>
|
||
<div>
|
||
<span class="toc-text">网络与公网部署</span>
|
||
<div class="toc-sub">FRP 内网穿透反向隧道与 Caddy 路由</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-item">
|
||
<span class="toc-num">05</span>
|
||
<div>
|
||
<span class="toc-text">系统界面展示与效果</span>
|
||
<div class="toc-sub">公网平台、Web 端追帧及移动客户端</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-item">
|
||
<span class="toc-num">06</span>
|
||
<div>
|
||
<span class="toc-text">开发规范与协作</span>
|
||
<div class="toc-sub">敏捷工程化、许可证合规与分工</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-item">
|
||
<span class="toc-num">07</span>
|
||
<div>
|
||
<span class="toc-text">挑战与未来规划</span>
|
||
<div class="toc-sub">踩坑对策、性能定量分析与下一步</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
# 项目背景与目标
|
||
|
||
<div class="grid-2">
|
||
<div class="card">
|
||
<h3>行业痛点</h3>
|
||
<ul style="font-size:17px;">
|
||
<li><strong>平台依赖性强</strong>：主流直播平台规则限制多，商业抽成高，自主管理性低。</li>
|
||
<li><strong>隐私风险</strong>：内训、会议等私密场景，其敏感音视频流数据流经公有云，存在合规与泄漏隐患。</li>
|
||
<li><strong>部署复杂</strong>：RTMP 接收、编码转码、Web 分发（HTTP-FLV/HLS）和播放器适配链条长，搭建门槛极高。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Hightube 的答案</h3>
|
||
<ul style="font-size:17px;">
|
||
<li><strong>单二进制一键部署</strong>：Go 编译为单一静态文件，自带嵌入式流媒体引擎，零额外软件依赖启动。</li>
|
||
<li><strong>全链路自闭环</strong>：打通推流、鉴权、转码、分发、播放、弹幕全流程。</li>
|
||
<li><strong>私有化与公网穿透</strong>：完美适配内网环境部署，利用反向隧道暴露服务，数据自主可控。</li>
|
||
<li><strong>技术生态开放</strong>：遵循 MIT 协议开源。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="lead" style="margin-top:16px;">目标：打造一个<strong>开箱即用、极速轻量、安全可控</strong>的跨平台私有化直播基座。</p>
|
||
|
||
---
|
||
|
||
<!-- _class: compact arch-slide -->
|
||
<style scoped>
|
||
section { padding: 40px 58px 30px; }
|
||
h1 { margin-bottom: 6px; }
|
||
.card { padding: 12px 16px; }
|
||
table { font-size: 12px !important; }
|
||
td { padding: 3px 5px !important; }
|
||
</style>
|
||
|
||
# 系统架构总览
|
||
|
||
<div style="text-align:center; font-size:14px; color:var(--soft); margin-bottom:8px;">
|
||
OBS 推流 → <strong>RTMP Server</strong> → <strong>FFmpeg 转码管线</strong> → <strong>Go 业务后端</strong> → <strong>Web / 移动端播放</strong>
|
||
</div>
|
||
|
||
<div class="grid-2">
|
||
<div class="card">
|
||
<h3 style="margin-bottom: 4px;">流媒体分发层</h3>
|
||
<table style="width:100%; line-height: 1.2; border-collapse: collapse;">
|
||
<tr><td style="width: 25%;">推流监听</td><td><strong>RTMP 协议</strong> (端口 1935)</td></tr>
|
||
<tr><td>流鉴权</td><td>URL 路径 <code>stream_key</code> 数据库实时匹配</td></tr>
|
||
<tr><td>转码引擎</td><td>FFmpeg 子进程异步管线 (原始/720p/480p)</td></tr>
|
||
<tr><td>Web 分发</td><td><strong>HTTP-FLV</strong> (低延迟 chunked 长连接)</td></tr>
|
||
<tr><td>封面捕获</td><td>定时抓取脚本，每 12s 生成一张房间缩略图</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3 style="margin-bottom: 4px;">应用业务层 (Go)</h3>
|
||
<table style="width:100%; line-height: 1.2; border-collapse: collapse;">
|
||
<tr><td style="width: 25%;">Web 框架</td><td><strong>Gin</strong> — 路由控制、CORS 过滤、健康监测</td></tr>
|
||
<tr><td>ORM / 数据库</td><td><strong>GORM + SQLite</strong> (嵌入式轻量级持久化)</td></tr>
|
||
<tr><td>安全体系</td><td><strong>JWT</strong> 访问令牌 + <strong>Bcrypt</strong> 密码单向哈希</td></tr>
|
||
<tr><td>互动接口</td><td><strong>Gorilla WebSocket</strong> Hub 模式弹幕服务器</td></tr>
|
||
<tr><td>管理后台</td><td>自研 Web 后台，基于 <strong>SSE</strong> 异步日志滚动</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="margin-top: 8px; font-size: 14px; text-align: center; color: var(--muted);"><strong>部署核心</strong>：客户端（Flutter）与服务端（Go）完全分离，结合 Docker 容器化一键部署。</p>
|
||
|
||
---
|
||
|
||
<!-- _class: compact -->
|
||
|
||
# 后端性能优化：三驾马车
|
||
|
||
为了解决直播系统高并发读写下 SQLite 数据库锁死、Socket 写入开销高的问题，设计了三大底层优化：
|
||
|
||
<div class="grid-3">
|
||
<div class="card">
|
||
<h3>1. SQLite 并发调优</h3>
|
||
<ul style="font-size:15px; padding-left:1.0em;">
|
||
<li><strong>WAL 模式开启</strong>：<code>_journal_mode=WAL</code>，读写不互斥，大幅提高并发。</li>
|
||
<li><strong>Pragmas 优化</strong>：<code>synchronous=NORMAL</code> 减半磁盘同步，<code>temp_store=MEMORY</code> 加快临时索引。</li>
|
||
<li><strong>Busy Timeout 降级</strong>：5 秒内退避重试，杜绝 <code>locked</code> 报错。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>2. 内存线程安全缓存</h3>
|
||
<ul style="font-size:15px; padding-left:1.0em;">
|
||
<li><strong>本地 Map 缓存 (cache.go)</strong>：在内存中缓存用户信息和房间映射，避免反复查询 SQL。</li>
|
||
<li><strong>读写锁 RWMutex</strong>：细粒度并发控制，数据写入时同步更新 Cache。</li>
|
||
<li><strong>状态同步</strong>：房间开播直接更新 Cache 状态，大厅轮询零 SQL 负载。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>3. I/O 缓冲与分组 Flush</h3>
|
||
<ul style="font-size:15px; padding-left:1.0em;">
|
||
<li><strong>HTTP-FLV 写入合并</strong>：为 Gin 响应流封装 <code>bufio.NewWriterSize</code> (4KB)。</li>
|
||
<li><strong>系统调用优化</strong>：合并多帧碎包，在一次 TCP Write 中发出，降低内核态上下文切换。</li>
|
||
<li><strong>实时低延迟</strong>：每完成一帧写操作即强制 <code>Flush()</code>，延迟 < 1.5s。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="lead" style="margin-top:14px; text-align: center;">三项调优相辅相成，使单机并发能力在轻量化环境下呈<strong>指数级提升</strong>。</p>
|
||
|
||
---
|
||
|
||
<!-- _class: compact -->
|
||
<style scoped>
|
||
section { padding: 25px 40px 15px; }
|
||
h1 { margin-bottom: 6px; }
|
||
</style>
|
||
|
||
# 项目总体架构
|
||
|
||
<div style="text-align: center; margin-top: -8px; margin-bottom: 4px;">
|
||
<img src="figures/architecture.png" width="1140" style="display:block; margin: 0 auto; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);" />
|
||
</div>
|
||
|
||
<!-- <p style="margin: 0; font-size: 14.5px; text-align: center; color: var(--muted);">利用 <strong>FRP 内网穿透</strong> 与 <strong>Caddy 反向代理</strong>，实现零公网 IP 本地服务器的公网安全暴露。</p> -->
|
||
|
||
---
|
||
|
||
<!-- _class: compact -->
|
||
|
||
# 性能测试结果
|
||
|
||
<style scoped>
|
||
section { padding: 40px 58px 30px; }
|
||
table { font-size: 11px !important; line-height: 1.2; width: 100%; table-layout: fixed; border-collapse: collapse; }
|
||
th, td { padding: 4px 6px !important; }
|
||
</style>
|
||
|
||
<p style="margin: 0 0 8px; font-size: 15px;">通过并发压测与物理测量，后端调优取得了极其显著的性能定量数据：</p>
|
||
|
||
<div class="grid-2">
|
||
<div class="card" style="padding: 12px 16px;">
|
||
<h3 style="margin-bottom: 4px;">SQLite 并发写吞吐量对比 (TPS)</h3>
|
||
<table style="width:100%; table-layout: fixed;">
|
||
<colgroup>
|
||
<col style="width: 28%;">
|
||
<col style="width: 22%;">
|
||
<col style="width: 28%;">
|
||
<col style="width: 22%;">
|
||
</colgroup>
|
||
<tr><th>并发客户端数</th><th>普通模式</th><th>WAL 调优模式</th><th>提升幅度</th></tr>
|
||
<tr><td>1 客户端</td><td>85 tps</td><td>125 tps</td><td>+ 47.1%</td></tr>
|
||
<tr><td>5 并发</td><td>18 tps</td><td>240 tps</td><td>+ 1,233.3%</td></tr>
|
||
<tr><td>10 并发</td><td>9 tps (超时)</td><td><strong>380 tps</strong></td><td><strong>+ 4,122.2%</strong></td></tr>
|
||
</table>
|
||
<p style="font-size: 9.5px; margin-top: 3px; color: var(--soft); margin-bottom: 0;">* WAL 配合同步 NORMAL 与内存 temp_store，彻底消除锁表冲突。</p>
|
||
</div>
|
||
|
||
<div class="card" style="padding: 12px 16px;">
|
||
<h3 style="margin-bottom: 4px;">流媒体播放延迟定量测试 (Latency)</h3>
|
||
<table style="width:100%; table-layout: fixed;">
|
||
<colgroup>
|
||
<col style="width: 32%;">
|
||
<col style="width: 22%;">
|
||
<col style="width: 22%;">
|
||
<col style="width: 24%;">
|
||
</colgroup>
|
||
<tr><th>测试链路</th><th>追帧关闭</th><th>追帧开启</th><th>分析结论</th></tr>
|
||
<tr><td>同网直连 RTMP</td><td>800 ms</td><td>800 ms</td><td>局域网物理延迟极低</td></tr>
|
||
<tr><td>公网 FRP RTMP</td><td>1250 ms</td><td>1250 ms</td><td>中转引入约 450ms 开销</td></tr>
|
||
<tr><td>Web HTTP-FLV</td><td>2600 ms</td><td><strong>1650 ms</strong></td><td>算法介入后降低约 1 秒</td></tr>
|
||
<tr><td>网络抖动积压</td><td>6200 ms</td><td><strong>1700 ms</strong></td><td><strong>15秒内快速平滑收敛</strong></td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
---
|
||
|
||
<!-- _class: compact -->
|
||
<style scoped>
|
||
section { padding: 25px 40px 15px; }
|
||
h1 { margin-bottom: 6px; }
|
||
</style>
|
||
|
||
# 公网部署方案：网络拓扑结构
|
||
|
||
<div style="text-align: center; margin-top: -8px; margin-bottom: 4px;">
|
||
<img src="figures/topo.png" width="1140" style="display:block; margin: 0 auto; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);" />
|
||
</div>
|
||
|
||
<p style="margin: 0; font-size: 14.5px; text-align: center; color: var(--muted);">利用 <strong>FRP 内网穿透</strong> 与 <strong>Caddy 反向代理</strong>，实现零公网 IP 本地服务器的公网安全暴露。</p>
|
||
|
||
---
|
||
|
||
# 公网部署方案：隧道穿透与反向代理
|
||
|
||
<div class="grid-2">
|
||
<div class="card">
|
||
<h3>FRP 反向隧道穿透</h3>
|
||
<ul style="font-size:16px;">
|
||
<li>公网服务器部署 <code>frps</code> (监听 7000)，本地内网机 (<code>100.115.45.3</code>) 部署 <code>frpc</code> 建立长连接。</li>
|
||
<li><strong>映射端口分配</strong>：
|
||
- 本地 80 (Caddy 网页) → 公网 8080
|
||
- 本地 8081 (Go API/FLV) → 公网 8081
|
||
- 本地 1935 (Go RTMP) → 公网 1935
|
||
</li>
|
||
</ul>
|
||
<div style="font-size: 14px; margin-top: 8px; color: var(--soft);">
|
||
<strong>网络开销</strong>：隧道网络穿透增加约 20-50ms RTT 延迟，对流媒体无感知影响。
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Caddy 智能路由与证书管理</h3>
|
||
<ul style="font-size:16px;">
|
||
<li>公网端 Caddy 自动向 Let's Encrypt 申请 SSL 证书，支持 HTTPS 访问。</li>
|
||
<li><strong>路径分发策略</strong>：
|
||
- <code>/api/*</code> 和 <code>/live/*</code> → 转发至本地 8081
|
||
- 默认其他访问 → 转发至本地 8080
|
||
</li>
|
||
<li><strong>本地端静态分发</strong>：本地 Caddy 部署在 80 端口，服务 Flutter 静态编译包。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
---
|
||
|
||
<!-- _class: compact -->
|
||
<style scoped>
|
||
section { padding: 40px 58px 30px; }
|
||
.grid-2 { gap: 16px; }
|
||
.card { padding: 10px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.72); }
|
||
img { width: 100%; height: 185px !important; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); border: 1px solid var(--line); }
|
||
h3 { margin: 8px 0 2px; font-size: 16.5px; color: var(--blue); }
|
||
p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.3; text-align: center; }
|
||
</style>
|
||
|
||
# 界面展示：Web 端平台与播放效果
|
||
|
||
<div class="grid-2">
|
||
<div class="card">
|
||
<img src="figures/hightube-official.png" />
|
||
<div style="text-align: center;">
|
||
<h3>项目主页</h3>
|
||
<p>介绍项目背景、功能与技术栈并提供二进制文件下载</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img src="figures/hightube-screenshot.png" />
|
||
<div style="text-align: center;">
|
||
<h3>网页端直播与弹幕互动</h3>
|
||
<p>flv.js 自适应追帧播放与 WebSocket 弹幕互动</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
---
|
||
|
||
<!-- _class: compact -->
|
||
<style scoped>
|
||
section { padding: 40px 58px 30px; }
|
||
.grid-2 { gap: 16px; }
|
||
.card { padding: 10px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.72); }
|
||
img { width: 100%; height: 185px !important; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); border: 1px solid var(--line); }
|
||
h3 { margin: 8px 0 2px; font-size: 16.5px; color: var(--blue); }
|
||
p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.3; text-align: center; }
|
||
</style>
|
||
|
||
# 界面展示：管理后台与手机端
|
||
|
||
<div class="grid-2">
|
||
<div class="card">
|
||
<img src="figures/hightube-adminpanel.png" />
|
||
<div style="text-align: center;">
|
||
<h3>自研后端管理控制台</h3>
|
||
<p>实时监控系统健康指标、当前并发数与 SSE 异步日志流</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img src="figures/hightube-android.jpg" />
|
||
<div style="text-align: center;">
|
||
<h3>Android 手机客户端</h3>
|
||
<p>Flutter 自绘引擎渲染与低延迟硬解拉流</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
---
|
||
|
||
<!-- _class: compact -->
|
||
<style scoped>
|
||
section { padding: 40px 58px 30px; }
|
||
h1 { margin-bottom: 8px; }
|
||
table { font-size: 11.5px !important; line-height: 1.25; width: 100%; table-layout: fixed; border-collapse: collapse; }
|
||
th, td { padding: 4.5px 6px !important; }
|
||
</style>
|
||
|
||
# 开发规范与团队协作
|
||
|
||
<div class="grid-2">
|
||
<div class="card">
|
||
<h3>工程化协作规范</h3>
|
||
<ul style="font-size:14px; padding-left: 1.1em; line-height: 1.35;">
|
||
<li><strong>契约先行</strong>：前后端联调前先落定 RESTful JSON 接口，极大降低双方联调摩擦。</li>
|
||
<li><strong>Git 分支工作流</strong>：采用特性分支开发，合并须经过 MR 与 Code Review，保持主分支始终可用。</li>
|
||
<li><strong>格式与静态规范</strong>：后端强制执行 <code>gofmt</code> 格式化；前端配置严格 <code>analysis_options.yaml</code> 检查。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>成员分工与交付成果</h3>
|
||
<table style="width: 100%; table-layout: fixed; border-collapse: collapse;">
|
||
<colgroup>
|
||
<col style="width: 24%;">
|
||
<col style="width: 76%;">
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align: left;">成员</th>
|
||
<th style="text-align: left;">核心职责与主要交付成果</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>程景愉</strong></td>
|
||
<td>项目总体管理，前后端核心基础版本设计开发，系统公网隧道穿透与Caddy反向代理分布式部署。</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>舒钰权</strong></td>
|
||
<td>用户登录与个人设置界面开发, 基于 WebSocket 的直播聊天室与弹幕引擎开发，前端弹幕浮层与裁剪区域优化。</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>张钊源</strong></td>
|
||
<td>后端管理面板、服务器运行状态监控（Metrics）、日志收集与历史审计功能等功能开发。</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>李俊友</strong></td>
|
||
<td>后端核心流媒体与业务API架构设计及实现、前端音视频播放与Web适配, 项目介绍网站设计部署。</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
---
|
||
|
||
<!-- _class: compact challenge-slide -->
|
||
<style scoped>
|
||
section { padding: 40px 58px 30px; }
|
||
table { font-size: 13px !important; line-height: 1.25; width: 100%; table-layout: fixed; border-collapse: collapse; }
|
||
th, td { padding: 4px 6px !important; }
|
||
</style>
|
||
|
||
# 遇到的挑战与解决方案
|
||
|
||
<table style="width: 100%; table-layout: fixed; border-collapse: collapse;">
|
||
<colgroup>
|
||
<col style="width: 15%;">
|
||
<col style="width: 32%;">
|
||
<col style="width: 45%;">
|
||
<col style="width: 8%;">
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align: left;">挑战</th>
|
||
<th style="text-align: left;">问题描述</th>
|
||
<th style="text-align: left;">最终解决方案</th>
|
||
<th style="text-align: center;">结果</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>推流安全</strong></td>
|
||
<td>RTMP 默认无校验，极易被恶意盗播</td>
|
||
<td>路径剥离 <code>stream_key</code> 并引入数据库实时鉴权拦截</td>
|
||
<td style="text-align: center;">✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>僵尸转码进程</strong></td>
|
||
<td>直播中断后后台 FFmpeg 挂载无法回收</td>
|
||
<td>树状 <code>context.Context</code> 传导 + 资源 <code>defer cancel()</code></td>
|
||
<td style="text-align: center;">✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Web 直连失败</strong></td>
|
||
<td>浏览器沙箱环境不支持 RTMP 协议</td>
|
||
<td>引入 HTTP-FLV 分块传输流，Web 侧调用 <code>flv.js</code> 解码</td>
|
||
<td style="text-align: center;">✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>缓存延迟累积</strong></td>
|
||
<td>浏览器播放器积压缓冲，延迟越来越高</td>
|
||
<td>编写基于 <code>timeupdate</code> 的 1.15x 倍速追帧及强跳帧算法</td>
|
||
<td style="text-align: center;">✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>轻量数据库锁死</strong></td>
|
||
<td>大量弹幕持久化写入引发 SQLite 独占锁</td>
|
||
<td>开启 <code>WAL</code> 日志模式，调优 synchronous、temp_store</td>
|
||
<td style="text-align: center;">✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>公网资源发布</strong></td>
|
||
<td>本地测试机处于内网且无公网 IP</td>
|
||
<td>建立 <strong>FRP</strong> 穿透，配合公网 <strong>Caddy</strong> 证书自动化路由</td>
|
||
<td style="text-align: center;">✅</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
---
|
||
|
||
# 总结与展望
|
||
|
||
<div class="grid-2">
|
||
<div class="card">
|
||
<h3>项目总结</h3>
|
||
<ul style="font-size:16px;">
|
||
<li><strong>成果完整</strong>：顺利完成了“RTMP推送 → 后台鉴权与 FFmpeg 转码 → HTTP-FLV 封装 → Web / 移动端低延迟拉流播放”的完整流媒体闭环。</li>
|
||
<li><strong>性能优异</strong>：Web 播放器具备自适应追帧，延迟控制在 1.6 秒左右；SQLite 调优后并发能力提升 40 倍。</li>
|
||
<li><strong>规范开源</strong>：项目所有依赖项采用 MIT/BSD/Apache 许可证，Hightube 自身以 MIT 协议开源，无授权冲突风险。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>未来展望</h3>
|
||
<ul style="font-size:16px;">
|
||
<li><strong>低延迟升级</strong>：探索 WebRTC/Whip 协议直播推送与拉流，使端到端延迟控制在 500ms 以内。</li>
|
||
<li><strong>智能转码加速</strong>：引入服务端 GPU/NVENC 硬件加速转码，替代目前的纯 CPU 编码。</li>
|
||
<li><strong>多节点负载均衡</strong>：针对海量用户，设计基于 HTTP 重定向或 Caddy 动态代理的多拉流节点分发网络（CDN）。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
---
|
||
|
||
<!-- _class: compact -->
|
||
|
||
# 演示流程预览
|
||
|
||
<div class="grid-2">
|
||
<div class="card">
|
||
<h3>演示主线 (约 3 分钟)</h3>
|
||
<ol style="font-size:16px;">
|
||
<li><strong>零配置一键启动</strong>：命令行执行 `go run main.go`，服务瞬间部署完毕。</li>
|
||
<li><strong>客户端注册登录</strong>：在手机/网页端注册，后台自动创建并开通专属直播间。</li>
|
||
<li><strong>OBS 推流开播</strong>：拷贝专属 Stream Key，OBS 一键向公网启动直播推送。</li>
|
||
<li><strong>多端拉流对比</strong>：使用手机 App、VLC、网页浏览器同时拉流，展示追帧算法下的同步延迟。</li>
|
||
<li><strong>弹幕实时发送</strong>：观众互动发言，弹幕在各端屏幕上半区平滑滑过。</li>
|
||
<li><strong>管理面板展示</strong>：打开后台监控，查看实时流量负载与 SSE 系统日志滚动。</li>
|
||
</ol>
|
||
</div>
|
||
<div class="card">
|
||
<h3>核心演示亮点</h3>
|
||
<ul style="font-size:17px;">
|
||
<li><strong>低延迟保障</strong>：追帧激活，Web 端画面延迟低至 1.6s。</li>
|
||
<li><strong>多档清晰度</strong>：画面无缝无刷新切换原始/720p/480p。</li>
|
||
<li><strong>公网连通性</strong>：现场利用 <code>https://stream.nudt.space</code> 进行公网拉流。</li>
|
||
<li><strong>高度集成</strong>：单可执行文件，无其他环境污染。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
---
|
||
|
||
<div class="closing">
|
||
<div>
|
||
<p class="eyebrow">Thank You</p>
|
||
<h1>感谢聆听</h1>
|
||
<p style="font-size:24px; margin: 16px 0 8px;"><strong>Hightube</strong> — 开源跨平台个人直播系统项目最终汇报</p>
|
||
<p style="font-size:18px; color: var(--soft); margin: 0 0 24px;">欢迎老师指正，Q & A</p>
|
||
<p style="font-size:16px;">项目介绍地址：<strong>https://hightube.nudt.space</strong></p>
|
||
<p style="font-size:16px;">公网体验地址：<strong>https://stream.nudt.space</strong></p>
|
||
<p style="font-size:16px;">开源仓库地址：<strong>https://github.com/Highground-Soft/Hightube</strong></p>
|
||
</div>
|
||
</div>
|