Extract a single frame from a video as a PNG thumbnail.
function extractThumbnail(
ffmpegPath: string,
videoPath: string,
outputPath: string,
timeSec: number
): void
Parameters
Path to the ffmpeg binary. Obtain via ensureFfmpeg().
Path to the input video file (MP4, WebM, etc.).
Path where the PNG thumbnail should be saved.
Time position in seconds from which to extract the frame.
Usage
import { extractThumbnail, ensureFfmpeg } from '@webreel/core';
const ffmpegPath = await ensureFfmpeg();
extractThumbnail(
ffmpegPath,
'output.mp4',
'thumbnail.png',
0.5 // Extract frame at 0.5 seconds
);
Notes
- Extracts exactly one frame at the specified time position
- Output is always PNG format
- The video file must exist and be readable
- Used internally by webreel CLI for automatic thumbnail generation
SfxConfig
Type definition for sound effect configuration.
interface SfxConfig {
click?: 1 | 2 | 3 | 4 | string;
key?: 1 | 2 | 3 | 4 | string;
}
Fields
Click sound preset number (1-4) or path to custom MP3 file.Default: 1
Keystroke sound preset number (1-4) or path to custom MP3 file.Default: 1
Usage
Use preset sounds:
const sfx: SfxConfig = {
click: 2,
key: 3
};
const sfx: SfxConfig = {
click: './sounds/my-click.mp3',
key: './sounds/my-key.mp3'
};
Preset Sounds
webreel includes 4 built-in sound presets for both clicks and keystrokes:
- 1: Soft, subtle click/key sound (default)
- 2: Mechanical keyboard-style sound
- 3: Pronounced, sharp sound
- 4: Deep, bass-heavy sound
Custom MP3 files must be valid audio files readable by ffmpeg.
Constants
Export constants from @webreel/core:
TARGET_FPS
const TARGET_FPS: number = 60
FRAME_MS
const FRAME_MS: number = 16.666...
DEFAULT_VIEWPORT_SIZE
const DEFAULT_VIEWPORT_SIZE: number = 1080
DEFAULT_CURSOR_SIZE
const DEFAULT_CURSOR_SIZE: number = 24
OFFSCREEN_MARGIN
const OFFSCREEN_MARGIN: number = 40
CAPTURE_CYCLE_MS
const CAPTURE_CYCLE_MS: number = 35
DEFAULT_CURSOR_SVG
const DEFAULT_CURSOR_SVG: string
DEFAULT_HUD_THEME
const DEFAULT_HUD_THEME: {
background: string;
color: string;
fontSize: number;
fontFamily: string;
borderRadius: number;
position: "bottom";
}
{
background: "rgba(0,0,0,0.5)",
color: "rgba(255,255,255,0.85)",
fontSize: 56,
fontFamily: '"Geist", -apple-system, BlinkMacSystemFont, sans-serif',
borderRadius: 18,
position: "bottom"
}
Usage
import {
TARGET_FPS,
FRAME_MS,
DEFAULT_VIEWPORT_SIZE,
DEFAULT_CURSOR_SIZE,
DEFAULT_CURSOR_SVG,
DEFAULT_HUD_THEME
} from '@webreel/core';
console.log(`Recording at ${TARGET_FPS}fps (${FRAME_MS}ms per frame)`);
console.log(`Default viewport: ${DEFAULT_VIEWPORT_SIZE}x${DEFAULT_VIEWPORT_SIZE}`);
Compositor
Video composition with sound effects
FFmpeg
FFmpeg installation and management
Recorder
Recording engine with thumbnail support
Overlays
Cursor and HUD theme constants