# video-player-admin

**Repository Path**: chenhaixiao/video-player-admin

## Basic Information

- **Project Name**: video-player-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev_01
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-30
- **Last Updated**: 2026-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 流媒体服务器设置

本指南将帮助您设置流媒体服务器，用于处理 RTSP 流并转换为浏览器可播放的格式。

## 概述

视频监控系统需要处理 RTSP 流（如 IP 摄像头输出），但浏览器不直接支持 RTSP 协议。因此，我们需要一个流媒体服务器来：

1. 接收 RTSP 流
2. 使用 FFmpeg 将其转换为 HLS（HTTP Live Streaming）或 WebRTC 格式
3. 通过 HTTP 提供给前端应用

## 方案选择

### 方案一：使用本地 FFmpeg + Express 服务器

适用于开发环境和小型部署。

### 方案二：使用专业流媒体服务器

适用于生产环境和大规模部署，如：

- Nginx + RTMP 模块
- Wowza Streaming Engine
- Unreal Media Server

## 方案一：本地 FFmpeg + Express 服务器

### 步骤 1：安装 FFmpeg

#### Windows

1. 访问 [FFmpeg 官网](https://ffmpeg.org/download.html)
2. 下载 Windows 构建版本
3. 解压到本地目录
4. 将 FFmpeg 可执行文件路径添加到系统环境变量 `PATH`

#### macOS

```bash
# 使用 Homebrew
brew install ffmpeg
```

#### Linux

```bash
# Ubuntu/Debian
apt update && apt install ffmpeg

# CentOS/RHEL
yum install epel-release
yum install ffmpeg ffmpeg-devel
```

### 步骤 2：创建流媒体服务器

1. 在项目根目录创建 `streaming-server.js` 文件：

```javascript
import express from 'express';
import { spawn } from 'child_process';
import { createWriteStream } from 'fs';
import { mkdirSync, existsSync } from 'fs';

const app = express();
const port = 3001;

// 创建存储目录
const streamDir = './streams';
if (!existsSync(streamDir)) {
  mkdirSync(streamDir, { recursive: true });
}

// 转换 RTSP 流为 HLS
app.get('/stream/:cameraId', (req, res) => {
  const { cameraId } = req.params;
  const rtspUrl = `rtsp://admin:sinomis123@192.168.30.249:554/cam/realmonitor?channel=1&subtype=0`;

  // 确保摄像头目录存在
  const cameraDir = `${streamDir}/${cameraId}`;
  if (!existsSync(cameraDir)) {
    mkdirSync(cameraDir, { recursive: true });
  }

  // FFmpeg 命令
  const ffmpeg = spawn('ffmpeg', [
    '-i',
    rtspUrl,
    '-c:v',
    'libx264',
    '-preset',
    'veryfast',
    '-b:v',
    '1000k',
    '-maxrate',
    '1000k',
    '-bufsize',
    '2000k',
    '-c:a',
    'aac',
    '-b:a',
    '128k',
    '-hls_time',
    '2',
    '-hls_list_size',
    '10',
    '-hls_flags',
    'delete_segments',
    '-f',
    'hls',
    `${cameraDir}/index.m3u8`,
  ]);

  // 处理输出
  ffmpeg.stdout.pipe(createWriteStream(`${cameraDir}/ffmpeg.log`));
  ffmpeg.stderr.pipe(createWriteStream(`${cameraDir}/ffmpeg-error.log`));

  // 错误处理
  ffmpeg.on('error', (err) => {
    console.error('FFmpeg 启动失败:', err);
    res.status(500).send('FFmpeg 启动失败');
  });

  // 退出处理
  ffmpeg.on('exit', (code) => {
    console.log(`FFmpeg 进程退出，代码: ${code}`);
  });

  res.send('流转换已启动');
});

// 提供 HLS 文件
app.use('/hls', express.static(streamDir));

// 健康检查
app.get('/health', (req, res) => {
  res.send('流媒体服务器运行正常');
});

app.listen(port, () => {
  console.log(`流媒体服务器运行在 http://localhost:${port}`);
});
```

2. 创建 `streaming-server-package.json` 文件：

```json
{
  "name": "streaming-server",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "express": "^5.2.1"
  },
  "scripts": {
    "start": "node streaming-server.js"
  }
}
```

3. 安装依赖：

```bash
cd streaming-server
npm install
```

### 步骤 3：启动流媒体服务器

```bash
npm run start
```

服务器将在 `http://localhost:3001` 启动。

### 步骤 4：配置前端应用

在 `VideoMonitor.tsx` 组件中，修改视频源配置：

```typescript
const getVideoSource = () => {
  if (isLive) {
    // 使用 HLS 流
    return {
      src: 'http://localhost:3001/hls/camera1/index.m3u8',
      type: 'application/x-mpegURL',
    };
  } else {
    // 回放视频地址
    return {
      src: 'http://localhost:3001/hls/camera1/index.m3u8',
      type: 'application/x-mpegURL',
    };
  }
};
```

## 方案二：使用公共测试流（开发环境）

如果您没有 IP 摄像头或不想设置完整的流媒体服务器，可以使用公共测试流进行开发和测试。

### 示例公共测试流

```typescript
const getVideoSource = () => {
  if (isLive) {
    // 使用公共测试流
    return {
      src: 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4',
      type: 'video/mp4',
    };
  } else {
    // 回放视频地址
    return {
      src: 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4',
      type: 'video/mp4',
    };
  }
};
```

## 测试流媒体服务器

### 1. 检查服务器状态

```bash
curl http://localhost:3001/health
```

### 2. 启动流转换

```bash
curl http://localhost:3001/stream/camera1
```

### 3. 检查 HLS 文件

访问 `http://localhost:3001/hls/camera1/index.m3u8` 查看是否生成了 HLS 播放列表。

## 故障排除

### 常见问题

#### 1. FFmpeg 未找到

**错误信息**：`spawn ffmpeg ENOENT`

**解决方案**：

- 确认 FFmpeg 已正确安装
- 检查系统环境变量 `PATH` 是否包含 FFmpeg 路径
- 尝试使用绝对路径调用 FFmpeg

#### 2. RTSP 连接失败

**错误信息**：`Connection refused` 或 `No route to host`

**解决方案**：

- 确认 IP 摄像头在线且网络可达
- 检查 RTSP URL 是否正确
- 验证摄像头用户名和密码

#### 3. 视频黑屏或加载失败

**解决方案**：

- 检查浏览器控制台是否有错误
- 确认 HLS 文件生成正常
- 尝试使用不同的浏览器
- 检查网络连接

#### 4. 性能问题

**解决方案**：

- 调整 FFmpeg 编码参数，降低比特率
- 增加服务器资源
- 考虑使用硬件加速编码

## 生产环境建议

1. **使用专业流媒体服务器**：对于生产环境，建议使用成熟的流媒体服务器解决方案。

2. **负载均衡**：对于多摄像头场景，考虑使用负载均衡。

3. **监控和告警**：设置服务器监控和故障告警。

4. **安全措施**：
   - 限制流媒体服务器访问
   - 使用 HTTPS
   - 定期更新密码和认证信息

5. **备份和恢复**：
   - 定期备份配置和录像
   - 建立灾难恢复计划

## 参考资源

- [FFmpeg 官方文档](https://ffmpeg.org/documentation.html)
- [HLS 协议规范](https://developer.apple.com/documentation/http-live-streaming)
- [Express 官方文档](https://expressjs.com/)
- [视频流处理最佳实践](https://www.wowza.com/blog/video-streaming-best-practices)

## 联系我们

如有任何问题或建议，请通过 GitHub Issues 与我们联系。