ffmpeg-webassembly-workers
Run FFmpeg directly in browsers using WebAssembly—no server required. This skill covers single and multi-threaded setup, COOP/COEP header configuration for SharedArrayBuffer, framework integration with React/Vue/Next.js, and practical transcoding recipes. Learn memory management, progress tracking, and how to handle Cloudflare Workers limitations.
ffmpeg-webassembly-workers sets up FFmpeg in the browser for client-side video transcoding without server dependencies.
AI-generated summary based on this skill's SKILL.md
Install
JosiahSiegel/claude-plugin-marketplace/ffmpeg-webassembly-workers · repository language: Shell
git clone https://github.com/JosiahSiegel/claude-plugin-marketplace
cp -r claude-plugin-marketplace/plugins/ffmpeg-platforms/skills/ffmpeg-webassembly-workers ~/.claude/skills/ffmpeg-webassembly-workersnpx skillfed install JosiahSiegel/claude-plugin-marketplace/ffmpeg-webassembly-workersFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to use ffmpeg in javascript for browser-based video processing?
ffmpeg-webassembly-workers enables you to run FFmpeg directly in the browser using WebAssembly, eliminating the need for server-side processing. Load the FFmpeg core library, initialize it with your desired configuration, and use JavaScript to call FFmpeg commands on local files. The skill covers both single-threaded and multi-threaded setups, allowing you to transcode, extract audio, generate thumbnails, and perform other video operations entirely client-side.
What are COOP/COEP headers and why does ffmpeg-webassembly-workers need them?
ffmpeg-webassembly-workers requires Cross-Origin-Opener-Policy (COOP) and Cross-Origin-Embedder-Policy (COEP) headers to enable SharedArrayBuffer, which powers multi-threaded performance in FFmpeg WebAssembly. These headers isolate your site in the browser's process model, allowing worker threads to share memory efficiently. Without them, multi-threading is disabled and performance degrades significantly. The skill teaches you how to configure these headers on your server or hosting platform.
How do I integrate ffmpeg.wasm into React, Vue, or Next.js applications?
ffmpeg-webassembly-workers provides framework-specific integration patterns for React, Vue, and Next.js. In React, initialize FFmpeg in a useEffect hook and manage state for loading, progress, and output. For Next.js, handle server-side rendering carefully by loading FFmpeg only on the client. Vue integration uses lifecycle hooks similarly. The skill includes practical examples showing how to wrap FFmpeg initialization, handle async operations, and display progress to users during transcoding.
What strategies does ffmpeg-webassembly-workers recommend for memory management?
ffmpeg-webassembly-workers covers memory optimization through caching strategies, IndexedDB storage for FFmpeg core files, and proper cleanup after processing. Use IndexedDB to cache the compiled FFmpeg core so subsequent loads are faster and reduce bandwidth. Implement progress tracking to monitor memory usage during transcoding. The skill explains how to manage heap allocation, handle large files by processing in chunks, and configure appropriate memory limits for your target devices.
Can I convert video in browser without a server using ffmpeg-webassembly-workers?
Yes, ffmpeg-webassembly-workers is specifically designed for client-side video processing without any server involvement. Users select local video files, and FFmpeg processes them entirely in their browser using WebAssembly. You can transcode between formats, extract audio, create thumbnails, and apply filters—all without uploading to a server. This approach improves privacy, reduces bandwidth costs, and provides instant feedback. The skill includes troubleshooting guidance for common issues and Cloudflare Workers limitations.
How does ffmpeg-webassembly-workers handle multi-threading and performance optimization?
ffmpeg-webassembly-workers explains how to enable multi-threading using FFmpeg's core.mt build, which requires proper COOP/COEP header configuration and SharedArrayBuffer support. Multi-threading distributes encoding tasks across CPU cores, significantly improving transcoding speed. The skill covers performance tuning strategies including memory management, caching compiled cores in IndexedDB, progress tracking implementation, and custom FFmpeg builds. It also addresses browser compatibility and provides fallback approaches for environments where SharedArrayBuffer is unavailable.
SKILL.md
rendered from the published skill — quoted content, verbatim
CRITICAL GUIDELINES
Windows File Path Requirements
MANDATORY: Always Use Backslashes on Windows for File Paths
When using Edit or Write tools on Windows, you MUST use backslashes (\) in file paths, NOT forward slashes (/).
Quick Reference
| Package | Size | Threading | Install |
|---|---|---|---|
@ffmpeg/core |
~31MB | Single | npm install @ffmpeg/ffmpeg @ffmpeg/util |
@ffmpeg/core-mt |
~31MB | Multi | Requires COOP/COEP headers |
|
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
plugins/ffmpeg-platforms/skills/ffmpeg-webassembly-workers/SKILL.md