# sysdvr_client_tauri **Repository Path**: sunshinewithmoonlight/sysdvr_client_tauri ## Basic Information - **Project Name**: sysdvr_client_tauri - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-11-26 - **Last Updated**: 2025-11-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # SysDVR TCP Demo Client - Tauri Edition 一个基于 **Tauri + Vue 3** 的 Nintendo Switch 游戏串流客户端，支持低延迟视频和音频传输。 ## 📋 项目概述 本项目是 [SysDVR](https://github.com/exelix11/SysDVR) 的 TCP 客户端实现，采用现代化的跨平台技术栈： - **前端**: Vue 3 + TypeScript + Vite - **后端**: Rust + Tauri - **视频解码**: WebCodecs API (H.264) - **音频播放**: Web Audio API (AAC) - **平台支持**: macOS, Windows, Linux ## 🎮 核心功能 ### 视频播放 - ✅ H.264 硬件解码 (WebCodecs) - ✅ 低延迟渲染 (WebGL + Canvas 2D) - ✅ 自适应缓冲区管理 - ✅ 智能丢帧策略 - ✅ 实时性能监控 ### 音频播放 - ✅ AAC 音频解码 - ✅ Web Audio API 播放 - ✅ 自适应同步阈值 - ✅ 音视频延迟监控 - ✅ 网络质量评估 ### 网络传输 - ✅ TCP 连接管理 - ✅ NAL 单元重放机制 (20 槽位) - ✅ 自动流重新同步 - ✅ 丢包恢复 ## 🚀 快速开始 ### 前置要求 #### 客户端 (Tauri + Vue 3) - **Node.js** >= 16.0 - **Rust** >= 1.70 - **Tauri CLI** (`npm install -g @tauri-apps/cli`) #### 服务端 (SysDVR - 可选) - **.NET Framework** >= 4.7.2 (Windows) 或 **.NET Core** >= 3.1 (跨平台) - **Visual Studio 2019+** 或 **Visual Studio Code** + C# 扩展 - **DevKit** (用于编译 Nintendo Switch 模块) ### 安装依赖 ```bash cd /Users/shine/t22 # 安装前端依赖 npm install # Rust 依赖会自动通过 Cargo 管理 ``` ### 开发模式 ```bash # 启动开发服务器（带热重载） npm run tauri dev ``` ### 生产构建 ```bash # 构建应用 npm run tauri build # 输出文件位置 # macOS: src-tauri/target/release/bundle/macos/t22.app # Windows: src-tauri/target/release/t22.exe # Linux: src-tauri/target/release/t22 ``` ## 🖥️ 服务端编译 (SysDVR) 本项目包含修改后的 SysDVR 服务端代码，需要与客户端配合使用。 ### 编译客户端 (C#) ```bash cd SysDVR # 使用 Visual Studio # 1. 打开 SysDVR.sln # 2. 选择 Release 配置 # 3. Build → Build Solution # 或使用命令行 (需要 .NET SDK) dotnet build SysDVR.sln -c Release # 输出文件 # bin/Release/SysDVRConfig.exe (配置工具) # bin/Release/Client.exe (原始客户端 - 参考用) ``` ### 编译 Nintendo Switch 模块 (Rust) ```bash cd SysDVR/sysmodule # 清理旧构建 make clean # 编译模块 make -j4 # 输出文件 # sysmodule.nso (部署到 Nintendo Switch) ``` ### 部署到 Nintendo Switch 1. 将编译好的 `sysmodule.nso` 复制到 Switch 2. 路径: `/atmosphere/contents/0100000000000352/exefs/main` 3. 重启 Switch ### 修改说明 SysDVR 文件夹中包含以下主要修改： - **缓冲区优化** (`sysmodule/source/capture.h`) - 增加缓冲区大小从 344KB 到 512KB - 解决大型 IDR 帧溢出问题 - **协议改进** (`Client/Sources/TCPBridge.cs`) - 优化 NAL 单元处理 - 改进错误恢复机制 - **性能优化** (`Client/Targets/Player/`) - 音视频同步改进 - 内存管理优化 详见 `SysDVR/readme.md` 和 `SysDVR/building.md` ## 📁 项目结构 ``` t22/ ├── src/ # 前端代码 (Vue 3) │ ├── App.vue # 主应用组件 │ ├── main.js # 入口文件 │ └── assets/ # 静态资源 ├── src-tauri/ # 后端代码 (Rust) │ ├── src/ │ │ ├── main.rs # Tauri 主程序 │ │ ├── decoder/ # 视频解码模块 │ │ │ ├── mod.rs │ │ │ └── nal_forwarder.rs # NAL 单元处理 │ │ ├── protocol/ # 协议解析 │ │ │ ├── mod.rs │ │ │ ├── packet.rs # 数据包定义 │ │ │ ├── handshake.rs # 握手协议 │ │ │ └── replay.rs # NAL 重放机制 │ │ ├── tcp/ # TCP 连接管理 │ │ │ ├── mod.rs │ │ │ ├── connection.rs # 连接处理 │ │ │ └── receiver.rs # 数据接收 │ │ └── state.rs # 应用状态 │ ├── Cargo.toml # Rust 依赖 │ ├── tauri.conf.json # Tauri 配置 │ └── icons/ # 应用图标 ├── SysDVR/ # 服务端 (C# + Rust - 必需) │ ├── Client/ # C# 客户端代码 (参考实现) │ ├── sysmodule/ # Nintendo Switch 模块 (Rust) │ │ └── source/ │ │ └── capture.h # 缓冲区优化 (344KB → 512KB) │ ├── SysDVRConfig/ # 配置工具 │ ├── readme.md # 服务端文档 │ ├── building.md # 编译指南 │ ├── protocol.md # 协议说明 │ └── SysDVR.sln # Visual Studio 解决方案 ├── package.json # 前端依赖 ├── vite.config.js # Vite 配置 ├── index.html # HTML 入口 └── README.md # 本文件 ``` ## 🔧 构建详解 ### 前端构建流程 ``` Vue 3 代码 → Vite 编译 → TypeScript 转译 → 优化打包 ↓ dist/ 文件夹 (HTML + JS + CSS) ``` ### 后端构建流程 ``` Rust 代码 → Cargo 编译 → 链接依赖 → 生成二进制 ↓ Tauri 打包 → 生成应用包 (DMG/EXE/AppImage) ``` ### 完整构建流程 #### 1. 编译 SysDVR 服务端 ```bash cd SysDVR/sysmodule && make clean && make -j DEFINES=-DUDP_LOGGING ``` #### 2. 编译 Tauri 客户端 ```bash # 清理构建产物 npm run tauri build -- --clean # 调试构建（包含符号表） npm run tauri build -- --debug # 发布构建（优化） npm run tauri build -- --release ``` #### 3. 完整编译脚本 ```bash #!/bin/bash set -e echo "🔨 开始编译 SysDVR 客户端..." # 编译 SysDVR 服务端 echo "📦 编译 SysDVR 服务端..." cd SysDVR dotnet build SysDVR.sln -c Release cd sysmodule make clean && make -j4 cd ../.. # 编译 Tauri 客户端 echo "🚀 编译 Tauri 客户端..." npm run tauri build -- --release echo "✅ 编译完成！" echo "📍 客户端输出: src-tauri/target/release/bundle/" echo "📍 服务端输出: SysDVR/bin/Release/" ``` ### 构建输出 编译完成后的文件位置： ``` t22/ ├── src-tauri/target/release/ │ ├── bundle/ │ │ ├── macos/t22.app # macOS 应用 │ │ ├── msi/t22.msi # Windows 安装程序 │ │ └── appimage/t22.AppImage # Linux 应用 │ └── t22 # Linux 可执行文件 └── SysDVR/ ├── bin/Release/ │ ├── SysDVRConfig.exe # 配置工具 │ └── Client.exe # 原始客户端 └── sysmodule/ └── sysmodule.nso # Nintendo Switch 模块 ``` ## 🎯 使用指南 ### 前置准备 #### 1. 编译并部署服务端 ```bash # 编译 SysDVR 服务端 cd SysDVR # 编译 C# 客户端（可选，用于参考） dotnet build SysDVR.sln -c Release # 编译 Nintendo Switch 模块 cd sysmodule make clean && make -j4 # 部署到 Nintendo Switch # 将生成的 sysmodule.nso 复制到: # /atmosphere/contents/0100000000000352/exefs/main ``` #### 2. 启动 Nintendo Switch 服务 - 在 Nintendo Switch 上启动 SysDVR 服务 - 确保 Switch 和电脑在同一网络 - 记下 Switch 的 IP 地址 ### 运行客户端 #### 1. 启动应用 ```bash npm run tauri dev ``` #### 2. 连接 Nintendo Switch - 在应用中输入 Switch 的 IP 地址和端口 (默认 6969) - 点击 "连接" #### 3. 开始串流 - 视频和音频会自动开始播放 - 实时显示： - 分辨率和帧率 - 缓冲区状态 - 网络延迟 - 丢帧统计 ### 配置选项 在 `src/App.vue` 中可以调整以下参数： ```javascript // 视频缓冲区配置 const videoBuffer = { maxSize: 3, // 最大缓冲帧数 minSize: 1, // 最小启动帧数 targetFPS: 60, // 目标帧率 lowLatencyMode: true // 低延迟模式 }; // 音频同步配置 const audioSync = { delayThreshold: 150, // 延迟阈值 (ms) checkInterval: 10000 // 检查间隔 (ms) }; // 超分辨率配置 const superResolution = { enabled: true, // 启用超分辨率 scale: 2 // 放大倍数 (1/2/4) }; ``` ## 📊 性能指标 | 指标 | 目标值 | 当前值 | |------|--------|--------| | 视频帧率 | 30+ FPS | 20-30 FPS | | 音视频延迟 | < 100ms | 50-80ms | | 缓冲区大小 | 1-3 帧 | 1-2 帧 | | 丢帧率 | < 1% | 0.5-1% | | CPU 占用 | < 30% | 15-25% | | 内存占用 | < 200MB | 100-150MB | ## 🔍 调试 ### 启用详细日志 ```bash # 设置日志级别 RUST_LOG=debug npm run tauri dev # 或者设置特定模块的日志 RUST_LOG=sysdvr_client_tauri=debug npm run tauri dev ``` ## 📚 技术文档 详细的技术文档位于 `TCP Demo client 开发文档/` 文件夹： - **00_DEVICE_DISCOVERY.md** - 设备发现机制 - **01_QUICK_START.md** - 快速开始指南 - **02_DATA_RECEPTION.md** - 数据接收流程 - **03_VIDEO_DECODING.md** - 视频解码实现 - **04_AUDIO_PLAYBACK.md** - 音频播放实现 - **05_AUDIO_SYNC_OPTIMIZATION.md** - 音视频同步优化 ## 🔗 相关资源 - **SysDVR 原项目**: https://github.com/exelix11/SysDVR - **Tauri 文档**: https://tauri.app/ - **Vue 3 文档**: https://vuejs.org/ - **WebCodecs API**: https://www.w3.org/TR/webcodecs/ - **Web Audio API**: https://www.w3.org/TR/webaudio/ ## 📝 协议说明 本项目遵循 SysDVR 的 TCP 协议： ``` TCP 连接 (端口 6969) ↓ 握手包 (18 字节 PacketHeader) ↓ 数据包流 (视频 + 音频) ├── 视频包: H.264 NAL 单元 └── 音频包: AAC 编码数据 ``` 详见 `SysDVR/protocol.md` ## 🛠️ 开发工作流 ### 添加新功能 1. 创建特性分支 ```bash git checkout -b feature/your-feature ``` 2. 进行开发和测试 ```bash npm run tauri dev ``` 3. 提交更改 ```bash git add . git commit -m "feat: add your feature" ``` 4. 推送到 Gitee ```bash git push origin feature/your-feature ``` ## 📦 依赖管理 ### 前端依赖 ```json { "dependencies": { "vue": "^3.x", "@tauri-apps/api": "^1.x" }, "devDependencies": { "vite": "^4.x", "@vitejs/plugin-vue": "^4.x" } } ``` ### 后端依赖 ```toml [dependencies] tauri = "1.x" tokio = { version = "1", features = ["full"] } serde = { version = "1", features = ["derive"] } log = "0.4" ``` ## 🤝 贡献指南 欢迎提交 Issue 和 Pull Request！ 1. Fork 本仓库 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 Pull Request ## 📄 许可证 本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。 ## 🙏 致谢 - [SysDVR](https://github.com/exelix11/SysDVR) - 原始项目 - [Tauri](https://tauri.app/) - 跨平台框架 - [Vue 3](https://vuejs.org/) - 前端框架 ## 📞 支持 如有问题或建议，请： 1. 查看 [技术文档](TCP%20Demo%20client%20开发文档/) 2. 提交 [Issue](https://gitee.com/sunshinewithmoonlight/sysdvr_client_tauri/issues)