video_web_compressor

Flutter web-only package for client-side video compression and format conversion using * FFmpeg.wasm*.
All processing happens inside the browser with no backend or uploads required.

Overview

video_web_compressor provides a simple and predictable API to compress, optimize, and convert videos directly in Flutter Web applications.
The design philosophy follows Cubit / Bloc–style packages: minimal surface area, explicit configuration, and clear execution flow.

Features

Client-side video compression (no server required)
Optimized for Flutter Web
Resolution presets (480p, 720p, 1080p)
Smart compression recommendation before processing
Progress and log streams
Format conversion (MP4, WebM, MKV)
Download helper utilities
Fully configurable quality and performance options

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  video_web_compressor: ^0.0.1

Install packages:

flutter pub get

Platform Support

Platform	Supported
Web	Yes
Android	No
iOS	No
Windows	No
macOS	No
Linux	No

This package is web-only and relies on FFmpeg WebAssembly.

Setup

FFmpeg Script

1. Option1 (Online Pull for FFMPEG)

Add the following script to web/index.html:


<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.12.7/dist/umd/ffmpeg.js"></script>

1. RECOMMENDED Option2 (Manual Setup for FFMPEG)

Use the ffmpeg-loader.js and ffmpeg files in the example/web/ directory.
then add this to your index.html in body before flutter script:


<script src="ffmpeg-loader.js"></script>`

These headers are required for FFmpeg.wasm to function correctly.

Required Headers

Your web server must send the following headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Basic Usage


final processor = VideoProcessor();
await
processor.initialize
();

final config = VideoCompressionConfig.hd720p(
  fps: 24,
  crf: 28,
);

final result = await
processor.processVideo
(
videoBytes: videoBytes,
config: config,
);

if (result.success) {
VideoDownloadHelper.downloadVideo(
videoBytes: result.outputBytes!,
filename: 'compressed.mp4',
);
}

Compression Analysis

Before processing, you can evaluate whether compression is beneficial:


final metadata = await
processor.extractMetadata
(
videoBytes);
final analysis = analyzeCompression(metadata, config);

if (analysis.recommendation.isRecommended) {
await processor.processVideo(
videoBytes: videoBytes,
config: config,
);
}

Progress Tracking

processor.progressStream.listen
(
(progress) {
print('${(progress * 100).toStringAsFixed(1)}%');
});

Configuration Presets

VideoCompressionConfig.sd480p
();VideoCompressionConfig.hd720p
();VideoCompressionConfig.hd1080p
();VideoCompressionConfig.webOptimized
();

Core API

VideoProcessor — main processing service
VideoCompressionConfig — compression configuration
VideoMetadata — extracted video metadata
CompressionAnalysis — compression recommendation result
ProcessingResult — processing outcome
VideoDownloadHelper — download utilities

Notes

Large input videos may consume significant browser memory
Chrome and Edge provide the best runtime performance
Safari support is limited due to SharedArrayBuffer restrictions

Example

A complete working example is available in the example/ directory, demonstrating:

Video selection and validation
Compression analysis
Progress tracking
Download handling