Back to Home

Documentation

PlaygroundBenchmarks

Getting Started

Learn how to install and use VideoIntel.js in your project. Get up and running in minutes with smart video analysis capabilities.

Installation

Install VideoIntel.js using your preferred package manager:

# Using npm
npm install videointel

# Using yarn
yarn add videointel

# Using pnpm
pnpm add videointel

Quick Start

Here's a simple example to get you started with VideoIntel.js. This example shows how to analyze a video and extract thumbnails:

example.tstypescript
import videoIntel from 'videointel';

// Analyze a video file
async function analyzeVideo(file: File) {
  // Initialize (optional - will auto-initialize if not called)
  await videoIntel.init();

  // Analyze video with all features
  const results = await videoIntel.analyze(file, {
    thumbnails: { count: 5, quality: 0.8 },
    scenes: { threshold: 30 },
    colors: { count: 5 },
    metadata: true,
  });

  console.log('Thumbnails:', results.thumbnails);
  console.log('Scenes:', results.scenes);
  console.log('Colors:', results.colors);
  console.log('Metadata:', results.metadata);
}

// Use with a file input
const input = document.querySelector('input[type="file"]');
input?.addEventListener('change', (e) => {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (file) analyzeVideo(file);
});

Basic Examples

Generate Thumbnails Only

Extract high-quality thumbnails from key moments in your video:

import videoIntel from 'videointel';

async function generateThumbnails(videoFile: File) {
  const thumbnails = await videoIntel.getThumbnails(videoFile, {
    count: 10,        // Number of thumbnails to generate
    quality: 0.9,     // Image quality (0-1)
    width: 640,       // Optional: resize width
    height: 360,      // Optional: resize height
  });

  // Each thumbnail contains:
  // - dataUrl: Base64 image data
  // - timestamp: Time in video (seconds)
  // - quality: Quality score (0-1)
  thumbnails.forEach((thumb, i) => {
    console.log(`Thumbnail ${i + 1}: ${thumb.timestamp}s, quality: ${thumb.quality}`);
    // Use thumb.dataUrl in an <img> tag
  });
}

generateThumbnails(myVideoFile);

Detect Scene Changes

Automatically detect when scenes change in your video:

import videoIntel from 'videointel';

async function detectScenes(videoFile: File) {
  const scenes = await videoIntel.detectScenes(videoFile, {
    threshold: 30,    // Sensitivity (0-100, higher = less sensitive)
    minDuration: 1,   // Minimum scene duration in seconds
  });

  console.log(`Found ${scenes.length} scenes:`);
  scenes.forEach((scene, i) => {
    console.log(`Scene ${i + 1}: ${scene.timestamp}s (score: ${scene.score})`);
  });
}

detectScenes(myVideoFile);

Extract Dominant Colors

Get the most prominent colors from your video:

import videoIntel from 'videointel';

async function extractColors(videoFile: File) {
  const colors = await videoIntel.extractColors(videoFile, {
    count: 5,         // Number of colors to extract
    quality: 10,      // Sample quality (1-10, higher = slower but better)
  });

  console.log('Dominant colors:');
  colors.forEach((color, i) => {
    console.log(`Color ${i + 1}: ${color.hex}`);
    console.log(`  RGB: ${color.rgb.join(', ')}`);
    console.log(`  Percentage: ${color.percentage}%`);
  });
}

extractColors(myVideoFile);

Get Video Metadata

Extract technical information about the video:

import videoIntel from 'videointel';

async function getVideoInfo(videoFile: File) {
  const metadata = await videoIntel.getMetadata(videoFile);

  console.log('Video Information:');
  console.log(`Duration: ${metadata.duration}s`);
  console.log(`Resolution: ${metadata.width}x${metadata.height}`);
  console.log(`Frame Rate: ${metadata.frameRate} fps`);
  console.log(`Size: ${(metadata.size / 1024 / 1024).toFixed(2)} MB`);
  console.log(`Format: ${metadata.format}`);
}

getVideoInfo(myVideoFile);

Browser Compatibility

VideoIntel.js works in all modern browsers that support:

  • HTML5 Video API
  • Canvas API
  • File API
  • Web Workers (optional, for better performance)

✅ Supported Browsers

  • • Chrome/Edge 90+
  • • Firefox 88+
  • • Safari 14+
  • • Opera 76+

TypeScript Setup

VideoIntel.js is written in TypeScript and provides full type definitions. No additional setup is required - types are included automatically:

example.tstypescript
import videoIntel, { 
  type AnalysisOptions, 
  type AnalysisResult,
  type Thumbnail,
  type Scene,
  type Color,
  type VideoMetadata,
} from 'videointel';

// Full type inference
const options: AnalysisOptions = {
  thumbnails: { count: 5 },
  scenes: { threshold: 30 },
  colors: { count: 5 },
  metadata: true,
};

// Result is fully typed
const result: AnalysisResult = await videoIntel.analyze(file, options);

// Access typed properties
const firstThumbnail: Thumbnail = result.thumbnails![0];
const firstScene: Scene = result.scenes![0];
const firstColor: Color = result.colors![0];
const metadata: VideoMetadata = result.metadata!;

💡 Next Steps