288 lines
6.3 KiB
Markdown
288 lines
6.3 KiB
Markdown
# 视频播放器端
|
||
|
||
基于 Nuxt 4 + Tauri 2 的桌面视频播放器，支持远程控制。
|
||
|
||
## 功能特点
|
||
|
||
- 🎥 **全屏视频播放**：双击启动后立刻全屏显示
|
||
- 🎮 **远程控制**：通过WebSocket接收控制端命令
|
||
- 📡 **自动连接**：启动后自动尝试连接控制端
|
||
- 🔄 **断线重连**：连接断开后自动重试
|
||
- ⚙️ **配置灵活**：支持配置文件自定义设置
|
||
|
||
## 架构说明
|
||
|
||
- **前端**：Nuxt 4 + Vue 3 + Tailwind CSS + Nuxt UI
|
||
- **后端**：Tauri 2 + Rust + WebSocket服务器
|
||
- **通信协议**：WebSocket (端口8080)
|
||
- **API文档**：详见 `API.md`
|
||
|
||
## 开发环境设置
|
||
|
||
### 前置要求
|
||
|
||
1. **Node.js** >= 23
|
||
2. **Rust** 开发环境
|
||
```bash
|
||
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
|
||
source ~/.cargo/env
|
||
```
|
||
3. **pnpm** 包管理器
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
# 启动完整应用（前端 + Tauri）
|
||
pnpm tauri:dev
|
||
|
||
# 仅前端开发
|
||
pnpm dev
|
||
|
||
# 检查Rust代码
|
||
cd src-tauri && cargo check
|
||
```
|
||
|
||
### 构建部署
|
||
|
||
```bash
|
||
# 构建桌面应用
|
||
pnpm tauri:build
|
||
|
||
# 构建调试版本
|
||
pnpm tauri:build:debug
|
||
|
||
# 构建前端静态文件
|
||
pnpm generate
|
||
```
|
||
|
||
## 配置文件
|
||
|
||
项目根目录的 `player_config.json`：
|
||
|
||
```json
|
||
{
|
||
"connection": {
|
||
"controller_host": "127.0.0.1",
|
||
"controller_port": 8081,
|
||
"websocket_port": 8080,
|
||
"auto_connect": true,
|
||
"reconnect_interval": 5000,
|
||
"connection_timeout": 10000
|
||
},
|
||
"player": {
|
||
"auto_fullscreen": true,
|
||
"default_volume": 50,
|
||
"loop_enabled": false,
|
||
"show_controls": false
|
||
},
|
||
"debug": {
|
||
"log_level": "info",
|
||
"show_debug_info": true
|
||
}
|
||
}
|
||
```
|
||
|
||
## 功能实现
|
||
|
||
### ✅ 已完成功能
|
||
|
||
1. **前端界面**
|
||
- 全屏播放器界面
|
||
- 连接状态显示
|
||
- 等待画面和状态信息
|
||
- 键盘快捷键支持
|
||
|
||
2. **后端WebSocket服务**
|
||
- WebSocket服务器（端口8080）
|
||
- 接收控制端连接
|
||
- 处理播放控制命令
|
||
- 状态同步机制
|
||
|
||
3. **核心播放功能**
|
||
- 视频加载和播放
|
||
- 播放/暂停/停止控制
|
||
- 音量调节
|
||
- 进度跳转
|
||
- 循环播放
|
||
- 全屏切换
|
||
|
||
4. **Tauri命令API**
|
||
- `get_player_state` - 获取播放器状态
|
||
- `load_video` - 加载视频文件
|
||
- `play_video` - 播放视频
|
||
- `pause_video` - 暂停播放
|
||
- `stop_video` - 停止播放
|
||
- `seek_video` - 跳转播放位置
|
||
- `set_volume` - 设置音量
|
||
- `set_loop` - 设置循环播放
|
||
- `toggle_fullscreen` - 切换全屏
|
||
|
||
### 🔄 后续扩展
|
||
|
||
1. **配置文件读取**：从配置文件加载连接设置
|
||
2. **自动连接重试**：实现更完善的重连机制
|
||
3. **视频格式支持**：扩展更多视频格式支持
|
||
4. **播放列表**：完善播放列表功能
|
||
5. **定时播放**：添加定时播放功能
|
||
|
||
## WebSocket API
|
||
|
||
播放器作为WebSocket服务端，监听端口8080，接收控制端发送的命令：
|
||
|
||
### 连接地址
|
||
```
|
||
ws://127.0.0.1:8080/ws
|
||
```
|
||
|
||
### 消息格式
|
||
```json
|
||
{
|
||
"type": "command",
|
||
"data": {
|
||
"type": "play|pause|stop|seek|setVolume|setLoop|toggleFullscreen|loadVideo",
|
||
"position": 60.5, // seek时使用
|
||
"volume": 75.0, // setVolume时使用
|
||
"enabled": true, // setLoop时使用
|
||
"path": "/path/to/video.mp4" // loadVideo时使用
|
||
}
|
||
}
|
||
```
|
||
|
||
### 状态响应
|
||
```json
|
||
{
|
||
"type": "status",
|
||
"data": {
|
||
"playback_status": "playing|paused|stopped|loading",
|
||
"current_video": {...},
|
||
"position": 120.5,
|
||
"duration": 3600.0,
|
||
"volume": 75.0,
|
||
"is_looping": false,
|
||
"is_fullscreen": true
|
||
}
|
||
}
|
||
```
|
||
|
||
## 日志调试
|
||
|
||
开发模式下可以查看详细日志：
|
||
|
||
```bash
|
||
# Rust后端日志
|
||
RUST_LOG=debug pnpm tauri:dev
|
||
|
||
# 或在代码中设置
|
||
env_logger::init();
|
||
```
|
||
|
||
前端调试信息在开发模式下显示在左下角。
|
||
|
||
## 使用流程
|
||
|
||
1. **启动播放器**
|
||
```bash
|
||
pnpm tauri:dev # 开发模式
|
||
# 或
|
||
./target/release/video-player # 发布版本
|
||
```
|
||
|
||
2. **自动全屏**：应用启动后自动进入全屏模式
|
||
|
||
3. **等待连接**：显示等待控制端连接的界面
|
||
|
||
4. **接收控制**：控制端连接后接收并执行播放命令
|
||
|
||
5. **视频播放**：根据控制端指令加载和播放视频
|
||
|
||
## 测试WebSocket连接
|
||
|
||
我们提供了一个简单的测试脚本来验证WebSocket服务器：
|
||
|
||
```bash
|
||
# 1. 启动播放器
|
||
pnpm tauri:dev
|
||
|
||
# 2. 在另一个终端中运行测试脚本
|
||
node test_websocket.js
|
||
```
|
||
|
||
测试脚本会连接到播放器并发送一系列命令来验证功能。你应该能看到：
|
||
- WebSocket连接成功
|
||
- 播放器接收和处理命令
|
||
- 状态更新消息
|
||
- 前端界面响应命令
|
||
|
||
## 键盘快捷键
|
||
|
||
- **空格键**：播放/暂停（本地控制）
|
||
- **F/f键**：切换全屏（保留功能）
|
||
|
||
## 故障排除
|
||
|
||
### 常见问题
|
||
|
||
1. **连接失败**
|
||
- 检查端口8080是否被占用
|
||
- 确认防火墙设置
|
||
- 查看控制端连接地址是否正确
|
||
|
||
2. **视频不播放**
|
||
- 确认视频文件路径正确
|
||
- 检查视频格式是否支持
|
||
- 查看浏览器控制台错误信息
|
||
|
||
3. **编译错误**
|
||
- 确认Rust环境正确安装
|
||
- 检查依赖版本兼容性
|
||
- 运行 `cargo clean` 后重新构建
|
||
|
||
### 日志位置
|
||
|
||
- **开发模式**：控制台输出
|
||
- **发布版本**：系统日志（具体位置取决于操作系统）
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
video-player/
|
||
├── app/ # Nuxt 4 前端代码
|
||
│ ├── pages/
|
||
│ │ └── index.vue # 主播放器页面
|
||
│ ├── layouts/
|
||
│ │ └── default.vue # 全屏布局
|
||
│ ├── modules/
|
||
│ │ └── tauri.ts # Tauri API 模块
|
||
│ └── app.config.ts # 应用配置
|
||
├── src-tauri/ # Tauri 后端代码
|
||
│ ├── src/
|
||
│ │ ├── lib.rs # 主入口
|
||
│ │ ├── main.rs # 程序入口
|
||
│ │ ├── player_state.rs # 播放器状态管理
|
||
│ │ ├── websocket_server.rs # WebSocket服务器
|
||
│ │ └── commands.rs # Tauri命令
|
||
│ └── Cargo.toml # Rust依赖配置
|
||
├── API.md # API文档
|
||
├── player_config.json # 配置文件
|
||
├── package.json # Node.js配置
|
||
└── README_PLAYER.md # 使用说明（本文件）
|
||
```
|
||
|
||
## 贡献指南
|
||
|
||
1. Fork 项目
|
||
2. 创建功能分支
|
||
3. 提交更改
|
||
4. 推送到分支
|
||
5. 创建 Pull Request
|
||
|
||
## 许可证
|
||
|
||
MIT License - 详见 LICENSE 文件
|