Polotno to Video

Convert Polotno store into video files using browser-based video encoding.

Installation

npm install @polotno/video-export

Features

• ✅ Browser-based video encoding (no server required)
• ✅ Support for animations and timeline
• ✅ Multiple pages with durations
• ✅ Audio support with multiple tracks, delays, and volume control
• ✅ Customizable FPS and pixel ratio
• ✅ Progress tracking
• ✅ MP4 output format

Usage

import { storeToVideo } from '@polotno/video-export';
import { createStore } from 'polotno/model/store';

const store = createStore({ key: 'YOUR_KEY' });

// Export video
const videoBlob = await storeToVideo({
  store,
  fps: 30, // Frames per second (default: 30)
  pixelRatio: 2, // Pixel ratio for quality (default: 1)
  onProgress: (progress, frameTime) => {
    console.log(`Progress: ${Math.round(progress * 100)}%`);
    console.log(`Frame render time: ${frameTime}ms`);
  },
  // Optional: cancel the export
  // signal: new AbortController().signal,
});

// Download the video
const url = URL.createObjectURL(videoBlob);
const link = document.createElement('a');
link.href = url;
link.download = 'video.mp4';
link.click();

Cancel / Abort

You can cancel an in-progress export with an AbortController:

const controller = new AbortController();

const promise = storeToVideo({
  store,
  signal: controller.signal,
});

// Later...
controller.abort();

// `storeToVideo` will reject with an AbortError
await promise;

How it works

1. Timeline Calculation: The function calculates the total duration from all pages and their durations
2. Frame Rendering: For each frame at the specified FPS:
   • Updates the store's current time
   • Selects the appropriate page
   • Renders the page to a data URL using store.toDataURL()
   • Draws the image to a canvas
3. Video Encoding: Uses Media Bunny to encode frames into MP4
4. Output: Returns a Blob that can be downloaded or displayed

Audio Support

The library supports adding audio tracks to your videos. Audio tracks are automatically mixed with proper delays and volumes:

// Add audio to your store
store.addAudio({
  src: 'https://example.com/audio.mp3',
  delay: 0, // Delay in ms before audio starts
  startTime: 0, // Relative start point in the audio (0-1)
  endTime: 1, // Relative end point in the audio (0-1)
  volume: 1, // Volume level (0-1)
});

// Export with audio (enabled by default)
const videoBlob = await storeToVideo({
  store,
  includeAudio: true, // default: true
});

// Or disable audio
const videoBlob = await storeToVideo({
  store,
  includeAudio: false,
});