https://github.com/adityakrshnn/framo
Glorious media processing right in your browser with Typescript support ✨
https://github.com/adityakrshnn/framo
browser ffmpeg-wasm filmstrip frame-extraction media-processing-api
Last synced: 8 months ago
JSON representation
Glorious media processing right in your browser with Typescript support ✨
- Host: GitHub
- URL: https://github.com/adityakrshnn/framo
- Owner: adityakrshnn
- License: mit
- Created: 2021-05-30T09:32:22.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-12T20:14:58.000Z (over 4 years ago)
- Last Synced: 2025-03-29T02:21:48.043Z (9 months ago)
- Topics: browser, ffmpeg-wasm, filmstrip, frame-extraction, media-processing-api
- Language: TypeScript
- Homepage:
- Size: 5.43 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Framo
✨ Glorious media processing right in your browser with Typescript support ✨
Explore the docs »
Table of Contents
## 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_](https://github.com/adityakrshnn/framo#features).
Framo is made using:
- [FFmpeg WASM](https://github.com/ffmpegwasm/ffmpeg.wasm)
- [Typescript](https://www.typescriptlang.org)
## Getting Started
### Installation
To use Framo in your project
```sh
npm install framo
```
### Usage
Initialize framo with [initializeFramo()](https://adityakrshnn.github.io/framo/classes/framo.html#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`](https://adityakrshnn.github.io/framo/classes/framo.html#ready) observable.
```
const framo = new Framo();
framo.ready.subscribe(() => {
...
});
framo.initializeFramo();
```
## Features
### 🎞️ Filmstrip : [`makeFilmstrip()`](https://adityakrshnn.github.io/framo/classes/framo.html#makeFilmstrip)
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);
```
### 🧵 Frames To Video : [`stitchFrames()`](https://adityakrshnn.github.io/framo/classes/framo.html#stitchFrames)
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);
```
### 🖼 Frame Extractor : [`extractFrames()`](https://adityakrshnn.github.io/framo/classes/framo.html#extractframes)
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
### ⚡ Ready
[`ready`](https://adityakrshnn.github.io/framo/classes/framo.html#ready) is triggered when framo is ready for operations.
```ts
framo.ready.subscribe(() => {
...
});
```
### ⚡ Progress
Subscribe to the [`progress`](https://adityakrshnn.github.io/framo/classes/framo.html#progress) observable to monitor operation progress.
```ts
framo.progress.subscribe((progress: Progress) => {
...
});
```
## Documentation
_For more details, please refer to the [Documentation](https://adityakrshnn.github.io/framo/classes/framo.html)_
## License
Distributed under the MIT License. See [`LICENSE`](https://github.com/adityakrshnn/framo/blob/master/LICENSE) for more information.