stemedb/applications/pitch/screenshots

Screenshot Capture

Playwright-based screenshot capture for pitch videos and demos.

Setup

cd applications/pitch
pnpm install
npx playwright install chromium

Usage

1. Create a config file (e.g., my-screenshots.json):

{
  "baseUrl": "http://localhost:18188",
  "outputDir": "screenshots/demo",
  "screenshots": [
    { "url": "/skeptic", "name": "skeptic-query.png" },
    { "url": "/skeptic", "name": "skeptic-results.png", "waitFor": ".results" },
    { "url": "/sources", "name": "sources.png", "delay": 500 }
  ]
}

2. Run:

pnpm capture my-screenshots.json

3. Screenshots saved to screenshots/demo/

Config Options

Field	Required	Description
baseUrl	No	Base URL (default: http://localhost:18188)
outputDir	No	Output directory (default: screenshots)
screenshots	Yes	Array of screenshots to capture

Screenshot Fields

Field	Required	Description
url	Yes	Page URL (relative to baseUrl or absolute)
name	Yes	Output filename (e.g., demo.png)
waitFor	No	CSS selector to wait for before capturing
delay	No	Milliseconds to wait after page load

Examples

Basic capture

{
  "screenshots": [
    { "url": "/dashboard", "name": "dashboard.png" }
  ]
}

Wait for element

{
  "screenshots": [
    { "url": "/results", "name": "results.png", "waitFor": ".data-loaded" }
  ]
}

Wait for animation

{
  "screenshots": [
    { "url": "/chart", "name": "chart.png", "delay": 1000 }
  ]
}

Full URLs

{
  "screenshots": [
    { "url": "https://example.com/page", "name": "external.png" }
  ]
}