Framo

✨ Glorious media processing right in your browser with Typescript support ✨
Explore the docs »

Table of Contents

1. About The Project
2. Getting Started
3. Features
4. Observables
5. Documentation
6. License

About The Project

Framo aims to provide advanced media features on the browser itself without having to configure or setup multiple dependencies. It does all the hard work for you by using the best configurations for FFmpeg and only exposing the necessary options. See the full list of features.

Framo is made using:

• FFmpeg WASM
• Typescript

Getting Started

Installation

To use Framo in your project

npm install framo

Usage

Initialize framo with initializeFramo() before using any of its features

const framo = new Framo();

await framo.initializeFramo();
...
OR
framo.initializeFramo().then(() => {
  ...
})

Alternatively, you can initialize framo asynchronously by subscribing to the ready observable.

const framo = new Framo();

framo.ready.subscribe(() => {
  ...
});
framo.initializeFramo();

Features

🎞️ Filmstrip : makeFilmstrip()

Make a filmstrip using frames at regular intervals.

const config: FilmstripRequestConfig = {
  file: <File>,
  filename: 'input.mp4',
  timeInterval: 1,
  outputExtension: FramoImageExtension.JPG,
  orientation: FilmstripOrientation.VERTICAL,

  /** Optional */
  resolution: {
    height: 150,
  },
  margin: 5,
  padding: 5,
  color: '#ff0000',
}

const filmstrip = await framo.makeFilmstrip(config);

🧵 Frames To Video : stitchFrames()

Stitch frames together to make a video.

const config: StitchFramesRequestConfig = {
  files: <Files>,
  inputExtension: FramoImageExtension.JPG,
  videoExtension: FramoVideoExtension.MP4;

  /** Optional */
  frameDuration: 1,
};

const frames = await framo.stitchFrames(config);

🖼 Frame Extractor : extractFrames()

Extract frames from videos at specific time points or at regular intervals.

const config: ExtractFramesRequestConfig = {
  file: <File>,
  filename: 'input.mp4',
  timeInterval: 5,
  outputExtension: FramoImageExtension.JPG,
};

const frames = await framo.extractFrames(config);

More features coming soon...

Observables

⚡ Ready

ready is triggered when framo is ready for operations.

framo.ready.subscribe(() => {
  ...
});

⚡ Progress

Subscribe to the progress observable to monitor operation progress.

framo.progress.subscribe((progress: Progress) => {
  ...
});

Documentation

For more details, please refer to the Documentation

License

Distributed under the MIT License. See LICENSE for more information.