# rtmp

**Repository Path**: lwfxzz/rtmp

## Basic Information

- **Project Name**: rtmp
- **Description**: demo---基于 RTMP 协议的在线直播课堂系统，支持实时视频直播和课堂互动。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-07
- **Last Updated**: 2025-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 在线直播课堂系统

基于 RTMP 协议的在线直播课堂系统，支持实时视频直播和课堂互动。

## 技术栈

- 前端：React + Vite + Material-UI
- 后端：Node.js + Express + Socket.IO
- 流媒体：Node-Media-Server (RTMP服务器)
- 视频播放：flv.js

## 系统架构

```
                   ┌─────────────────┐
                   │     OBS推流     │
                   └────────┬────────┘
                           │ RTMP
                           ▼
┌────────────────┐   ┌──────────────┐   ┌────────────────┐
│   Express服务器 │   │  RTMP服务器  │   │   前端应用     │
│  (WebSocket)   │◄──┤    (直播)    │◄──┤  (React+Vite)  │
└────────┬───────┘   └──────────────┘   └────────────────┘
         │                  │                     ▲
         │                  │ HTTP-FLV            │
         └──────────────────┴─────────────────────┘
                     实时通信
```

## 核心功能

1. 视频直播
   - RTMP推流（教师端）
   - HTTP-FLV拉流（学生端）
   - 实时视频播放

2. 实时互动
   - 课堂聊天
   - 学生举手功能
   - 教师控制面板

## 实现原理

### 1. RTMP服务器 (server/rtmpServer.js)

使用 Node-Media-Server 实现 RTMP 服务器：
- 接收 RTMP 推流（端口1935）
- 转换为 HTTP-FLV 流（端口8000）
- 支持多客户端并发观看

```javascript
const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 30,
    ping_timeout: 60
  },
  http: {
    port: 8000,
    allow_origin: '*'
  }
};
```

### 2. WebSocket服务器 (server/server.js)

使用 Express + Socket.IO 实现实时通信：
- 处理课堂聊天消息
- 处理学生举手信号
- 维护用户连接状态

### 3. 前端应用

#### 3.1 视频播放器组件 (src/components/VideoPlayer.jsx)

使用 flv.js 实现 HTTP-FLV 视频播放：
- 自动检测浏览器兼容性
- 支持实时流播放
- 自动重连机制

```javascript
flvPlayerRef.current = flv.createPlayer({
  type: 'flv',
  url: import.meta.env.VITE_STREAM_URL,
  isLive: true,
  hasAudio: true,
  hasVideo: true
});
```

#### 3.2 聊天室组件 (src/components/ChatRoom.jsx)

实现实时聊天功能：
- 发送/接收消息
- 显示用户身份（教师/学生）
- 举手功能

## 环境配置

### 开发环境 (.env.development)

```
VITE_WEBSOCKET_URL=http://192.168.31.169:3000
VITE_STREAM_URL=http://192.168.31.169:8000/live/stream.flv
VITE_WS_PATH=/socket.io
```

### 生产环境 (.env.production)

```
VITE_WEBSOCKET_URL=https://your-production-domain.com
VITE_STREAM_URL=https://your-production-domain.com/live/stream.flv
VITE_WS_PATH=/socket.io
```

## 部署流程

1. 安装依赖
```bash
pnpm install
```

2. 开发环境运行
```bash
# 启动RTMP服务器
pnpm run start:rtmp

# 启动WebSocket服务器
pnpm run start:server

# 启动前端开发服务器
pnpm run dev
```

3. 生产环境构建
```bash
pnpm run build
```

## 推流配置

使用 OBS Studio 进行推流：
1. 设置 -> 推流
2. 服务器：rtmp://localhost:1935/live
3. 串流密钥：stream

## 注意事项

1. 网络配置
   - 确保防火墙允许相关端口（1935, 3000, 8000）
   - 配置正确的服务器IP地址

2. 浏览器兼容性
   - 推荐使用 Chrome 或 Firefox 最新版本
   - 确保浏览器支持 MSE (Media Source Extensions)

3. 性能优化
   - RTMP 服务器配置了 GOP 缓存
   - WebSocket 使用二进制传输和压缩
   - 视频播放器启用硬件加速

## 扩展功能

1. 录制回放
   - 支持直播内容录制
   - 提供回放功能

