Browser Demo Recorder

Record browser demo videos from a plain-language brief by turning the requested flow into a plan, driving the OpenClaw browser via CDP, encoding an MP4, writ...

Security Scan

The skill largely does what its name/description promise, but there are a few inconsistencies and modest safety concerns (undeclared environment variables, execution of page-side JS via plans) that you should understand before installing.

Purpose & Capability

Name/description match the code: scripts/run-recording.mjs drives a browser via CDP, uses puppeteer-core and a screen-recorder to produce MP4s in a workspace media/ directory. The example plan and plan schema align with the stated purpose.

Instruction Scope

The SKILL.md and code instruct the agent to build a plan and run node scripts/run-recording.mjs; that runner supports a variety of step types including an 'evaluate' step that executes arbitrary page-side JavaScript (new Function(...)() executed in page context). 'evaluate' is useful for in-page fixes (e.g., change form.target) but it also allows arbitrary DOM access and network activity from the visited page—this is expected for interactive recording but increases risk if the recorded site or generated plan is untrusted.

Install Mechanism

There is no formal install spec (instruction-only), which is low-risk, but package.json declares dependencies (puppeteer-core and puppeteer-screen-recorder). Consumers will need to ensure Node and these packages (and ffmpeg for recording) are available; no external arbitrary downloads or obscure URLs are used in the repository.

Credentials

The skill metadata declares no required env vars, but the code reads environment variables at runtime: OPENCLAW_CDP_URL (CDP endpoint), OPENCLAW_WORKSPACE (workspace root used to compute media/), and FFMPEG_PATH (optional ffmpeg location). These are not secrets per se and are proportionate to functionality, but the SKILL.md did not enumerate them — the agent will rely on them if present, and they affect where outputs are written and which browser endpoint is used.

Persistence & Privilege

The skill is not always-enabled and does not request elevated platform privileges. It doesn't modify other skills or global agent settings. Autonomous invocation is allowed (platform default), which is expected for this kind of tool.

What to consider before installing

This skill appears to implement a browser recording tool as described, but review these before installing: - Make sure you run it where Node dependencies are installed (puppeteer-core and puppeteer-screen-recorder) and ffmpeg is available or FFMPEG_PATH set. The package.json lists these dependencies but there is no automatic install spec. - The runner reads OPENCLAW_CDP_URL (to connect to a browser), OPENCLAW_WORKSPACE (to locate the media/ directory), and FFMPEG_PATH — these env vars are not listed in the skill metadata; set them intentionally and ensure media/ is a safe writable location. - Plans may include 'evaluate' steps that run arbitrary JavaScript in the context of visited pages. That is required for some interactions but can read DOM data or make network requests from the page origin. Do not record pages that contain sensitive personal or secret information unless you trust the plan and the recording environment. - If you will run this in an automated or shared environment, verify the OpenClaw browser instance and workspace are isolated from sensitive sites/data. If you want to proceed: ensure a local OpenClaw-compatible browser is listening (CDP URL), install Node deps, confirm ffmpeg is installed (or set FFMPEG_PATH), and inspect any generated plan before running it.

Turn a natural-language recording request into a deterministic browser recording that lands in the current workspace media/ directory and can be sent back immediately.

Workflow

1. Extract the recording brief into a concrete sequence.
2. Convert the sequence into a JSON plan.
3. Run scripts/run-recording.mjs against that plan.
4. Verify the MP4 exists in the current workspace media/ directory.
5. Reply with a short status line and a MEDIA: line pointing at the generated file.

What to Capture From the User Brief

Convert the request into these fields before recording:

• Start URL and any required destination URLs
• Viewport preference if given; otherwise use 1600x1200
• Ordered steps: page holds, cursor sweeps, clicks, typing, scrolls, and ending frame
• Timing goals: total duration, per-step hold times, and any "don't click" / "hover only" constraints
• Output basename if the user hints at a name; otherwise derive a short slug from the task

If the brief is missing something critical, ask one question. Otherwise infer sensible defaults and proceed.

Plan Format

Read references/plan-schema.md when building or debugging plans.

Use references/example-skills-video-plan.json as the default reference for a multi-step marketing demo with homepage, hub, search, and return-home flow.

Runner

Run the recorder like this:

node scripts/run-recording.mjs /absolute/path/to/plan.json

Behavior:

• Connects to the existing OpenClaw browser via CDP
• Injects a visible cursor overlay so recordings show mouse position
• Uses human-like mouse movement, clicks, typing, and wheel-based scrolling
• Records directly to MP4
• Writes both MP4 and debug JSON into the plan's outputDir
• Default output directory should be the current workspace media/ directory

Output Rules

Always set the plan outputDir to the workspace media directory unless the user explicitly asks for a different safe location.

After success:

1. Mention the generated file path briefly.
2. Put the attachment on its own line using the MEDIA protocol.

Example reply shape:

录好了，时长约 42 秒。
MEDIA:media/my-demo-2026-03-25T09-30-00-000Z.mp4

Use a workspace-relative MEDIA: path when possible.

Implementation Notes

• Homepage forms sometimes open a new tab; if that breaks a continuous recording, add an evaluate step that changes the form target to _self before clicking submit.
• Prefer DOM-based targets over raw coordinates, but use coordinates for cinematic cursor sweeps.
• Keep cursor motion smooth and leave short holds after major transitions so the video is usable with voiceover.
• Save the generated plan near the media output or in a temp location only if you need to inspect it again; the MP4 in media/ is the primary artifact.
• If the run fails, inspect the debug JSON written next to the output video before retrying.