vibe-coding-cn/tg-live-game/discuss-2024-12-31.md

TG Live Game 开发讨论记录

2024-12-31

今日目标

快速搭建 POC 验证：Mac 摄像头 → Cloudflare Stream → Web 播放

---

项目分析

现有三个项目

项目	路径	技术栈	功能
tg-live-game-hono	/frontend/tg-live-game/	Hono + Cloudflare Workers	后端 API 服务
tg-live-game-stream-service	/frontend/tg-live-game/	Bash + FFmpeg	推流脚本
tg-live-game-web	/frontend/tg-live-game/	Vue 3 + TypeScript	前端应用

最终目标架构

IP摄像头 ──RTSP──> FFmpeg ──WHIP──> Cloudflare Stream ──WHEP──> 浏览器
                     ↑
                Java进程管理

---

POC 验证步骤

Step 1: 创建 Cloudflare Live Input ✅

• 登录 Cloudflare Dashboard
• 进入 Stream → 实时输入 → 创建
• 获取推流信息：
  • Live Input ID: 3c1ae1949e76f200feef94b8f7d093ca
  • 名称: weathered-limit-6442
  • RTMPS URL: rtmps://live.cloudflare.com:443/live/
  • Stream Key: a6ab89289f20807d84b56bbb899f296ek3c1ae1949e76f200feef94b8f7d093ca

Step 2: 配置推流服务 ✅

• 创建 config/stream.env 配置文件
• 填入 RTMP_URL 和 STREAM_KEY

Step 3: 开始推流 ✅

cd /Users/yibu/dev_workspace/frontend/tg-live-game/tg-live-game-stream-service
./scripts/stream-camera.sh

• 推流成功，码率 1.6 Mbit/s，帧率 29.75 FPS

Step 4: 验证播放 ✅

• Cloudflare iframe 播放成功
• 播放地址: https://customer-pj89kn2ke2tcuh19.cloudflarestream.com/3c1ae1949e76f200feef94b8f7d093ca/iframe

---

讨论决策

1. Canvas 驱动开发

• 使用 Obsidian Canvas 可视化项目架构
• AI 根据 Canvas 进行编码协作
• 每天更新一个版本

2. 文件组织

Canvas 和讨论记录统一放在：

/Users/yibu/dev_workspace/vibe-coding-cn/tg-live-game/
├── architecture-v1.canvas      # 架构图 v1
├── rtsp-cloudflare-stream.canvas  # 方案图
├── discuss-2024-12-31.md       # 今日讨论
└── discuss-YYYY-MM-DD.md       # 后续讨论

---

下一步计划

短期（v2）

• 接入 Web 项目的 stream-test 页面
• 启动 hono 后端服务
• 通过 API 管理直播

中期（v3）

• RTSP 输入支持（接入 IP 摄像头）
• WHIP 输出支持（需要 FFmpeg 6.1+）
• Java 进程管理服务

长期

• 多路流管理
• 自动重连机制
• 监控告警系统

---

相关资源

• Cloudflare 账户 ID: 5544eac7cfb260d4fec9467d49513cea
• 客户子域: customer-pj89kn2ke2tcuh19.cloudflarestream.com
• HLS 播放地址: https://customer-pj89kn2ke2tcuh19.cloudflarestream.com/{video_id}/manifest/video.m3u8

---

备注

• POC 验证成功，整个链路已跑通
• Web 项目登录功能需要后端服务支持，暂时用 stream-test 页面测试