ert/traepro-videoserver

Fork 0

Files

ERT 8a45d9dca3 首次上传

2025-07-24 22:55:21 +08:00

4.0 KiB

Raw Blame History

<<<<<<< HEAD

traepro-videoserver

=======

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

使用说明

主要功能

设备选择
- 启动应用后，程序会自动检测所有可用的视频设备
- 在下拉菜单中选择要使用的摄像头
- 点击"刷新设备"按钮可重新扫描设备
开始预览
- 选择设备后，点击"开始预览"按钮
- 应用程序下方会显示实时视频画面
- 同时启动流媒体服务器
网络流媒体
- 预览启动后，可通过 http://localhost:3000/preview 访问网页版预览
- 其他设备可通过网络访问此地址观看实时视频
- 支持多客户端同时连接
停止预览
- 点击"停止预览"按钮结束视频采集
- 自动释放设备资源和网络连接

网络访问

流媒体服务默认运行在端口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           # 项目文档

工作流程

设备检测: 使用 navigator.mediaDevices.enumerateDevices() 获取设备列表
视频采集: 通过 getUserMedia() API 获取视频流
帧处理: 使用Canvas将视频帧转换为图像数据
网络传输: 通过Socket.IO将帧数据广播给所有连接的客户端
实时显示: 客户端接收帧数据并实时更新显示

配置选项

视频参数

默认视频配置（可在代码中修改）：

分辨率: 1280x720
帧率: 30 FPS（网络传输）
图像格式: JPEG
压缩质量: 80%

网络配置

默认端口: 3000
CORS: 允许所有来源
Socket.IO: 支持跨域连接

故障排除

常见问题

设备检测失败
- 确保摄像头已正确连接
- 检查设备权限设置
- 重启应用程序
预览无法启动
- 确保设备未被其他应用占用
- 检查浏览器权限设置
- 尝试选择不同的设备
网络连接问题
- 检查防火墙设置
- 确保端口3000未被占用
- 验证网络连接状态

调试模式

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

npm run dev

许可证

MIT License - 详见 LICENSE 文件

贡献

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

联系方式

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

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

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

e7062f2 (首次上传)

4.0 KiB Raw Blame History Unescape Escape