OpenClaw

demo-video

Create product demo videos by automating browser interactions and capturing frames. Use when the user wants to record a demo, walkthrough, product showcase, or interactive video of a web application. Supports Playwright CDP screencast for high-quality capture and FFmpeg for video encoding.

0xs4m13370 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install 0xs4m1337/demo-video

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

Demo Video Creator

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="Searc...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/0xs4m1337/demo-video
Version: —
Commit: 7ebc7394a1ac493238c36d143fd2cd79b1bdb079
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# Demo Video Creator

Create polished product demo videos by automating browser interactions.

## Overview

1. **Plan** the demo sequence (pages, interactions, timing)
2. **Record** frames using Playwright CDP screencast
3. **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

1. Start the Clawdbot browser if not running
2. Navigate to the app manually or via `browser action=open`
3. Customize `scripts/record-demo.js` for the target app
4. Run: `node scripts/record-demo.js`
5. 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

```javascript
// 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="Searc...

搜索