Video Frame Capture Tool

A tool for capturing screenshots from specific frames of a video

Installation

  npm install video-frame-screenshot

Usage/Examples

import { useState } from 'react';
import { captureFrame } from 'video-frame-screenshot'

const App = () => {
  const [frames, setFrames] = useState<string[]>([]);

  const handleInputOnChange = async (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const newFrames: string[] = [];

    for (let i = 0; i < 10; i++) {
      const frame = await captureFrame(file, i * 1);
      if (frame) {
        newFrames.push(frame.url);
      }
    }

    setFrames(newFrames);
  };

  return (
    <div>
      <input type='file' onChange={handleInputOnChange} />
      <div>
        {frames.map((url, index) => (
          <img key={index} src={url} alt={`frame-${index}`} />
        ))}
      </div>
    </div>
  );
};

API Reference

TS Types

  type FrameCaptureResult = { blob: Blob; url: string } | null;

captureFrame(file: File, time: number = 0): Promise<FrameCaptureResult>

Captures a frame from a video file at a specified time.

Parameter	Type	Description
file	File	Required Video file (e.g., .mp4) to capture frame from
time	number	Time in seconds to capture the frame. Defaults to 0 (start of video)

captureFrameAtTimeRange(file: File, startTime: number, endTime: number): Promise<FrameCaptureResult | null>

Captures a frame from a video within a specified time range. Returns null if the current video time exceeds endTime.

Parameter	Type	Description
file	File	Required Video file (e.g., .mp4) to capture frame from
startTime	number	Required Start time in seconds to begin frame capture
endTime	number	Required End time in seconds where capture stops

downloadFrame(frame: FrameCaptureResult, filename: string = 'frame.png'): void

Downloads the captured frame as an image file.

Parameter	Type	Description
frame	FrameCaptureResult	Required The captured frame result to download
filename	string	Filename for the downloaded file (defaults to frame.png)