# 1catai/cloudgamingdemo architecture

> Architecture diagram of the GitHub repository 1catai/cloudgamingdemo, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/1catai/cloudgamingdemo
- Repository: https://github.com/1catai/cloudgamingdemo

## Overview

这是面向受信任内网、单主机单玩家的云游戏串流 Demo：玩家用 Android Chrome 打开网页，选择串流参数并连接；网页申请会话租约、协商 WebRTC、播放视频音频并发送触屏输入，断开或超时后主机回收会话。Node 网关负责网页、租约与信令代理，不转发媒体；Moonlight streamer 桥接 Sunshine 与浏览器，Sunshine 采集并编码桌面画面。主要能力还包括 BeamNG 操作映射、编解码与预设选择、接收统计和延迟估算。未采样的媒体实现仅按 README 描述连线。

Main entry points: [`public/demo.js`](https://github.com/1catai/cloudgamingdemo/blob/main/public/demo.js) (Demo 页面与连接), [`server.mjs`](https://github.com/1catai/cloudgamingdemo/blob/main/server.mjs) (HTTP 与信令网关), [`public/index.html`](https://github.com/1catai/cloudgamingdemo/blob/main/public/index.html) (网页入口), [`lib/upstream.mjs`](https://github.com/1catai/cloudgamingdemo/blob/main/lib/upstream.mjs) (上游 HTTP 请求)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["网页客户端"]
  node_demo["Demo 页面与连接<br/>[demo.js]"]
  node_page["网页入口<br/>[index.html]"]
  node_presets["视频预设<br/>[presets.js]"]
  node_codecs["编解码检查<br/>[codecs.js]"]
  node_bitrate["码率档位<br/>[bitrate-slider.js]"]
end

subgraph group_gateway["会话与网关"]
  node_server["HTTP 与信令网关<br/>[server.mjs]"]
  node_lease["单玩家租约<br/>[session.mjs]"]
  node_upstream["上游 HTTP 请求<br/>[upstream.mjs]"]
end

subgraph group_stream["串流与主机"]
  node_moonweb["Moonlight Web 服务"]
  node_streamer["Moonlight Streamer"]
  node_sunshine["Sunshine 采集编码"]
end

subgraph group_controls["输入与统计"]
  node_touch["触屏虚拟手柄"]
  node_actions["BeamNG 操作映射<br/>[beamng-controls.js]"]
  node_latency["视频延迟估算<br/>[latency.js]"]
end

node_player(("Android Chrome 玩家"))
node_desktop["Windows 桌面与游戏"]
node_vigem["ViGEm 虚拟手柄"]

node_player -->|"打开网页"| node_page
node_page -->|"加载界面"| node_demo
node_demo -->|"读取预设"| node_presets
node_demo -->|"检查能力"| node_codecs
node_demo -->|"选择码率"| node_bitrate
node_demo -->|"请求会话"| node_server
node_server -->|"管理租约"| node_lease
node_server -->|"请求上游"| node_upstream
node_upstream -->|"HTTP 请求"| node_moonweb
node_server -->|"代理信令"| node_moonweb
node_demo -->|"心跳与结束"| node_server
node_demo -->|"配置触屏"| node_touch
node_touch -->|"提供输入状态"| node_demo
node_demo -->|"映射操作"| node_actions
node_demo -->|"协商 WebRTC"| node_streamer
node_sunshine -->|"提供媒体流"| node_streamer
node_streamer -->|"发送媒体"| node_demo
node_demo -->|"发送控制输入"| node_sunshine
node_desktop -->|"提供桌面画面"| node_sunshine
node_sunshine -->|"输出手柄输入"| node_vigem
node_vigem -->|"呈现虚拟手柄"| node_desktop
node_demo -->|"估算延迟"| node_latency

click node_demo "https://github.com/1catai/cloudgamingdemo/blob/main/public/demo.js"
click node_page "https://github.com/1catai/cloudgamingdemo/blob/main/public/index.html"
click node_presets "https://github.com/1catai/cloudgamingdemo/blob/main/public/presets.js"
click node_codecs "https://github.com/1catai/cloudgamingdemo/blob/main/public/codecs.js"
click node_bitrate "https://github.com/1catai/cloudgamingdemo/blob/main/public/bitrate-slider.js"
click node_server "https://github.com/1catai/cloudgamingdemo/blob/main/server.mjs"
click node_lease "https://github.com/1catai/cloudgamingdemo/blob/main/lib/session.mjs"
click node_upstream "https://github.com/1catai/cloudgamingdemo/blob/main/lib/upstream.mjs"
click node_actions "https://github.com/1catai/cloudgamingdemo/blob/main/public/beamng-controls.js"
click node_latency "https://github.com/1catai/cloudgamingdemo/blob/main/public/latency.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_demo,node_page,node_presets,node_codecs,node_bitrate toneBlue
class node_server,node_lease,node_upstream toneAmber
class node_moonweb,node_streamer,node_sunshine toneMint
class node_touch,node_actions,node_latency toneRose
class node_player,node_desktop,node_vigem toneIndigo
```

## Components

### 网页客户端

- [Demo 页面与连接](https://github.com/1catai/cloudgamingdemo/blob/main/public/demo.js): `public/demo.js`
- [网页入口](https://github.com/1catai/cloudgamingdemo/blob/main/public/index.html): `public/index.html`
- [视频预设](https://github.com/1catai/cloudgamingdemo/blob/main/public/presets.js): `public/presets.js`
- [编解码检查](https://github.com/1catai/cloudgamingdemo/blob/main/public/codecs.js): `public/codecs.js`
- [码率档位](https://github.com/1catai/cloudgamingdemo/blob/main/public/bitrate-slider.js): `public/bitrate-slider.js`

### 会话与网关

- [HTTP 与信令网关](https://github.com/1catai/cloudgamingdemo/blob/main/server.mjs): `server.mjs`
- [单玩家租约](https://github.com/1catai/cloudgamingdemo/blob/main/lib/session.mjs): `lib/session.mjs`
- [上游 HTTP 请求](https://github.com/1catai/cloudgamingdemo/blob/main/lib/upstream.mjs): `lib/upstream.mjs`

### 串流与主机

- **Moonlight Web 服务**
- **Moonlight Streamer**
- **Sunshine 采集编码**

### 输入与统计

- **触屏虚拟手柄**
- [BeamNG 操作映射](https://github.com/1catai/cloudgamingdemo/blob/main/public/beamng-controls.js): `public/beamng-controls.js`
- [视频延迟估算](https://github.com/1catai/cloudgamingdemo/blob/main/public/latency.js): `public/latency.js`

### Other components

- **Android Chrome 玩家**
- **Windows 桌面与游戏**
- **ViGEm 虚拟手柄**

## Connections

- Android Chrome 玩家 → 网页入口: 打开网页
- 网页入口 → Demo 页面与连接: 加载界面
- Demo 页面与连接 → 视频预设: 读取预设
- Demo 页面与连接 → 编解码检查: 检查能力
- Demo 页面与连接 → 码率档位: 选择码率
- Demo 页面与连接 → HTTP 与信令网关: 请求会话
- HTTP 与信令网关 → 单玩家租约: 管理租约
- HTTP 与信令网关 → 上游 HTTP 请求: 请求上游
- 上游 HTTP 请求 → Moonlight Web 服务: HTTP 请求
- HTTP 与信令网关 → Moonlight Web 服务: 代理信令
- Demo 页面与连接 → HTTP 与信令网关: 心跳与结束
- Demo 页面与连接 → 触屏虚拟手柄: 配置触屏
- 触屏虚拟手柄 → Demo 页面与连接: 提供输入状态
- Demo 页面与连接 → BeamNG 操作映射: 映射操作
- Demo 页面与连接 → Moonlight Streamer: 协商 WebRTC
- Sunshine 采集编码 → Moonlight Streamer: 提供媒体流
- Moonlight Streamer → Demo 页面与连接: 发送媒体
- Demo 页面与连接 → Sunshine 采集编码: 发送控制输入
- Windows 桌面与游戏 → Sunshine 采集编码: 提供桌面画面
- Sunshine 采集编码 → ViGEm 虚拟手柄: 输出手柄输入
- ViGEm 虚拟手柄 → Windows 桌面与游戏: 呈现虚拟手柄
- Demo 页面与连接 → 视频延迟估算: 估算延迟