2. 屏幕共享
   - 支持教师分享屏幕
   - 支持教学课件展示

3. 用户管理
   - 用户身份认证
   - 权限控制系统

## 故障排除

1. 视频播放问题
   - 检查 RTMP 推流状态
   - 验证网络连接
   - 查看浏览器控制台错误

2. 实时通信问题
   - 检查 WebSocket 连接状态
   - 验证服务器配置
   - 检查防火墙设置 

## 技术实现详解

### 1. 前端架构

#### 1.1 状态管理
```javascript
// App.jsx 中的状态管理
const [messages, setMessages] = useState([]);
const [students, setStudents] = useState([]);
const [isTeacher, setIsTeacher] = useState(false);
```

#### 1.2 组件通信
- 使用 Socket.IO 进行实时数据同步
- 采用 Props 传递回调函数
- 使用自定义事件处理复杂交互

### 2. 后端架构

#### 2.1 Express 中间件配置
```javascript
app.use(cors());
app.use(express.json());
app.use(express.static('dist'));
```

#### 2.2 Socket.IO 事件处理
```javascript
io.on('connection', (socket) => {
  // 用户加入
  socket.on('join', handleJoin);
  
  // 发送消息
  socket.on('message', handleMessage);
  
  // 举手请求
  socket.on('raiseHand', handleRaiseHand);
});
```

## 性能优化指南

### 1. 前端优化

1. 代码分割
```javascript
// 路由级别的代码分割
const ChatRoom = React.lazy(() => import('./components/ChatRoom'));
const VideoPlayer = React.lazy(() => import('./components/VideoPlayer'));
```

2. 资源优化
- 使用 HTTP/2 多路复用
- 启用 Gzip/Brotli 压缩
- 使用 CDN 加速静态资源

3. 渲染优化
- 使用 React.memo() 避免不必要的重渲染
- 实现虚拟列表优化长消息列表
- 使用 Web Workers 处理复杂计算

### 2. 后端优化

1. 内存管理
```javascript
const server = http.createServer(app);
server.keepAliveTimeout = 65000;
server.headersTimeout = 66000;
```

2. 连接优化
- 使用连接池管理 WebSocket 连接
- 实现断线重连机制
- 心跳检测保持连接活跃

## 安全性考虑

### 1. WebSocket 安全
- 实现身份验证和授权
- 防止 XSS 攻击
- 限制消息大小和频率

### 2. RTMP 安全
```javascript
const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 30,
    ping_timeout: 60,
    auth: {
      play: true,
      publish: true,
      secret: 'your-secret-key'
    }
  }
};
```

### 3. 数据安全
- 使用 HTTPS/WSS 加密传输
- 实现 Rate Limiting
- 输入验证和消毒

## 开发环境搭建

### 1. 必要软件
- Node.js >= 14
- pnpm >= 6
- OBS Studio
- Visual Studio Code

### 2. 推荐的 VS Code 插件
- ESLint
- Prettier
- React Developer Tools
- Socket.IO Client Tool

### 3. 开发流程
1. 克隆项目
```bash
git clone <repository-url>
cd online-classroom
```

2. 安装依赖
```bash
pnpm install
```

3. 创建环境配置文件
```bash
cp .env.example .env.development
```

4. 启动开发服务器
```bash
pnpm start
```

## 监控和日志

### 1. 日志配置
```javascript
const winston = require('winston');
const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    new winston.transports.File({ filename: 'error.log', level: 'error' }),
    new winston.transports.File({ filename: 'combined.log' })
  ]
});
```

### 2. 性能监控
- 使用 Node.js 内置性能 API
- 集成 Prometheus + Grafana
- 实现自定义指标收集

### 3. 错误追踪
- 前端错误捕获
- WebSocket 连接监控
- RTMP 流状态监控

## 测试指南

### 1. 单元测试
```javascript
describe('ChatRoom Component', () => {
  it('should send message correctly', () => {
    // 测试代码
  });
  
  it('should handle raise hand event', () => {
    // 测试代码
  });
});
```

### 2. 集成测试
- WebSocket 连接测试
- RTMP 推流测试
- 浏览器兼容性测试

### 3. 负载测试
- 模拟多用户并发
- 网络延迟测试
- 资源占用监控 

## 部署指南

### 1. 服务器要求
- CPU: 2核心以上
- 内存: 4GB以上
- 系统: Ubuntu 20.04 LTS
- 带宽: 10Mbps以上

