Video Generator JS

A web-based video generation application that creates MP4 videos from HTML5 Canvas using the WebCodecs API.

Features

• 🎨 Canvas-based frame generation - Generate video frames from HTML5 Canvas
• 🎨 Color picker - Choose background colors for your video frames
• 🔢 Frame numbering - Automatic frame number overlay in top-left corner
• ⚙️ Video configuration - Set duration, FPS, resolution, bitrate, and keyframe intervals
• 🎬 H.264/AVC encoding - High-quality video encoding using WebCodecs API
• 📦 MP4 container - Standard MP4 output format
• 💾 File download - Save generated videos to your filesystem
• 📊 Progress tracking - Real-time encoding progress display

Browser Support

• ✅ Chrome 94+
• ✅ Edge 94+
• ❌ Firefox (WebCodecs experimental)
• ❌ Safari (WebCodecs not supported)

Note: Requires HTTPS for WebCodecs API functionality.

Installation

1. Clone the repository:

git clone <repository-url>
cd video-generator-js

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to https://localhost:3000

Usage

1. Set Background Color: Use the color picker to choose your canvas background color
2. Configure Video Settings:
   • Duration: Video length in seconds (1-60)
   • Frame Rate: 15, 24, 30, or 60 FPS
   • Resolution: 720p, 1080p, or 4K
   • Bitrate: Video quality in Mbps (1-50)
   • Keyframe Interval: Distance between keyframes (1-300)
3. Preview: Click "Preview Animation" to see how your video will look
4. Generate: Click "Generate Video" to create and download your MP4 file

Technical Architecture

Core Components

• CanvasRenderer: Handles frame generation and canvas operations
• VideoEncoderWrapper: WebCodecs VideoEncoder integration
• MP4Muxer: Video container creation (uses Mediabunny with fallback)
• ProgressTracker: Real-time encoding progress
• FileDownloader: Handles MP4 file downloads

Video Pipeline

1. Canvas frames are rendered with background color and frame numbers
2. Frames are converted to VideoFrame objects
3. VideoEncoder compresses frames to H.264
4. MP4Muxer packages encoded chunks into MP4 container
5. Final video is downloaded as a file

Configuration Options

Option	Description	Range/Options
Duration	Video length in seconds	1-60 seconds
Frame Rate	Frames per second	15, 24, 30, 60 FPS
Resolution	Video dimensions	720p, 1080p, 4K
Bitrate	Video quality	1-50 Mbps
Keyframe Interval	Keyframes distance	1-300 frames

Build

To build for production:

npm run build

The built application will be in the dist/ directory.

Limitations

• Requires modern browsers with WebCodecs support
• HTTPS required for production use
• Large videos may consume significant memory
• Limited to H.264/AVC codec (no HEVC support yet)

License

MIT