Skip to content

Extract

Extract frames or thumbnails from video.

Quick example

typescript
import { ffmpeg } from "ffmpeg-kit";

const result = await ffmpeg.extract()
  .input("video.mp4")
  .timestamp(5)
  .size({ width: 640 })
  .format("jpg")
  .output("thumb.jpg")
  .execute();

console.log(result.outputPath); // "thumb.jpg"
console.log(result.width, result.height); // 640, 360

API

.input(path)

ParameterTypeDescription
pathstringPath to the input video file

.timestamp(t)

Time at which to extract the frame.

ParameterTypeDescription
tnumber | stringSeconds (5), timecode ("00:01:30"), or percentage ("50%")

.thumbnail()

Instead of a fixed timestamp, use FFmpeg's scene-change detection to find the most representative frame. Ignores .timestamp() if set.

.size(options)

ParameterTypeDefaultDescription
widthnumberOutput width in pixels
heightnumberOutput height in pixels

Omit one dimension to maintain aspect ratio. Omit both to use source dimensions.

.format(fmt)

ParameterTypeDefaultDescription
fmt"jpg" | "png" | "webp""jpg"Output image format

.quality(q)

JPEG/WebP quality.

ParameterTypeDefaultDescription
qnumber85Quality 1–100

.output(path)

Output file path. Required.

Examples

Extract frame at specific timestamp

typescript
await ffmpeg.extract()
  .input("video.mp4")
  .timestamp("00:01:30")
  .size({ width: 1280, height: 720 })
  .format("jpg")
  .quality(90)
  .output("frame.jpg")
  .execute();

Best representative thumbnail

typescript
await ffmpeg.extract()
  .input("video.mp4")
  .thumbnail()
  .size({ width: 640 })
  .format("webp")
  .output("thumb.webp")
  .execute();

Extract at percentage of duration

typescript
// Extract frame at 25% through the video
await ffmpeg.extract()
  .input("video.mp4")
  .timestamp("25%")
  .output("quarter.png")
  .execute();

Result type

typescript
interface ExtractResult {
  outputPath: string;
  width: number;
  height: number;
  size: number;        // file size in bytes
  probeResult: ProbeResult;
}

Released under the MIT License.