首页 / 技能 / Demo Video Creator — 技能工具

📦 Demo Video Creator — 技能工具

v1.0.0

[自动翻译] Create product demo videos by automating browser interactions and capturing frames. Use when the user wants to record a demo, walkthrough, product sho...

7· 6.4k·0 当前·0 累计
by @0xs4m1337·MIT-0
浏览器自动化自动化系统工具开发工具
下载技能包
License
MIT-0
最后更新
2026/1/28
0
安全扫描
VirusTotal
无害
查看报告
OpenClaw
可疑
medium confidence
The skill's code matches its stated purpose (automating Playwright/CDP recording and FFmpeg encoding) but there are several mismatches and operational risks (missing dependency details, broad local CDP access that can capture sensitive pages, and an in-memory frame buffer) that the user should be aware of before installing or running it.
评估建议
This skill appears to do what it says: record browser frames via CDP and convert them to video. Before using it, consider the following: - Dependencies: The SKILL.md forgets to list Node and the Playwright/npm dependency (the script requires node and 'playwright-core'). Install Node and the appropriate npm package (and ensure version compatibility) before running. - Sensitive data risk: The recorder connects to a local CDP endpoint and will capture whatever pages are available. Don’t run it whi...
详细分析 ▾
ℹ 用途与能力
The name/description line up with the included scripts: record-demo.js uses Playwright CDP to capture frames and frames-to-video.sh uses FFmpeg to encode them. However SKILL.md/prereqs omit Node and the playwright dependency (script requires node + playwright-core), which is an inconsistency: either the skill should list those prerequisites or include an install step.
ℹ 指令范围
Instructions are narrowly scoped to recording browser frames and encoding them. They do not instruct exfiltration. However the recorder connects to a local CDP endpoint (http://127.0.0.1:18800) and will capture whatever page is found by the script (default search for 'localhost' but configurable). That means it can record any browser tab accessible through that CDP endpoint (including potentially sensitive pages) — the SKILL.md does not explicitly warn about this privacy/security implication.
ℹ 安装机制
There is no install spec (instruction-only), so nothing is written automatically. But the runtime requires Node and a Playwright runtime (playwright-core) plus FFmpeg and a Clawdbot browser exposing a CDP endpoint. These runtime dependencies are not fully documented in SKILL.md (Node and npm packages are missing), which is an operational/consistency issue.
✓ 凭证需求
The skill does not request environment variables, credentials, or external endpoints beyond a local CDP URL. No network credentials or unrelated secrets are requested. Note: the hardcoded cdpEndpoint (127.0.0.1:18800) implies access to a local browser instance — that is proportional for the stated purpose but gives the script the ability to access any pages the browser can see.
✓ 持久化与权限
always is false and there are no install actions that modify global agent configuration. The skill does not request persistent platform privileges. It runs as a discrete script invoked by the user/agent.
安全有层次，运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发，无需署名。

运行时依赖

无特殊依赖

版本

latestv1.0.02026/1/28
● 无害

安装命令

点击复制
官方npx clawhub@latest install demo-video
镜像加速npx clawhub@latest install demo-video --registry https://cn.longxiaskill.com

技能文档

Create polished product demo videos by automating browser interactions.

Overview

  • Plan the demo sequence (pages, interactions, timing)
  • Record frames using Playwright CDP screencast
  • Encode to video with FFmpeg

Quick Start

Prerequisites

  • Clawdbot browser running (browser action=start profile=clawd)
  • App accessible via browser (localhost or remote)
  • FFmpeg installed for encoding

Recording Workflow

  • Start the Clawdbot browser if not running
  • Navigate to the app manually or via browser action=open
  • Customize scripts/record-demo.js for the target app
  • Run: node scripts/record-demo.js
  • Encode: bash scripts/frames-to-video.sh

Planning a Demo

See references/demo-planning.md for guidance on:

  • Structuring demo sequences
  • Timing and pacing
  • Interaction patterns
  • What makes demos compelling

Scripts

scripts/record-demo.js

Template Playwright script that:

  • Connects to Clawdbot browser via CDP
  • Starts screencast capture (JPEG frames)
  • Executes demo sequence (navigation, clicks, hovers, typing)
  • Saves frames to output directory

Customize for each demo:

  • DEMO_SEQUENCES array - define pages and interactions
  • OUTPUT_DIR - where to save frames
  • FRAME_SKIP - skip every Nth frame (lower = more frames)

scripts/frames-to-video.sh

FFmpeg encoding script with presets:

  • mp4 - H.264, good quality/size balance (default)
  • gif - Animated GIF for embedding
  • webm - VP9, smaller files

Usage: ./frames-to-video.sh [input_dir] [output_name] [format]

Interaction Patterns

// Navigation
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);
// Click element
await page.locator('button:has-text("Create")').click();
await page.waitForTimeout(500);
// Hover (show tooltips, hover states)
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);
// Type text
await page.locator('input[placeholder="Search"]').fill('query');
await page.waitForTimeout(500);
// Press key
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');
// Scroll
await page.evaluate(() => window.scrollBy(0, 300));

Tips

  • Timing: 2s on page load, 0.5-1s between interactions, 1.5s to show results
  • Frame skip: Use 3-5 for smooth video, 8-10 for smaller files
  • Quality: 85-90 JPEG quality balances size and clarity
  • Resolution: Browser window size determines output resolution
  • Loops: GIFs should loop seamlessly - end where you started
数据来源：ClawHub ↗ · 中文优化：龙虾技能库