### 2. Docker部署
```dockerfile
# Dockerfile
FROM node:16-alpine

WORKDIR /app

COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install

COPY . .
RUN pnpm build

EXPOSE 1935 3000 8000

CMD ["pnpm", "start"]
```

```yaml
# docker-compose.yml
version: '3.8'
services:
  app:
    build: .
    ports:
      - "1935:1935"
      - "3000:3000"
      - "8000:8000"
    environment:
      - NODE_ENV=production
    volumes:
      - ./logs:/app/logs
```

### 3. Nginx配置
```nginx
# nginx.conf
http {
    upstream websocket {
        server 127.0.0.1:3000;
        keepalive 32;
    }

    server {
        listen 80;
        server_name your-domain.com;

        location / {
            proxy_pass http://127.0.0.1:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }

        location /live {
            proxy_pass http://127.0.0.1:8000;
            proxy_http_version 1.1;
            proxy_set_header Host $host;
        }
    }
}
```

## CI/CD配置

### 1. GitHub Actions
```yaml
# .github/workflows/main.yml
name: CI/CD

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install pnpm
        run: npm install -g pnpm
        
      - name: Install dependencies
        run: pnpm install
        
      - name: Run tests
        run: pnpm test
        
      - name: Build
        run: pnpm build
```

### 2. 自动化部署脚本
```bash
#!/bin/bash
# deploy.sh

echo "开始部署..."

# 拉取最新代码
git pull origin main

# 安装依赖
pnpm install

# 构建项目
pnpm build

# 重启服务
pm2 restart ecosystem.config.js

echo "部署完成!"
```

## 项目规范

### 1. 代码风格
```javascript
// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    'indent': ['error', 2],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always']
  }
};
```

### 2. Git提交规范
```
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 重构代码
test: 测试相关
chore: 构建过程或辅助工具的变动
```

### 3. 项目结构
```
src/
├── components/       # React组件
├── hooks/           # 自定义Hooks
├── services/        # API服务
├── utils/           # 工具函数
├── styles/          # 样式文件
└── types/           # TypeScript类型定义

server/
├── controllers/     # 控制器
├── middleware/      # 中间件
├── models/          # 数据模型
└── utils/           # 工具函数
```

## API文档

### 1. WebSocket事件

#### 1.1 客户端事件
```typescript
interface ClientEvents {
  // 加入课堂
  join: (data: { username: string; role: 'teacher' | 'student' }) => void;
  
  // 发送消息
  message: (data: { content: string; type: 'text' | 'image' }) => void;
  
  // 举手
  raiseHand: () => void;
}
```

#### 1.2 服务器事件
```typescript
interface ServerEvents {
  // 用户加入通知
  userJoined: (data: { username: string; role: string }) => void;
  
  // 新消息通知
  newMessage: (data: { 
    id: string;
    username: string;
    content: string;
    type: string;
    timestamp: number;
  }) => void;
  
  // 举手通知
  handRaised: (data: { username: string }) => void;
}
```

### 2. RTMP API

#### 2.1 推流地址
```
rtmp://<server-ip>:1935/live/<stream-key>
```

#### 2.2 拉流地址
```
http://<server-ip>:8000/live/<stream-key>.flv
```

### 3. HTTP API

#### 3.1 获取在线用户
```
GET /api/users
Response:
{
  "code": 0,
  "data": {
    "users": [
      {
        "id": "user-id",
        "username": "张三",
        "role": "student",
        "status": "online"
      }
    ]
  }
}
```

#### 3.2 获取聊天记录
```
GET /api/messages
Query: {
  limit: number;
  offset: number;
}
Response:
{
  "code": 0,
  "data": {
    "messages": [
      {
        "id": "msg-id",
        "username": "张三",
        "content": "消息内容",
        "type": "text",
        "timestamp": 1678234567890
      }
    ],
    "total": 100
  }
}
```

## 常见问题解答

### 1. 视频延迟问题
- 检查网络带宽
- 调整 RTMP 缓冲区大小
- 优化视频编码参数

### 2. 内存占用过高
- 检查内存泄漏
- 优化资源释放
- 调整Node.js内存限制

### 3. WebSocket连接断开
- 实现重连机制
- 检查心跳超时设置
- 优化负载均衡配置