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 #

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

License #

MIT License Copyright (c) 2Math0