用 agent-browser 录制高质量产品演示视频open-agents 无头浏览器录屏实战指南【免费下载链接】open-agentsAn open source template for building cloud agents.项目地址: https://gitcode.com/GitHub_Trending/op/open-agents导读本指南基于 open-agents 仓库中agent-browser技能参考文档 .agents/skills/agent-browser/references/video-recording.md系统讲解如何利用无头浏览器录制带可见光标、无死时间、可直接分享的演示Demo视频。阅读完本文你将掌握一套完整的录制工作流录制前页面与坐标的预准备、DOM 光标注入、命令链压缩死时间、跨页录制节奏控制以及最终如何把.webm渲染成可分享的网页并发布到沙箱环境。核心理念为什么演示视频需要可看性普通录屏软件录制的自动化过程往往充斥着空白等待、不可见的鼠标点击观众难以跟随操作意图。agent-browser 的演示录制围绕四条关键原则展开这四条原则贯穿本文所有步骤最小化死时间Minimize dead time用串联命令把工具调用的开销从视频中剔除。每多一次独立调用视频里就多出数秒空白可见光标Visible cursorheadless无头Playwright 环境本身不渲染光标需要通过 DOM 注入一个模拟光标来跟随鼠标事件一页一链One chain per page页面跳转会销毁注入的 DOM 光标因此每次导航后必须重新注入不使用sleepNosleepcalls工具的自身执行已经提供了足够的自然节奏额外的等待只会拖慢视频。底层机制说明agent-browser的record命令在录制时会创建一个全新的浏览器上下文fresh context但保留当前会话的 cookies 与 storage若不提供 URL它会自动回到当前页面。这意味着你可以先用常规会话完成登录、配置等准备工作再无缝切换到录制模式——这正是录制前先准备这一原则的基础。详细命令清单见 .agents/skills/agent-browser/SKILL.md 中的 Video recording 一节。第一步在录制开始前把页面准备好核心规则所有导航与快照操作必须在record start之前完成。录制一旦开始之后的一切操作都会进入视频画面。# 先导航到目标页面 agent-browser open url# 获取交互元素快照 agent-browser snapshot -isnapshot -i只输出可交互元素并返回形如e1、e2的引用ref。仔细阅读快照输出规划好后续的点击与填写顺序。这样做的意义在于录制开始时页面已经处于就绪状态视频里不会出现等待页面加载、等待快照输出的冗余内容。第二步录制前先算好每个元素的坐标演示视频中光标需要精确地移动到目标元素上。元素 refe1只能用于点击命令光标移动命令mouse move需要的是像素坐标。因此在录制开始之前用getBoundingClientRect()计算每个目标元素的中心点 (x, y)agent-browser eval (() { const el document.querySelector(selector); const r el.getBoundingClientRect(); return JSON.stringify({ x: Math.round(r.x r.width/2), y: Math.round(r.y r.height/2) }); })()该脚本取元素包围盒bounding rect的左上角坐标加上宽高的一半即得中心点并四舍五入取整。把为每个目标元素算出的坐标记录下来例如400 300、623 52后续的mouse move命令将直接使用这些数值。务必在录制开始前完成坐标查询否则这段计算过程也会出现在成片中。第三步注入一个可见光标无头浏览器不会渲染系统光标观众根本看不到鼠标在哪。解决办法是在页面 DOM 中注入一个跟随mousemove事件的圆形指示元素agent-browser eval (() { const c document.createElement(div); c.style.cssText width:20px;height:20px;border-radius:50%;background:rgba(255,50,50,0.85);position:fixed;top:290px;left:390px;z-index:999999;pointer-events:none;transition:top 0.15s ease,left 0.15s ease;box-shadow:0 0 8px rgba(255,50,50,0.5);; document.body.appendChild(c); document.addEventListener(mousemove, e { c.style.top(e.clientY-10)px; c.style.left(e.clientX-10)px; }); })(); ok这段脚本的关键点解读元素尺寸20px × 20px、圆形border-radius:50%、半透明红色rgba(255,50,50,0.85)带柔和阴影观感清晰又不遮挡内容position:fixed使其相对视口定位滚动页面时依然可见pointer-events:none保证光标不会拦截页面上的真实点击事件transition让移动带有轻微延迟模拟真实鼠标的拖拽质感初始位置top:290px; left:390px是任意起点监听器会在第一次鼠标移动后接管定位-10px偏移让圆点中心对准实际指针位置。重要提醒每次页面跳转后必须重新注入光标——导航会销毁整个 DOM之前注入的元素将不复存在。这条规则直接决定了下文一页一链的组织方式。第四步用把命令链成一条每多一次独立的 Bash 工具调用视频里就多出数秒死时间。正确的做法是把录制周期内所有操作压缩进尽量少的链agent-browser record start ./demo.webm agent-browser eval inject cursor agent-browser mouse move 400 300 agent-browser click e1 agent-browser mouse move 600 200 agent-browser click e2 agent-browser record stop这条命令链完整经历了开始录制 → 注入光标 → 移动光标 → 点击 → 再移动 → 再点击 → 停止录制的全过程中间没有任何空白帧。注意record stop位于链的末尾负责把视频落盘为./demo.webm。record系列命令的完整形态见 SKILL.md 的 Video recording 一节agent-browser record start ./demo.webm # 开始录制使用当前 URL 状态 agent-browser record stop # 停止并保存视频 agent-browser record restart ./take2.webm # 停止当前录制并开始新录制其中record restart非常适合多机位连续录制场景比如重录某个翻车的片段时一条命令即可无缝切换输出文件。第五步每次点击前先mouse move观众需要看见光标的移动轨迹才能理解操作意图。直接对某个 ref 执行click而没有前置的光标移动视觉上会显得非常突兀agent-browser mouse move 623 52 agent-browser click e5先移动到目标坐标来自第二步再触发点击。配合第三步注入的光标视频中的每次点击都带有自然的移动路径观众可以清楚地跟随你的操作节奏。第六步彻底去掉sleep与wait每一毫秒都珍贵。工具的每次执行本身浏览器渲染、命令往返、网络请求就提供了足够的自然节奏额外的sleep 2000或wait 1000只会制造毫无信息量的静止画面。录制链中不要出现任何sleep、wait调用。补充说明wait命令本身有它的适用场景——SKILL.md 中wait --load networkidle、wait --url **/dashboard等用于录制开始之前的页面就绪判断非常合适被禁止的只是录制进行中的无意义等待。第七步一页一链跨页保持录制由于导航会销毁注入的 DOM 光标正确的组织方式是每个页面一条链链首重新注入光标链尾以会导致页面跳转的操作为终点。录制本身跨越多条链持续进行——record start只在第一条链上执行record stop只出现在最后一条链上。# 链 1第一页 → 点击触发跳转 agent-browser record start ./demo.webm agent-browser eval inject cursor agent-browser mouse move 400 300 agent-browser click e5# 链 2新页面 → 完成剩余动作并收尾 agent-browser eval inject cursor agent-browser mouse move 200 150 agent-browser click e3 agent-browser scroll down 200 agent-browser record stop示例中链 2 的收尾动作包含scroll down 200滚动页面——滚动命令同样可以在链内使用让视频呈现浏览页面内容的完整叙事。scroll的默认步长是向下 300px可通过参数指定像素值。第八步把成片发布为可分享页面录制结束后将.webm放入public/目录并创建一个极简的观看页mkdir -p public cp demo.webm public/demo.webm观看页public/demo.html的内容如下深色背景 居中视频 圆角阴影观感专业!DOCTYPE html html headtitleDemo/title/head body stylemargin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#111 video controls autoplay stylemax-width:90vw;max-height:90vh;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,0.5) src/demo.webm/video /body /html完成这两步后把整个目录分享到沙箱环境即可获得一个可对外访问的演示 URL直接发给评审、客户或社区。常见错误清单录制自查表以下错误是演示录制的典型翻车点录制前逐条对照检查页面就绪前就开始录制—— 导航与快照必须在record start之前完成导航后忘记重新注入光标—— DOM 元素已被页面销毁后续视频中光标消失使用分散的独立工具调用而非链—— 每多一次调用就多出数秒黑屏/空白在链中使用sleep或wait—— 完全多余工具执行本身就是自然的节奏点击前没有mouse move—— 缺少光标轨迹的点击在观众眼中显得突兀。进阶把录制工作流嵌入更大的自动化场景演示录制并非孤立能力它与 agent-browser 的会话管理与状态持久化机制深度联动可以组合出更完整的生产级工作流录制登录后的真实场景先用 .agents/skills/agent-browser/references/authentication.md 中的流程完成登录state save保存认证状态再state load恢复并进入录制——record会保留会话 cookies/storage保证演示从已登录状态开始多会话并行录制--session name可以为不同演示各开一个隔离上下文独立 cookies、storage、标签页详见 .agents/skills/agent-browser/references/session-management.md录制前的自动化准备仓库提供的 templates/capture-workflow.sh内容抓取 截图 PDF与 templates/form-automation.sh表单填写展示了如何用脚本化方式完成进入页面、等待 networkidle、抓取结构等前置动作可作为录制场景中准备页面阶段的参考模板调试与回放录制遇到问题时可以用agent-browser --headed open url打开有头浏览器直观观察配合agent-browser console、errors查看页面控制台与报错record restart ./take2.webm可在不中断会话的情况下直接开录新一版。结语一套可看的演示视频本质是节奏与可见性的艺术把所有耗时操作前置到录制之外用压缩死时间用 DOM 光标让每一步操作清晰可见用一页一链应对导航对 DOM 的破坏。遵循本文的 8 个步骤你就能用 agent-browser 在 open-agents 环境中稳定产出无死时间、光标跟随、叙事完整的.webm演示视频并通过public/目录秒级发布成可分享页面。【免费下载链接】open-agentsAn open source template for building cloud agents.项目地址: https://gitcode.com/GitHub_Trending/op/open-agents创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
用 agent-browser 录制高质量产品演示视频：open-agents 无头浏览器录屏实战指南
用 agent-browser 录制高质量产品演示视频open-agents 无头浏览器录屏实战指南【免费下载链接】open-agentsAn open source template for building cloud agents.项目地址: https://gitcode.com/GitHub_Trending/op/open-agents导读本指南基于 open-agents 仓库中agent-browser技能参考文档 .agents/skills/agent-browser/references/video-recording.md系统讲解如何利用无头浏览器录制带可见光标、无死时间、可直接分享的演示Demo视频。阅读完本文你将掌握一套完整的录制工作流录制前页面与坐标的预准备、DOM 光标注入、命令链压缩死时间、跨页录制节奏控制以及最终如何把.webm渲染成可分享的网页并发布到沙箱环境。核心理念为什么演示视频需要可看性普通录屏软件录制的自动化过程往往充斥着空白等待、不可见的鼠标点击观众难以跟随操作意图。agent-browser 的演示录制围绕四条关键原则展开这四条原则贯穿本文所有步骤最小化死时间Minimize dead time用串联命令把工具调用的开销从视频中剔除。每多一次独立调用视频里就多出数秒空白可见光标Visible cursorheadless无头Playwright 环境本身不渲染光标需要通过 DOM 注入一个模拟光标来跟随鼠标事件一页一链One chain per page页面跳转会销毁注入的 DOM 光标因此每次导航后必须重新注入不使用sleepNosleepcalls工具的自身执行已经提供了足够的自然节奏额外的等待只会拖慢视频。底层机制说明agent-browser的record命令在录制时会创建一个全新的浏览器上下文fresh context但保留当前会话的 cookies 与 storage若不提供 URL它会自动回到当前页面。这意味着你可以先用常规会话完成登录、配置等准备工作再无缝切换到录制模式——这正是录制前先准备这一原则的基础。详细命令清单见 .agents/skills/agent-browser/SKILL.md 中的 Video recording 一节。第一步在录制开始前把页面准备好核心规则所有导航与快照操作必须在record start之前完成。录制一旦开始之后的一切操作都会进入视频画面。# 先导航到目标页面 agent-browser open url# 获取交互元素快照 agent-browser snapshot -isnapshot -i只输出可交互元素并返回形如e1、e2的引用ref。仔细阅读快照输出规划好后续的点击与填写顺序。这样做的意义在于录制开始时页面已经处于就绪状态视频里不会出现等待页面加载、等待快照输出的冗余内容。第二步录制前先算好每个元素的坐标演示视频中光标需要精确地移动到目标元素上。元素 refe1只能用于点击命令光标移动命令mouse move需要的是像素坐标。因此在录制开始之前用getBoundingClientRect()计算每个目标元素的中心点 (x, y)agent-browser eval (() { const el document.querySelector(selector); const r el.getBoundingClientRect(); return JSON.stringify({ x: Math.round(r.x r.width/2), y: Math.round(r.y r.height/2) }); })()该脚本取元素包围盒bounding rect的左上角坐标加上宽高的一半即得中心点并四舍五入取整。把为每个目标元素算出的坐标记录下来例如400 300、623 52后续的mouse move命令将直接使用这些数值。务必在录制开始前完成坐标查询否则这段计算过程也会出现在成片中。第三步注入一个可见光标无头浏览器不会渲染系统光标观众根本看不到鼠标在哪。解决办法是在页面 DOM 中注入一个跟随mousemove事件的圆形指示元素agent-browser eval (() { const c document.createElement(div); c.style.cssText width:20px;height:20px;border-radius:50%;background:rgba(255,50,50,0.85);position:fixed;top:290px;left:390px;z-index:999999;pointer-events:none;transition:top 0.15s ease,left 0.15s ease;box-shadow:0 0 8px rgba(255,50,50,0.5);; document.body.appendChild(c); document.addEventListener(mousemove, e { c.style.top(e.clientY-10)px; c.style.left(e.clientX-10)px; }); })(); ok这段脚本的关键点解读元素尺寸20px × 20px、圆形border-radius:50%、半透明红色rgba(255,50,50,0.85)带柔和阴影观感清晰又不遮挡内容position:fixed使其相对视口定位滚动页面时依然可见pointer-events:none保证光标不会拦截页面上的真实点击事件transition让移动带有轻微延迟模拟真实鼠标的拖拽质感初始位置top:290px; left:390px是任意起点监听器会在第一次鼠标移动后接管定位-10px偏移让圆点中心对准实际指针位置。重要提醒每次页面跳转后必须重新注入光标——导航会销毁整个 DOM之前注入的元素将不复存在。这条规则直接决定了下文一页一链的组织方式。第四步用把命令链成一条每多一次独立的 Bash 工具调用视频里就多出数秒死时间。正确的做法是把录制周期内所有操作压缩进尽量少的链agent-browser record start ./demo.webm agent-browser eval inject cursor agent-browser mouse move 400 300 agent-browser click e1 agent-browser mouse move 600 200 agent-browser click e2 agent-browser record stop这条命令链完整经历了开始录制 → 注入光标 → 移动光标 → 点击 → 再移动 → 再点击 → 停止录制的全过程中间没有任何空白帧。注意record stop位于链的末尾负责把视频落盘为./demo.webm。record系列命令的完整形态见 SKILL.md 的 Video recording 一节agent-browser record start ./demo.webm # 开始录制使用当前 URL 状态 agent-browser record stop # 停止并保存视频 agent-browser record restart ./take2.webm # 停止当前录制并开始新录制其中record restart非常适合多机位连续录制场景比如重录某个翻车的片段时一条命令即可无缝切换输出文件。第五步每次点击前先mouse move观众需要看见光标的移动轨迹才能理解操作意图。直接对某个 ref 执行click而没有前置的光标移动视觉上会显得非常突兀agent-browser mouse move 623 52 agent-browser click e5先移动到目标坐标来自第二步再触发点击。配合第三步注入的光标视频中的每次点击都带有自然的移动路径观众可以清楚地跟随你的操作节奏。第六步彻底去掉sleep与wait每一毫秒都珍贵。工具的每次执行本身浏览器渲染、命令往返、网络请求就提供了足够的自然节奏额外的sleep 2000或wait 1000只会制造毫无信息量的静止画面。录制链中不要出现任何sleep、wait调用。补充说明wait命令本身有它的适用场景——SKILL.md 中wait --load networkidle、wait --url **/dashboard等用于录制开始之前的页面就绪判断非常合适被禁止的只是录制进行中的无意义等待。第七步一页一链跨页保持录制由于导航会销毁注入的 DOM 光标正确的组织方式是每个页面一条链链首重新注入光标链尾以会导致页面跳转的操作为终点。录制本身跨越多条链持续进行——record start只在第一条链上执行record stop只出现在最后一条链上。# 链 1第一页 → 点击触发跳转 agent-browser record start ./demo.webm agent-browser eval inject cursor agent-browser mouse move 400 300 agent-browser click e5# 链 2新页面 → 完成剩余动作并收尾 agent-browser eval inject cursor agent-browser mouse move 200 150 agent-browser click e3 agent-browser scroll down 200 agent-browser record stop示例中链 2 的收尾动作包含scroll down 200滚动页面——滚动命令同样可以在链内使用让视频呈现浏览页面内容的完整叙事。scroll的默认步长是向下 300px可通过参数指定像素值。第八步把成片发布为可分享页面录制结束后将.webm放入public/目录并创建一个极简的观看页mkdir -p public cp demo.webm public/demo.webm观看页public/demo.html的内容如下深色背景 居中视频 圆角阴影观感专业!DOCTYPE html html headtitleDemo/title/head body stylemargin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#111 video controls autoplay stylemax-width:90vw;max-height:90vh;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,0.5) src/demo.webm/video /body /html完成这两步后把整个目录分享到沙箱环境即可获得一个可对外访问的演示 URL直接发给评审、客户或社区。常见错误清单录制自查表以下错误是演示录制的典型翻车点录制前逐条对照检查页面就绪前就开始录制—— 导航与快照必须在record start之前完成导航后忘记重新注入光标—— DOM 元素已被页面销毁后续视频中光标消失使用分散的独立工具调用而非链—— 每多一次调用就多出数秒黑屏/空白在链中使用sleep或wait—— 完全多余工具执行本身就是自然的节奏点击前没有mouse move—— 缺少光标轨迹的点击在观众眼中显得突兀。进阶把录制工作流嵌入更大的自动化场景演示录制并非孤立能力它与 agent-browser 的会话管理与状态持久化机制深度联动可以组合出更完整的生产级工作流录制登录后的真实场景先用 .agents/skills/agent-browser/references/authentication.md 中的流程完成登录state save保存认证状态再state load恢复并进入录制——record会保留会话 cookies/storage保证演示从已登录状态开始多会话并行录制--session name可以为不同演示各开一个隔离上下文独立 cookies、storage、标签页详见 .agents/skills/agent-browser/references/session-management.md录制前的自动化准备仓库提供的 templates/capture-workflow.sh内容抓取 截图 PDF与 templates/form-automation.sh表单填写展示了如何用脚本化方式完成进入页面、等待 networkidle、抓取结构等前置动作可作为录制场景中准备页面阶段的参考模板调试与回放录制遇到问题时可以用agent-browser --headed open url打开有头浏览器直观观察配合agent-browser console、errors查看页面控制台与报错record restart ./take2.webm可在不中断会话的情况下直接开录新一版。结语一套可看的演示视频本质是节奏与可见性的艺术把所有耗时操作前置到录制之外用压缩死时间用 DOM 光标让每一步操作清晰可见用一页一链应对导航对 DOM 的破坏。遵循本文的 8 个步骤你就能用 agent-browser 在 open-agents 环境中稳定产出无死时间、光标跟随、叙事完整的.webm演示视频并通过public/目录秒级发布成可分享页面。【免费下载链接】open-agentsAn open source template for building cloud agents.项目地址: https://gitcode.com/GitHub_Trending/op/open-agents创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
