Integrating ffmpeg.wasm into a React 18 app with a custom Gulp build reveals practical constraints beyond demos. The author needed client-side audio/video processing for small files, but the browser sandbox lacks native FFmpeg's disk access and streaming. This setup forced manual configuration, exposing hidden requirements like cross-origin isolation and memory limits.

The first hurdle was Gulp's inability to handle WebAssembly. Unlike modern bundlers, it required copying FFmpeg core files manually and specifying absolute paths. The next issue was instability, solved by adding Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers. React 18's Strict Mode also caused double initialization, fixed by treating FFmpeg as a singleton outside the render cycle.

Ultimately, ffmpeg.wasm excels for lightweight tasks like trimming or format conversion where privacy and instant feedback matter. However, browser memory constraints make it unsuitable for large videos or production pipelines. The author concludes a hybrid approach is best: client-side ffmpeg.wasm for previews, with native FFmpeg on the backend for heavy lifting.