framo

<br /> <p align="center">  <h1 align="center">Framo</h1>  <p align="center"> <img alt="Framo License" src="https://img.shields.io/npm/l/framo" /> <img alt="CodeQL" src="https://github.com/adityakrshnn/framo/actions/workflows/codeql-analysis.yml/badge.svg" /> <img alt="Lint & Test" src="https://github.com/adityakrshnn/framo/actions/workflows/lint-and-test.yml/badge.svg" /> <img alt="Framo bundle size" src="https://img.shields.io/bundlephobia/min/framo"/> <a href="https://www.npmjs.com/package/framo"><img alt="Framo npm version" src="https://img.shields.io/npm/v/framo"/></a> <img alt="Deepscan" src="https://deepscan.io/api/teams/14410/projects/17537/branches/405409/badge/grade.svg"/> <img alt="Framo Maintained yes" src="https://img.shields.io/badge/Maintained-Yes-brightgreen"/> </p> <p align="center"> ✨ Glorious media processing right in your browser with Typescript support ✨ <br /> <a href="https://adityakrshnn.github.io/framo/classes/framo.html"><strong>Explore the docs »</strong></a> <br /> <br />  </p> </p>  <summary><h2 style="display: inline-block">Table of Contents</h2></summary> <ol> <li> <a href="#about-the-project">About The Project</a> </li> <li> <a href="#getting-started">Getting Started</a>  </li> <li><a href="#features">Features</a></li> <li><a href="#observables">Observables</a></li> <li><a href="#documentation">Documentation</a></li> <li><a href="#license">License</a></li>   </ol>  ## 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). <br/> 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: <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: <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: <File>, filename: 'input.mp4', timeInterval: 5, outputExtension: FramoImageExtension.JPG, }; const frames = await framo.extractFrames(config); ``` _More features coming soon..._ <br/> ## 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.