Trae Video Server

一个基于Electron的专业视频采集和流媒体服务程序，支持实时视频预览和网络流媒体分发。

功能特性

• 🎥 设备管理: 自动检测并列出所有可用的视频采集设备
• 📺 实时预览: 在应用程序内显示选定设备的实时视频画面
• 🌐 流媒体服务: 提供HTTP流媒体服务，支持网页端实时观看
• 🎨 现代UI: 美观的用户界面，支持响应式设计
• ⚡ 高性能: 优化的视频处理和网络传输

系统要求

• Node.js 16.0 或更高版本
• Windows 10/11, macOS 10.14+, 或 Linux
• 至少一个可用的视频采集设备（摄像头）

安装和运行

1. 安装依赖

npm install

2. 启动应用程序

# 生产模式
npm start

# 开发模式（包含开发者工具）
npm run dev

3. 构建可执行文件

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未被占用
   • 验证网络连接状态

调试模式

使用开发模式启动应用以查看详细日志：

npm run dev

许可证

MIT License - 详见 LICENSE 文件

贡献

欢迎提交Issue和Pull Request来改进这个项目。

联系方式

如有问题或建议，请通过以下方式联系：

• 创建GitHub Issue
• 发送邮件至项目维护者

---

Trae Video Server - 专业的视频采集与流媒体解决方案

e7062f2 (首次上传)