170 lines
4.0 KiB
Markdown
170 lines
4.0 KiB
Markdown
<<<<<<< HEAD
|
||
# traepro-videoserver
|
||
|
||
=======
|
||
# Trae Video Server
|
||
|
||
一个基于Electron的专业视频采集和流媒体服务程序，支持实时视频预览和网络流媒体分发。
|
||
|
||
## 功能特性
|
||
|
||
- 🎥 **设备管理**: 自动检测并列出所有可用的视频采集设备
|
||
- 📺 **实时预览**: 在应用程序内显示选定设备的实时视频画面
|
||
- 🌐 **流媒体服务**: 提供HTTP流媒体服务，支持网页端实时观看
|
||
- 🎨 **现代UI**: 美观的用户界面，支持响应式设计
|
||
- ⚡ **高性能**: 优化的视频处理和网络传输
|
||
|
||
## 系统要求
|
||
|
||
- Node.js 16.0 或更高版本
|
||
- Windows 10/11, macOS 10.14+, 或 Linux
|
||
- 至少一个可用的视频采集设备（摄像头）
|
||
|
||
## 安装和运行
|
||
|
||
### 1. 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 2. 启动应用程序
|
||
|
||
```bash
|
||
# 生产模式
|
||
npm start
|
||
|
||
# 开发模式（包含开发者工具）
|
||
npm run dev
|
||
```
|
||
|
||
### 3. 构建可执行文件
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
## 使用说明
|
||
|
||
### 主要功能
|
||
|
||
1. **设备选择**
|
||
- 启动应用后，程序会自动检测所有可用的视频设备
|
||
- 在下拉菜单中选择要使用的摄像头
|
||
- 点击"刷新设备"按钮可重新扫描设备
|
||
|
||
2. **开始预览**
|
||
- 选择设备后，点击"开始预览"按钮
|
||
- 应用程序下方会显示实时视频画面
|
||
- 同时启动流媒体服务器
|
||
|
||
3. **网络流媒体**
|
||
- 预览启动后，可通过 `http://localhost:3000/preview` 访问网页版预览
|
||
- 其他设备可通过网络访问此地址观看实时视频
|
||
- 支持多客户端同时连接
|
||
|
||
4. **停止预览**
|
||
- 点击"停止预览"按钮结束视频采集
|
||
- 自动释放设备资源和网络连接
|
||
|
||
### 网络访问
|
||
|
||
流媒体服务默认运行在端口3000上，提供以下接口：
|
||
|
||
- **网页预览**: `http://localhost:3000/preview`
|
||
- **Socket.IO连接**: 用于实时视频帧传输
|
||
|
||
## 技术架构
|
||
|
||
### 核心技术栈
|
||
|
||
- **Electron**: 跨平台桌面应用框架
|
||
- **Express**: Web服务器框架
|
||
- **Socket.IO**: 实时双向通信
|
||
- **WebRTC**: 视频采集和处理
|
||
- **HTML5 Canvas**: 视频帧处理
|
||
|
||
### 项目结构
|
||
|
||
```
|
||
trae-video-server/
|
||
├── main.js # Electron主进程
|
||
├── index.html # 主界面
|
||
├── package.json # 项目配置
|
||
├── assets/ # 资源文件
|
||
│ └── icon.svg # 应用图标
|
||
├── public/ # 静态资源
|
||
│ └── preview.html # 网页预览界面
|
||
└── README.md # 项目文档
|
||
```
|
||
|
||
### 工作流程
|
||
|
||
1. **设备检测**: 使用 `navigator.mediaDevices.enumerateDevices()` 获取设备列表
|
||
2. **视频采集**: 通过 `getUserMedia()` API 获取视频流
|
||
3. **帧处理**: 使用Canvas将视频帧转换为图像数据
|
||
4. **网络传输**: 通过Socket.IO将帧数据广播给所有连接的客户端
|
||
5. **实时显示**: 客户端接收帧数据并实时更新显示
|
||
|
||
## 配置选项
|
||
|
||
### 视频参数
|
||
|
||
默认视频配置（可在代码中修改）：
|
||
- 分辨率: 1280x720
|
||
- 帧率: 30 FPS（网络传输）
|
||
- 图像格式: JPEG
|
||
- 压缩质量: 80%
|
||
|
||
### 网络配置
|
||
|
||
- 默认端口: 3000
|
||
- CORS: 允许所有来源
|
||
- Socket.IO: 支持跨域连接
|
||
|
||
## 故障排除
|
||
|
||
### 常见问题
|
||
|
||
1. **设备检测失败**
|
||
- 确保摄像头已正确连接
|
||
- 检查设备权限设置
|
||
- 重启应用程序
|
||
|
||
2. **预览无法启动**
|
||
- 确保设备未被其他应用占用
|
||
- 检查浏览器权限设置
|
||
- 尝试选择不同的设备
|
||
|
||
3. **网络连接问题**
|
||
- 检查防火墙设置
|
||
- 确保端口3000未被占用
|
||
- 验证网络连接状态
|
||
|
||
### 调试模式
|
||
|
||
使用开发模式启动应用以查看详细日志：
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
## 许可证
|
||
|
||
MIT License - 详见 LICENSE 文件
|
||
|
||
## 贡献
|
||
|
||
欢迎提交Issue和Pull Request来改进这个项目。
|
||
|
||
## 联系方式
|
||
|
||
如有问题或建议，请通过以下方式联系：
|
||
- 创建GitHub Issue
|
||
- 发送邮件至项目维护者
|
||
|
||
---
|
||
|
||
**Trae Video Server** - 专业的视频采集与流媒体解决方案
|
||
>>>>>>> e7062f2 (首次上传)
|