https://github.com/addyosmani/video-compress
Video compression in the browser using FFMPEG.wasm
https://github.com/addyosmani/video-compress
ffmpeg react video video-compression web
Last synced: about 1 year ago
JSON representation
Video compression in the browser using FFMPEG.wasm
- Host: GitHub
- URL: https://github.com/addyosmani/video-compress
- Owner: addyosmani
- License: mit
- Created: 2024-11-10T04:11:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-07T04:44:28.000Z (about 1 year ago)
- Last Synced: 2025-03-29T19:04:38.909Z (about 1 year ago)
- Topics: ffmpeg, react, video, video-compression, web
- Language: TypeScript
- Homepage: https://compress.addy.ie
- Size: 228 KB
- Stars: 136
- Watchers: 3
- Forks: 20
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Browser Video Compressor
A powerful, browser-based video compression tool built with React and FFMPEG.wasm. Compress videos directly in your browser with real-time preview and advanced settings - no server uploads required.
[Demo](https://compress.addy.ie)
## Features
- 🎬 Client-side video compression
- 🔒 Privacy-first (all processing happens locally)
- 👀 Real-time compression preview
- 📊 Live file size estimation
- ⚙️ Advanced compression settings:
- Multiple compression methods:
- Bitrate targeting
- Quality percentage
- File size targeting
- CRF (Constant Rate Factor)
- Video codec selection (H.264/H.265)
- Audio codec options (AAC/MP3)
- Frame rate control
- Resolution scaling
- Audio bitrate adjustment
## Technology Stack
- React 18
- TypeScript
- Tailwind CSS
- FFMPEG.wasm
- Radix UI Components
- Lucide Icons
- Vite
## Getting Started
### Prerequisites
- Node.js 18 or higher
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/video-compressor.git
cd video-compressor
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
The application will be available at `http://localhost:5173`
### Building for Production
```bash
npm run build
```
## Usage
1. Drag and drop a video file or click to browse
2. (Optional) Click the Settings button to adjust compression parameters:
- Choose compression method:
- Bitrate: Target a specific video bitrate
- Quality: Set a quality percentage (1-100%)
- File size: Target a specific output size
- CRF: Fine-tune quality (18-51, lower is better)
- Select video codec (H.264/H.265)
- Choose audio settings (codec and bitrate)
- Adjust frame rate
- Set maximum resolution
3. Click "Compress Video" to start compression
4. Watch the real-time preview and progress
5. Download the compressed video when complete
## Technical Details
### Video Processing
- Uses FFMPEG.wasm for client-side video processing
- Supports multiple compression strategies:
- Bitrate-based: Direct control over output bitrate
- CRF-based: Quality-focused compression
- Percentage-based: Simplified quality control
- File size targeting: Automatic bitrate calculation
### Preview System
- Real-time preview during compression
- Split-view comparison (original vs. compressed)
- Progress-based preview scrubbing
- Live file size estimation
### State Management
- Efficient React state management
- Proper cleanup of resources
- Memory leak prevention
- Comprehensive error handling
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- [FFMPEG.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm) for browser-based video processing
- [Radix UI](https://www.radix-ui.com/) for accessible UI components
- [Tailwind CSS](https://tailwindcss.com) for styling
- [Lucide](https://lucide.dev) for icons