106 lines
4.9 KiB
Markdown
106 lines
4.9 KiB
Markdown
# WebRTC 网页远程控制 (WebRTCControllerWeb)
|
||
|
||
基于 **Vue3 + Vite** 的 WebRTC 网页远程控制端，参考并兼容以下既有项目：
|
||
|
||
- `WebRTCSignalServer` —— Java/Spring 信令服务器（WebSocket，端点 `/ws/signal`）
|
||
- `WebRTCControlled` —— Android 被控端（采集屏幕、接收控制指令）
|
||
- `WebRTCController` / `webrtc_controller_flutter` —— Android / Flutter 控制端
|
||
|
||
本项目的定位是 **网页版控制端 (CONTROLLER)**，与原有信令协议、protobuf 控制协议 **完全兼容**：
|
||
|
||
- 通过 WebSocket 连接信令服务器并注册为 `CONTROLLER`
|
||
- 作为 OFFER 方创建 WebRTC 连接（仅接收远端视频 `recvonly` + 一条控制用 `DataChannel`）
|
||
- 在浏览器中显示被控端画面，并通过触摸/鼠标/导航按键采集输入
|
||
- 将输入转换为相对坐标 (0.0~1.0) 的 protobuf `ControlMessage`，经 DataChannel 发送给被控端执行
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
WebRTCControllerWeb/
|
||
├── index.html
|
||
├── package.json
|
||
├── vite.config.js
|
||
├── public/
|
||
│ └── control_message.proto # 与 Android/Flutter 完全一致的 protobuf 定义
|
||
├── server/ # 可选：轻量 Node 信令服务器（与 Spring 版协议一致）
|
||
│ ├── index.js
|
||
│ └── package.json
|
||
└── src/
|
||
├── main.js
|
||
├── App.vue
|
||
├── style.css
|
||
├── proto/controlMessage.js # protobufjs 运行时编码
|
||
├── services/
|
||
│ ├── SignalingClient.js # WebSocket 信令（对应 Android WebSocketClient）
|
||
│ └── WebRtcController.js # WebRTC + DataChannel（对应 WebRtcClient）
|
||
├── store/controllerStore.js # 全局状态与流程编排（对应 RemoteController）
|
||
└── components/
|
||
├── ConnectionPanel.vue # 信令连接 / 设备列表 / 发起控制
|
||
├── RemoteScreen.vue # 远端视频 + 触摸/滑动采集层
|
||
├── ControlBar.vue # 主页/返回/多任务/音量/电源等导航键
|
||
└── StatsBar.vue # 连接统计（分辨率/帧率/下载速率等）
|
||
```
|
||
|
||
## 运行
|
||
|
||
### 1. 准备信令服务器（二选一）
|
||
|
||
**方式 A：复用现有 Spring 信令服务器**
|
||
直接启动 `WebRTCSignalServer` 即可（默认 `ws://<host>:8088/ws/signal`）。
|
||
|
||
**方式 B：使用本项目自带的 Node 信令服务器**
|
||
```bash
|
||
cd server
|
||
npm install
|
||
npm start # 监听 ws://localhost:8088/ws/signal
|
||
```
|
||
|
||
### 2. 启动被控端
|
||
在安卓设备安装并运行 `WebRTCControlled`，保持其在线并连接到同一信令服务器。
|
||
|
||
### 3. 启动网页控制端
|
||
```bash
|
||
cd WebRTCControllerWeb
|
||
npm install
|
||
npm run dev # 默认 http://localhost:5173
|
||
```
|
||
|
||
> 浏览器需支持 WebRTC。本地 `http://localhost` 可直接使用；
|
||
> 部署到远程地址时建议使用 `https://` 与 `wss://`，否则部分浏览器会拦截。
|
||
|
||
### 4. 使用
|
||
1. 左侧填写信令服务器地址与「本机设备 ID」（已自动生成随机 ID）。
|
||
2. 点击「连接信令服务器」，再点击「刷新设备列表」获取在线被控端。
|
||
3. 选择目标设备，点击「发起远程控制」。
|
||
4. 被控端弹出连接请求并「接受」后，右侧出现屏幕画面。
|
||
5. 在画面上 **触摸/滑动** 即可操控；底部按钮对应系统导航键（主页/返回/多任务/菜单/音量/电源）。
|
||
|
||
## 控制协议要点
|
||
|
||
- **信令消息**（`SignalMessage`）：`type / fromDeviceId / toDeviceId / deviceType / payload(JSON 字符串)`，
|
||
类型含 `REGISTER / OFFER / ANSWER / ICE_CANDIDATE / DEVICE_LIST` 等。
|
||
- **DataChannel** 标签固定为 `control_channel`，创建参数 `ordered:false, maxRetransmits:0`（非可靠、无序，最低延迟）。
|
||
- **控制指令**（`ControlMessage`，protobuf 二进制）：
|
||
- `TOUCH=1` 单击（x,y）
|
||
- `SWIPE=2` 滑动（x1,y1,x2,y2,duration）
|
||
- `KEY=3` 按键（key_code；被控端自动完成 按下+抬起）
|
||
- `LONG_PRESS=4` 长按（x,y）
|
||
- `MOTION_EVENT=5` 原始指针动作（motion_action: 0=DOWN/1=UP/2=MOVE；x,y）
|
||
|
||
坐标均为相对屏幕百分比 (0.0~1.0)，因此不同分辨率设备间可直接换算。
|
||
|
||
## 与原有项目的对应关系
|
||
|
||
| 能力 | Android/Flutter | 本项目 (Vue3) |
|
||
| --- | --- | --- |
|
||
| 信令注册 | `WebSocketClient.registerDevice()` | `SignalingClient.register()` |
|
||
| 创建连接 | `WebRtcClient.createOffer()` | `WebRtcController.createOffer()` |
|
||
| 触摸采集 | `RemoteTouchView` | `RemoteScreen.vue`（pointer 事件 + 相对坐标映射） |
|
||
| 指令构造 | `ControlCommands` | `WebRtcController.sendTouch/...` + `controlMessage.js` |
|
||
| 流程编排 | `MainActivity` / `RemoteController` | `controllerStore.js` |
|
||
|
||
## 备注
|
||
|
||
- ICE/TURN 配置见 `src/store/controllerStore.js` 的 `DEFAULT_ICE_SERVERS`，请按需替换为你自己的 TURN 凭据。
|
||
- 本网页端作为 **控制端**，被控端仍为 Android（`WebRTCControlled`）。
|