[施工中]动手实现一个manus第一篇：核心浏览器工具的实现

浏览器工具的实现

在manus的介绍里，基于playwright的浏览器操作工具非常重要，可以成为gen ai最重要的一个工具。里面最难的技术就是如何在无显示器环境中启动浏览器并提供给前端使用。

那么这种工具要怎么实现呢，作者从零开始实现了浏览器启动和推流。现在来简单介绍实现的方法：

主要的架构如下

[前端] 
  ↓ (请求视频流)
[Backend 服务] 
  ↓ (调用 Worker API)
[Worker 服务] 
  ↓ (Playwright + ffmpeg)
[浏览器画面 → HLS 流]

worker端的实现

主要需要集成javacv和javacv-platform两个库，负责实现ffmpeg的免安装和页面的抓取和推流
tip：ffmpeg的二进制文件由javacv-platform提供，不需要在worker容器中单独按照

chromium：必须在容器中安装好，并在应用中指定chromium的位置。
xvfb：创建虚拟显示器。
然后详细介绍各个组件的安装方式：

chromium的安装

这里贴的是dockerfile，直接添加sudo安装即可

RUN add-apt-repository ppa:xtradeb/apps -y && \
    apt-get update && \
    apt-get install -y chromium  --no-install-recommends && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

这里需要解决科学上网问题，ppa:xtradeb/apps 在国内环境中无法正常添加，这也是最大的卡点

xvfb的安装：

还是直接贴dockerfile了：

FROM ubuntu:22.04
RUN mv /etc/apt/sources.list /etc/apt/sources.list.bak
# 替换 APT 源为清华大学镜像
RUN echo '# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释' > /etc/apt/sources.list && \
    echo 'deb http://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse' >> /etc/apt/sources.list && \
    echo 'deb http://mirrors.aliyun.com/ubuntu/ jammy-updates main restricted universe multiverse' >> /etc/apt/sources.list && \
    echo 'deb http://mirrors.aliyun.com/ubuntu/ jammy-backports main restricted universe multiverse' >> /etc/apt/sources.list && \
    echo 'deb http://mirrors.aliyun.com/ubuntu/ jammy-security main restricted universe multiverse' >> /etc/apt/sources.list

# Update and install basic tools and playwright deps
RUN apt-get update && apt-get install -y \
    sudo \
    bc \
    curl \
    wget \
    gnupg \
    software-properties-common \
    xvfb \
    x11vnc \
    libx11-xcb1 libxkbcommon0 x11-apps x11-utils \
    fonts-liberation libgl1 libglib2.0-0 libsm6 \
    libxrender1 libxcomposite1 libasound2 libxdamage1 \
    imagemagick \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

这一段能把大部分需要的依赖和xvfb安装好

playwright的核心实现代码

首先添加依赖

<dependency>
  <groupId>com.microsoft.playwright</groupId>
  <artifactId>playwright</artifactId>
  <version>1.52.0</version> <!-- 确保使用最新稳定版 -->
</dependency>
<dependency>
  <groupId>org.bytedeco</groupId>
  <artifactId>javacv-platform</artifactId>
  <version>1.5.10</version> <!-- 检查最新版本 -->
</dependency>

架构介绍

先简单介绍下参考的开源项目的架构：

图片来自：https://github.com/Simpleyyt/ai-manus

在实际的拉取代码而不是使用项目提供的镜像中发现了几个问题：

chromium的xtrappa依赖外网环境，本地无法构建成功
sandbox依赖supervisord的服务管理存在一些稳定性问题，导致sandbox容器经常失败，从而整个服务不可用

当然最主要的目的是作者想用java or go复刻一个，并根据自己所学去自己实现一个ReAct框架并调优ai的效果。

所以简单研究了下开源代码和技术方案后，将架构调整为下面这样：

[前端] 
  ↓ (请求视频流)
[Backend 服务] 
  ↓ (调用 Worker API)
[Worker 服务] 
  ↓ (Playwright + ffmpeg)
[浏览器画面 → HLS 流]

详细架构如下

主要的变更点如下：

后端的Manus Worker 和 Manus Backend共享一个代码库，构建成同一个jar，只根据api和配置文件的不同区分其职责，方便代码的维护和共享。
前端改用react + tailwindcss实现，工程框架选用了umijs 而不是webpack 或者 vite

这样做的好处是前端不用单独使用一个容器host，而可以将css全部放到cdn或者整合到后端工程中以提升加载速度

直播方案除了vnc方案，还提供了安全性更高的hls推流方案

比如生成环境中，直接让用户可以通过vnc端口去操作浏览器机器可能会存在安全问题。