企业官网建设流程全解析

VisionClaw网页浏览Agent指南：Computer-Use实时直播观看与直播卡片切换设计全解析

【免费下载链接】VisionClawReal-time AI assistant for Meta Ray-Ban smart glasses -- voice + vision + agentic actions via Gemini Live and OpenClaw项目地址: https://gitcode.com/gh_mirrors/vi/VisionClaw

VisionClaw是一款面向 Meta Ray-Ban 智能眼镜的实时 AI 助手，通过 VisionClaw网页浏览Agent 让你用一句话让云端"Computer-Use"代理替你操作真实浏览器：任务启动的瞬间，眼镜端的 App 就会弹出直播卡片，实时回传云端浏览器的画面；任务完成后卡片自动切换为结果卡片。本文带你完整理解这套"网页浏览 Agent + 实时直播 + 卡片切换"的设计。

一、VisionClaw 是什么：为什么眼镜还需要网页浏览Agent

日常对话中，很多任务光靠"说"和"看"是完不成的——比如"帮我打开这个直播站点看看现在在售的商品"。这就是 VisionClaw 引入网页浏览 Agent的原因：

• 语音 + 视觉：眼镜摄像头以约 1 帧/秒把画面送入 Gemini Live，音频双向实时流动；
• Agentic 行动：复杂任务委托给网关侧的代理执行；
• 网页浏览Agent兜底：当本地工具（56+ 技能）无法完成时，交给 Browser Use Cloud 驱动一个真实的云端浏览器去"亲自"访问站点。

整体数据流如下图所示：

💡 一句话总结：语音说任务 → 网关派给网页浏览Agent → 直播卡片实时看屏幕 → 结果卡片收尾，全程双手解放。

二、浏览流水线设计：start + await 两步走

浏览能力的核心实现集中在 gateway/src/browse.ts，网关侧通过两个 HTTP 端点把它暴露出来（见 server.ts）：

为什么要拆成两步？关键设计注释写得很直白（browse.ts）：只有语音 worker 持有 LiveKit 房间，卡片推送必须经过它，所以"启动"和"等待"必须分离——启动一返回，App 立刻弹直播卡片；等待则在后台慢慢跑。

几个值得一提的工程细节：

• 成本控制：每次任务默认设置maxCostUsd上限（约 0.75 美元，可配置），防止 Agent"逛"到失控；
• 视口适配卡片：云端浏览器固定为 1280×1080（browse.ts），刻意匹配卡片宽高比，避免画面上下留黑边；
• 超时不丢结果：若await超时，任务转为deferred，结果通过通知（notify）或挂起队列在下次对话时补发，绝不让用户"等一场空"。

三、实时直播观看：liveUrl 是怎么拿到的

直播画面并不是"截图拼接"，而是 Browser Use 提供的可嵌入直播页。获取逻辑见 startBrowse：

1. POST /runs创建任务后，直播页地址并不在任务对象里，而是藏在任务事件流中；
2. 网关在约 12 秒窗口内轮询事件流，等待browser.ready/browser.attached事件携带live_view_url；
3. 拿到 URL 立即随runId一起返回给语音 worker，用于推送直播卡片；拿不到则降级为"无卡片纯等待"，任务照常执行。

四、直播卡片切换设计：同一张卡片"原地换装"

App 端的卡片系统（iOS 见 LiveKitSession.swift）定义了UICard结构，其中type: "live"的卡片带一个url字段，专门承载直播型内容。

4.1 卡片渲染：Web 视图承载直播流

直播页依赖 JavaScript 与 WebSocket 来拉取远程浏览器画面，因此：

• iOS 使用 WKWebView 直接加载该 URL（LiveKitStreamView.swift），系统默认开启 JS 与 WebSocket，开箱即用；
• Android 同样在专用屏幕中渲染直播卡片（LiveKitSessionViewModel.kt），并显式允许 JS + WebSocket（LiveKitStreamScreen.kt）。

4.2 卡片切换：同 UUID 原地替换

这套设计最巧妙的地方是卡片切换策略（见 UICard 注释）：

• 卡片携带uuid，相同 uuid 的新内容会原地替换旧内容——浏览过程中进度更新、结果卡片到达时，用户看到的始终是"同一张卡片在变化"，而不是弹窗闪烁；
• 任务结束后，直播画面被结果卡片接管，完成"直播 → 结果"的无缝切换；
• 用户手动关闭（dismiss）后，卡片消失，直到 Agent 再次发布才重现。

4.3 可追溯：每一步都进了 Trace

每次浏览任务都会在用户 Trace 中留下一条browser_task记录：任务描述、模型、浏览器动作步数、耗时、Token 与费用，全部可由 fetchRunDetail 从事件流中还原出"Agent 的计划 + 实际操作"清单。开发者面板用醒目的BROWSE标签展示（dashboard.html），方便自查"它到底干了什么、花了多少钱"。

五、上手与延伸阅读

📦 想体验完整功能，可克隆仓库后按文档启动网关与语音 worker：

git clone https://gitcode.com/gh_mirrors/vi/VisionClaw

• 网关部署与令牌配置：gateway/README.md
• 浏览端点实现：gateway/src/server.ts
• 浏览器 API 封装：gateway/src/browse.ts
• iOS 卡片会话：samples/CameraAccess/CameraAccess/OpenClaw/LiveKitSession.swift
• Android 直播卡片：samples/CameraAccessAndroid/
• 整体项目说明：README.md

六、小结

VisionClaw 的网页浏览 Agent 设计可以浓缩为四个要点：

1. start + await 拆分：直播卡片秒级出现，结果异步送达，体验与成本兼得；
2. 事件流取直播地址：从任务事件流中轮询live_view_url，失败优雅降级；
3. 同 UUID 原地替换：直播卡片与结果卡片"无缝换装"，交互不打断；
4. 全程可观测：步骤、耗时、Token、费用全部落入 Trace，BROWSE 标签一目了然。

这套"语音下任务、直播看过程、卡片收结果"的闭环，正是智能眼镜上 Agentic 体验的好范本 👓✨

【免费下载链接】VisionClawReal-time AI assistant for Meta Ray-Ban smart glasses -- voice + vision + agentic actions via Gemini Live and OpenClaw项目地址: https://gitcode.com/gh_mirrors/vi/VisionClaw