增加一个远程浏览器功能，原生支持 "远程浏览器" 页面 — 基于 Chrome CDP 流式截屏，无需 VNC/虚拟显示器

[cjjchina3088191870-sudo]

Feature Request: 原生支持 "远程浏览器" 页面 — 基于 Chrome CDP 流式截屏，无需 VNC/虚拟显示器

Feature Description

希望 Hermes Studio 原生内置一个 "远程浏览器" 页面：

• 在侧边栏添加导航入口，点击直接打开图形化浏览器
• 无头服务器上也能完美运行，不需要 VNC，不需要虚拟显示器(Xvfb)，不需要整个桌面
• 用户和 Agent 可以共享同一个浏览器实例 — Agent 操作完，用户可以接手继续点，体验流畅

Motivation

很多使用场景都需要：

• Agent 帮你打开网页，你可以直接接着看/操作
• 无头云服务器需要图形化浏览器调试网页
• 不需要完整桌面，就只要浏览器一个应用

Proposed Solution

使用 Chrome DevTools Protocol (CDP) 原生屏幕流式输出 方案，这是目前最轻量化优雅的方案：

整体架构

用户浏览器 <--WebSocket--> Hermes 后端 <--CDP WebSocket--> Chrome (headless 模式)
      ↑                      ↑                    ↑
   用户鼠标键盘           转发输入             Chrome 渲染网页
      ↓                      ↓                    ↓
  canvas 绘制 JPEG 帧 ←---- 接收 JPEG 视频流 ←---- Page.screencastFrame 事件

核心原理

1. 启动 Chrome 只需要：

   google-chrome --headless=new --remote-debugging-port=9222

   不需要任何 X 虚拟显示器，headless 模式原生就支持。

2. 后端订阅屏幕流：

   • 通过 CDP WebSocket 连接到 Chrome
   • 调用 Page.startScreencast，Chrome 会自动把每一帧编码成 JPEG 推送给后端
   • 后端通过 WebSocket 把 JPEG 帧转发给前端

3. 前端用户输入：

   • 前端捕获 canvas 上的鼠标/键盘/滚轮事件
   • 通过 WebSocket 发给后端
   • 后端转成 CDP 输入命令（Input.dispatchMouseEvent, Input.dispatchKeyEvent 等）发给 Chrome

4. 多标签支持：

   • 通过 CDP Target.setDiscoverTargets 跟踪标签页创建/关闭
   • 前端可以自由切换、新建、关闭标签页

优势对比

方案	需要虚拟X	需要VNC	资源占用	集成度
本方案（CDP 原生流）	❌ 不需要	❌ 不需要	🟢 极低	🟢 原生集成
xvfb + vnc + noVNC	✅ 需要	✅ 需要	🟡 中等	需要额外服务
Kasm/容器化	❌ 不需要	内置	🔴 较高	额外容器
Guacamole	❌ 可以单应用	✅ 需要	🟡 中等	比较重

这个方案是目前公认最轻量化的做法，只需要 Chrome 已经安装就能用，Hermes 只需要加一个 WebSocket 转发层和前端页面就行，改动很小，体验很好。

Alternatives Considered

上面对比的几种方案都比较重，或者需要额外依赖，这个方案最符合 Hermes "一体化" 的设计哲学。

[EKKOLearnAI]

设备功能，加上opencli 了解下