360 Secure SkillHub
360 安全技能中心

Demo Video Creator

该技能通过 Playwright CDP 连接浏览器，按规划好的演示流程自动导航、点击、悬停、输入并截取 JPEG 帧，再用 FFmpeg 将帧序列编码为 mp4/gif/webm 产品演示视频；附带演示流程规划参考文档和可定制脚本模板。

0xs4m1337
0xs4m1337
热度 98.79
最近更新 2026-05-11 15:51:03
分类：创作依赖：代码执行 / 联网浏览搜索 / 读写文件应用场景：视频编辑 / 工作流 / 自动化脚本

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add demo-video
Metadata
name
demo-video
description
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.

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

// 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