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

$3

To use Framo in your project

``sh
npm install framo
`

$3

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

`ts
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

$3

Make a filmstrip using frames at regular intervals.

`ts
const config: FilmstripRequestConfig = {
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);
`

$3

Stitch frames together to make a video.

`ts
const config: StitchFramesRequestConfig = {
files: ,
inputExtension: FramoImageExtension.JPG,
videoExtension: FramoVideoExtension.MP4;

/* Optional /
frameDuration: 1,
};

const frames = await framo.stitchFrames(config);
`

$3

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

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

const frames = await framo.extractFrames(config);
`

_More features coming soon..._



Observables

$3

ready is triggered when framo is ready for operations.

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

$3

Subscribe to the progress observable to monitor operation progress.

`ts
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.