Video Generator App

This project is a React-based application that allows users to generate a video slideshow from uploaded images using FFmpeg. The generated video can be downloaded as an MP4 file.

Getting Started

This project was bootstrapped with Create React App.

Prerequisites

Ensure you have Node.js installed on your system. You will also need the following dependencies:

• @ffmpeg/ffmpeg for handling video generation
• file-saver for downloading the generated video
• framer-motion for animations

Installation

Clone the repository and install dependencies:

git clone <repository-url>
cd <project-directory>
npm install

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

How It Works

1. Users can upload multiple image files.
2. The images are processed and converted into a video using FFmpeg.
3. Each image is displayed in the video for 2 seconds.
4. The generated video is available for download as an MP4 file.
5. The default scale is 1080x1024.

Video Generation Logic

The app follows this process:

1. Load FFmpeg
2. Store uploaded images in FFmpeg's virtual filesystem
3. Create an input list for FFmpeg (ensuring correct sequence and duration per image)
4. Execute FFmpeg commands to generate the video
5. Read the generated video and provide it for download

Example FFmpeg Command Used

ffmpeg -f concat -safe 0 -i input.txt -c:v libx264 -pix_fmt yuv420p -r 30 output.mp4