Huy's Wiki

Hyperframes — Frame-Level Video Control by HeyGen

Properties2
descriptionOpen-source JS library for frame-level video control + official docs + showcase. Write HTML, render video. Agent-native video generation.
tagsopen-source, video, javascript, heygen, dev-tools, agent-native

2 min read

Hyperframes: Supercharge Your Video Workflows with Frame-Level Precision

Docs & Showcase: hyperframes.heygen.com
Repository: github.com/heygen-com/hyperframes
NPM: npm install hyperframes

Overview

Hyperframes is an open-source JavaScript library from the HeyGen team that gives you frame-level control over video files — right in the browser or Node.js. Lightweight alternative to FFmpeg.wasm for when you just need frame access, not a full video pipeline.

What It Does

Extract, decode, and manipulate individual video frames:

  • Extract frames as images (PNG, JPEG, WebP)
  • Get frame-level metadata (timestamps, dimensions, keyframe info)
  • Decode specific frame indexes or time ranges
  • Work with common video formats (MP4, WebM, etc.)

Why It Stands Out

  1. Browser-native — No server needed. Uses WebCodecs + WASM under the hood. Build real-time video features without transcoding infra.

  2. Precise frame targeting — Request by index or timestamp, get exactly that frame. No buffering, no approximations. Huge for thumbnails, video analytics, subtitle syncing.

  3. Lightweight — Under 50KB gzipped. Compare to FFmpeg.wasm which is megabytes.

  4. Streams support — Pipe in video from a live source or partially downloaded file.

Quick Start

npm install hyperframes
# or
yarn add hyperframes
import { Hyperframes } from 'hyperframes';
 
const video = await Hyperframes.fromUrl('https://example.com/video.mp4');
const frame = await video.getFrameAtTime(2.5); // 2.5 seconds in
const blob = await frame.toBlob('image/png');

Works in any modern browser or Node.js 18+. The repo includes a full demo with contact sheet generation.

Graph View

Backlinks