zhibo/.kiro/specs/live-streaming-system/tasks.md

Implementation Tasks

Task 1: 项目初始化和 Docker 配置

• 1.1 创建项目根目录结构 (server/, client/, docker/)
• 1.2 创建 package.json 配置后端依赖
• 1.3 创建 SRS 配置文件 (docker/srs/srs.conf)
• 1.4 创建 docker-compose.yml 配置 SRS 和 API 服务
• 1.5 创建 .env.example 环境变量模板

Task 2: 后端 API 服务 - 房间管理

• 2.1 创建 Express 服务入口 (server/index.js)
• 2.2 实现房间数据存储模块 (server/store/roomStore.js)
• 2.3 实现房间 API 路由 (server/routes/rooms.js)
  • GET /api/rooms - 获取所有房间
  • POST /api/rooms - 创建房间
  • GET /api/rooms/:id - 获取单个房间
  • DELETE /api/rooms/:id - 删除房间
• 2.4 实现输入验证中间件 (server/middleware/validate.js)
• 2.5 实现统一错误处理 (server/middleware/errorHandler.js)

Task 3: 后端 API 服务 - SRS 回调处理

• 3.1 实现 SRS 回调路由 (server/routes/srs.js)
  • POST /api/srs/on_publish - 推流开始回调
  • POST /api/srs/on_unpublish - 推流结束回调
• 3.2 实现流地址生成工具 (server/utils/streamUrl.js)
• 3.3 添加回调日志记录

Task 4: 前端 - 项目搭建和基础组件

• 4.1 初始化 React 项目 (client/)
• 4.2 安装依赖 (flv.js, hls.js, axios)
• 4.3 创建 API 服务封装 (client/src/services/api.js)
• 4.4 创建全局样式 (client/src/index.css)
• 4.5 创建 App 入口和路由 (client/src/App.jsx)

Task 5: 前端 - 房间列表页面

• 5.1 创建 RoomCard 组件 (client/src/components/RoomCard.jsx)
• 5.2 创建 RoomList 组件 (client/src/components/RoomList.jsx)
• 5.3 创建 HomePage 页面 (client/src/pages/HomePage.jsx)
• 5.4 实现房间列表自动刷新

Task 6: 前端 - 创建直播间功能

• 6.1 创建 CreateRoom 弹窗组件 (client/src/components/CreateRoom.jsx)
• 6.2 创建 StreamInfo 推流信息组件 (client/src/components/StreamInfo.jsx)
• 6.3 实现复制推流地址功能

Task 7: 前端 - 直播播放器

• 7.1 创建 LivePlayer 组件 (client/src/components/LivePlayer.jsx)
• 7.2 实现 flv.js 播放器集成 (HTTP-FLV 低延迟)
• 7.3 实现 hls.js 降级播放 (HLS 兼容性)
• 7.4 实现播放器自动重连机制
• 7.5 创建 RoomPage 直播间页面 (client/src/pages/RoomPage.jsx)

Task 8: 集成测试和部署

• 8.1 编写属性测试 (server/tests/room.property.test.js)
• 8.2 编写 API 集成测试 (server/tests/api.test.js)
• 8.3 创建启动脚本 (scripts/start.sh, scripts/start.bat)
• 8.4 编写 README.md 使用文档
• 8.5 测试完整推流和观看流程