estel/play

Fork 0

Files

estel 196ee46a8d 完成初步框架

2025-08-17 19:26:58 +08:00

6.3 KiB

Raw Permalink Blame History

视频播放器端

基于 Nuxt 4 + Tauri 2 的桌面视频播放器，支持远程控制。

功能特点

🎥 全屏视频播放：双击启动后立刻全屏显示
🎮 远程控制：通过WebSocket接收控制端命令
📡 自动连接：启动后自动尝试连接控制端
🔄 断线重连：连接断开后自动重试
⚙️ 配置灵活：支持配置文件自定义设置

架构说明

前端：Nuxt 4 + Vue 3 + Tailwind CSS + Nuxt UI
后端：Tauri 2 + Rust + WebSocket服务器
通信协议：WebSocket (端口8080)
API文档：详见 API.md

开发环境设置

前置要求

Node.js >= 23

Rust 开发环境

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source ~/.cargo/env

pnpm 包管理器

安装依赖

pnpm install

开发模式

# 启动完整应用（前端 + Tauri）
pnpm tauri:dev

# 仅前端开发
pnpm dev

# 检查Rust代码
cd src-tauri && cargo check

构建部署

# 构建桌面应用
pnpm tauri:build

# 构建调试版本
pnpm tauri:build:debug

# 构建前端静态文件
pnpm generate

配置文件

项目根目录的 player_config.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
  }
}

功能实现

✅ 已完成功能

前端界面
- 全屏播放器界面
- 连接状态显示
- 等待画面和状态信息
- 键盘快捷键支持
后端WebSocket服务
- WebSocket服务器（端口8080）
- 接收控制端连接
- 处理播放控制命令
- 状态同步机制
核心播放功能
- 视频加载和播放
- 播放/暂停/停止控制
- 音量调节
- 进度跳转
- 循环播放
- 全屏切换
Tauri命令API
- get_player_state - 获取播放器状态
- load_video - 加载视频文件
- play_video - 播放视频
- pause_video - 暂停播放
- stop_video - 停止播放
- seek_video - 跳转播放位置
- set_volume - 设置音量
- set_loop - 设置循环播放
- toggle_fullscreen - 切换全屏

🔄 后续扩展

配置文件读取：从配置文件加载连接设置
自动连接重试：实现更完善的重连机制
视频格式支持：扩展更多视频格式支持
播放列表：完善播放列表功能
定时播放：添加定时播放功能

WebSocket API

播放器作为WebSocket服务端，监听端口8080，接收控制端发送的命令：

连接地址

ws://127.0.0.1:8080/ws

消息格式

{
  "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时使用
  }
}

状态响应

{
  "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
  }
}

日志调试

开发模式下可以查看详细日志：

# Rust后端日志
RUST_LOG=debug pnpm tauri:dev

# 或在代码中设置
env_logger::init();

前端调试信息在开发模式下显示在左下角。

使用流程

启动播放器

pnpm tauri:dev  # 开发模式
# 或
./target/release/video-player  # 发布版本

自动全屏：应用启动后自动进入全屏模式
等待连接：显示等待控制端连接的界面
接收控制：控制端连接后接收并执行播放命令
视频播放：根据控制端指令加载和播放视频

测试WebSocket连接

我们提供了一个简单的测试脚本来验证WebSocket服务器：

# 1. 启动播放器
pnpm tauri:dev

# 2. 在另一个终端中运行测试脚本
node test_websocket.js

测试脚本会连接到播放器并发送一系列命令来验证功能。你应该能看到：

WebSocket连接成功
播放器接收和处理命令
状态更新消息
前端界面响应命令

键盘快捷键

空格键：播放/暂停（本地控制）
F/f键：切换全屏（保留功能）

故障排除

常见问题

连接失败
- 检查端口8080是否被占用
- 确认防火墙设置
- 查看控制端连接地址是否正确
视频不播放
- 确认视频文件路径正确
- 检查视频格式是否支持
- 查看浏览器控制台错误信息
编译错误
- 确认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       # 使用说明（本文件）

贡献指南

Fork 项目
创建功能分支
提交更改
推送到分支
创建 Pull Request

许可证

MIT License - 详见 LICENSE 文件

6.3 KiB Raw Permalink Blame History Unescape Escape