云游戏平台前端技术方案
Vue3框架结合 Gamepad.js（游戏手柄输入处理）和 Janus Gateway（WebRTC 媒体服务器）构建云游戏平台，是一套成熟且可落地的技术方案。两者分别解决了输入捕获和低延迟媒体传输的核心问题，配合游戏服务器（STUN、TURN）的画面捕获 / 编码、输入注入逻辑，可形成完整的云游戏链路。
一、方案架构总览
云游戏平台的核心链路是 “用户输入→云端游戏→画面编码→低延迟传输→前端渲染”，各组件分工如下：
流程阶段 | 模块 | 技术选型 | 核心作用 |
1. 用户输入 | 前端输入捕获 | Gamepad.js + 原生事件 | 捕获键盘、鼠标、游戏手柄输入，统一格式后通过 WebSocket 发送到游戏服务器。 |
2. 信令控制 | 信令与控制 | WebSocket 、STUN|TURN服务器 | 协调前端与 Janus 的连接，转发输入指令，管理游戏会话。 |
3. 云端游戏运行 | 云端游戏处理 | FFmpeg 画面捕获 | 运行游戏，通过 FFmpeg捕获画面，生成低延迟视频流（H.264/VP9）。 |
4. 输入模拟 | 输入注入 | 系统 API（如 Windows SendInput） | 接收前端输入指令，注入到云端游戏进程，模拟本地操作。 |
5. 媒体传输 | 媒体传输 | Janus Gateway（WebRTC SFU） | 接收云端编码的游戏画面流，通过 WebRTC 低延迟推送到前端；转发信令。 |
6. 前端渲染 | （前端展示） | 浏览器 WebRTC + 视频标签 | 订阅 Janus 转发的游戏流，在 <video> 标签实时渲染画面。 |
游戏视频画面实时渲染流程
游戏指令操作流程
二、关键组件详解与集成
1. Gamepad.js：统一游戏输入处理
Gamepad.js 是轻量级库，简化了浏览器对游戏手柄的检测、状态监听和事件处理，解决了不同设备（如 Xbox、PS 手柄）的兼容性问题。
核心功能：
- 自动检测已连接的游戏手柄（支持 USB/Bluetooth）。
- 实时获取手柄按键、摇杆、扳机键的状态（按下 / 松开、模拟量值）。
- 提供事件回调（连接 / 断开、状态变化），简化输入逻辑。
与键盘鼠标输入结合：
Gamepad.js 仅处理手柄，需同时监听键盘（keydown/keyup）和鼠标（mousemove/click）事件，统一通过 WebSocket 发送输入数据（格式需与后端约定，如 JSON 或 Protocol Buffers）。
手柄指令映射（前端按钮 → XInput 按键码）：
前端标准化按钮 | XInput 按键码（十六进制） | 说明 |
a | 0x1000 | A 键 |
b | 0x2000 | B 键 |
x | 0x4000 | X 键 |
y | 0x8000 | Y 键 |
l1（左肩键） | 0x0001 | LB 键 |
r1（右肩键） | 0x0002 | RB 键 |
select | 0x0010 | 选择键 |
start | 0x0020 | 开始键 |
摇杆和扳机键通过模拟量值（0~65535）映射：
- 左摇杆 X 轴：lX（-32768~32767，左负右正）
- 左摇杆 Y 轴：lY（-32768~32767，上负下正）
- 右摇杆 X 轴：rX
- 右摇杆 Y 轴：rY
- 左扳机键（L2）：bLeftTrigger（0~255）
- 右扳机键（R2）：bRightTrigger（0~255）
虚拟键码（Virtual-Key Codes） 映射表
前端 e.code（浏览器事件） | 对应按键 | Windows 虚拟键码（十六进制） | 备注 |
字母键 | |||
KeyA | A | 0x41 | |
KeyB | B | 0x42 | |
KeyC | C | 0x43 | |
KeyD | D | 0x44 | |
KeyE | E | 0x45 | |
KeyF | F | 0x46 | |
KeyG | G | 0x47 | |
KeyH | H | 0x48 | |
KeyI | I | 0x49 | |
KeyJ | J | 0x4A | |
KeyK | K | 0x4B | |
KeyL | L | 0x4C | |
KeyM | M | 0x4D | |
KeyN | N | 0x4E | |
KeyO | O | 0x4F | |
KeyP | P | 0x50 | |
KeyQ | Q | 0x51 | |
KeyR | R | 0x52 | |
KeyS | S | 0x53 | |
KeyT | T | 0x54 | |
KeyU | U | 0x55 | |
KeyV | V | 0x56 | |
KeyW | W | 0x57 | |
KeyX | X | 0x58 | |
KeyY | Y | 0x59 | |
KeyZ | Z | 0x5A | |
数字键（主键盘） | |||
Digit0 | 0 | 0x30 | |
Digit1 | 1 | 0x31 | |
Digit2 | 2 | 0x32 | |
Digit3 | 3 | 0x33 | |
Digit4 | 4 | 0x34 | |
Digit5 | 5 | 0x35 | |
Digit6 | 6 | 0x36 | |
Digit7 | 7 | 0x37 | |
Digit8 | 8 | 0x38 | |
Digit9 | 9 | 0x39 | |
数字键（小键盘） | 需配合 NumLock 状态 | ||
Numpad0 | 小键盘 0 | 0x60 | |
Numpad1 | 小键盘 1 | 0x61 | |
Numpad2 | 小键盘 2 | 0x62 | |
Numpad3 | 小键盘 3 | 0x63 | |
Numpad4 | 小键盘 4 | 0x64 | |
Numpad5 | 小键盘 5 | 0x65 | |
Numpad6 | 小键盘 6 | 0x66 | |
Numpad7 | 小键盘 7 | 0x67 | |
Numpad8 | 小键盘 8 | 0x68 | |
Numpad9 | 小键盘 9 | 0x69 | |
NumpadAdd | 小键盘 + | 0x6B | |
NumpadSubtract | 小键盘 - | 0x6D | |
NumpadMultiply | 小键盘 * | 0x6A | |
NumpadDivide | 小键盘 / | 0x6F | |
NumpadEnter | 小键盘 Enter | 0x0D | 与主键盘 Enter 相同 |
功能键 | |||
F1 | F1 | 0x70 | |
F2 | F2 | 0x71 | |
F3 | F3 | 0x72 | |
F4 | F4 | 0x73 | |
F5 | F5 | 0x74 | |
F6 | F6 | 0x75 | |
F7 | F7 | 0x76 | |
F8 | F8 | 0x77 | |
F9 | F9 | 0x78 | |
F10 | F10 | 0x79 | |
F11 | F11 | 0x7A | |
F12 | F12 | 0x7B | |
控制键 | |||
Enter | 回车键 | 0x0D | |
Escape | ESC 键 | 0x1B | |
Backspace | 退格键 | 0x08 | |
Tab | Tab 键 | 0x09 | |
CapsLock | 大小写锁定 | 0x14 | |
ShiftLeft | 左 Shift | 0xA0 | |
ShiftRight | 右 Shift | 0xA1 | |
ControlLeft | 左 Ctrl | 0xA2 | |
ControlRight | 右 Ctrl | 0xA3 | |
AltLeft | 左 Alt | 0xA4 | |
AltRight | 右 Alt | 0xA5 | |
MetaLeft | 左 Win 键 | 0x5B | Windows 键 |
MetaRight | 右 Win 键 | 0x5C | |
ContextMenu | 菜单键 | 0x5D | 右键菜单键 |
Space | 空格键 | 0x20 | |
方向键 | |||
ArrowUp | 上方向键 | 0x26 | |
ArrowDown | 下方向键 | 0x28 | |
ArrowLeft | 左方向键 | 0x25 | |
ArrowRight | 右方向键 | 0x27 | |
编辑键 | |||
Insert | Insert | 0x2D | |
Delete | Delete | 0x2E | |
Home | Home | 0x24 | |
End | End | 0x23 | |
PageUp | Page Up | 0x21 | |
PageDown | Page Down | 0x22 |
2. Janus Gateway：低延迟媒体流传输
Janus 是开源的 WebRTC SFU（选择性转发单元），支持多用户连接、媒体流转发和信令处理，适合云游戏的 “一对多” 或 “一对一” 场景（单个用户连接单个云端游戏实例）。
核心优势：
- 支持低延迟 WebRTC 传输（端到端延迟可控制在 50-200ms，取决于网络）。
- 提供媒体流编码协商（自动选择前端支持的 codec，如 H.264/VP9）。
- 内置 NAT 穿透（STUN/TURN），适配复杂网络环境。
- 可通过插件扩展功能（如 janus.plugin.videoroom 用于房间管理）。
Janus 部署与配置：
- 安装 Janus。
- 配置 STUN/TURN：在 janus中添加 STUN 服务器和 TURN 服务器
- 启用视频房间插件：云游戏可视为 “单用户房间”，使用 videoroom 插件管理游戏流的发布（云端）和订阅（前端）
3. 前端与 Janus 交互（拉取游戏画面）
前端需通过 Janus 的 JavaScript API 与 Janus 服务器建立连接，订阅云端游戏发布的视频流。
核心步骤：
- 加载 Janus 客户端库（janus.js）。
- 连接 Janus 服务器（WebSocket 协议，如 wss://your-janus-server:8188）。
- 附加到 videoroom 插件，创建 / 加入房间（云游戏房间通常为用户专属）。
- 订阅云端游戏发布的视频流，将流绑定到 <video> 标签渲染。
4. 云端游戏处理流程
云端是云游戏的 “核心引擎”，负责运行游戏、捕获画面、编码并推流到 Janus，同时接收前端输入并注入游戏。
关键步骤：
- 游戏运行：在 GPU 服务器上通过虚拟机启动游戏。
- 画面捕获：使用FFmpeg 的 x11grab捕获游戏窗口画面。
- 硬件编码：通过 GPU 编码将画面编码为低延迟视频流（H.264 基线档 / 主档，禁用 B 帧，GOP 设为 1-2 秒）。
- 推流到 Janus：通过 Janus 的客户端 API将编码后的流发布到指定房间（GAME_ROOM_ID），供前端订阅。
- 输入注入：通过 WebSocket 接收前端输入（键盘、鼠标、手柄），调用系统 API 注入到游戏进程。
三、总结与后续扩展
核心链路：
前端通过 Gamepad.js 捕获全类型输入，经 WebSocket 发送到云端；云端运行游戏、编码画面，通过 Janus 以 WebRTC 推流到前端，形成闭环。
后端重点：需开发游戏实例管理（启动 / 停止 / 分配）、画面捕获编码服务、输入注入服务，与 Janus 协同工作。
扩展功能：
- 多分辨率切换（根据网络动态调整）。
- 手柄按键映射（允许用户自定义按键）。
- 断线重连（前端自动重新订阅流，恢复输入）。
这套方案成熟度高，适合中小团队快速落地云游戏平台，后续可根据用户规模优化 Janus 集群和云端资源调度。