I'm trying to implement video compression in a React application using @ffmpeg/ffmpeg with Vite, but I'm encountering issues with loading the FFmpeg core files. The loading process stalls after calling load(), and I'm getting a 504 error for the worker.js file.
When initializing FFmpeg in my React component, the loading process hangs after calling ffmpeg.load(). In the network tab, I see a 504 Gateway Timeout error for worker.js?type=module&worker_file.
const loadFFmpeg = async () => {
try {
setIsLoading(true);
const ffmpegInstance = new FFmpeg();
ffmpegInstance.on('log', ({ message }) => {
console.log(message);
});
ffmpegInstance.on('progress', ({ progress: prog }) => {
setProgress(prog * 100);
});
// Attempting to load FFmpeg
await ffmpegInstance.load(); // Stalls here
// Also tried with explicit URLs:
// await ffmpegInstance.load({
// coreURL: '/.../ffmpeg-core.js',
// wasmURL: '/.../ffmpeg-core.wasm',
// workerURL: '/.../ffmpeg-core.worker.js'
// });
setFFmpeg(ffmpegInstance);
setIsReady(true);
} catch (err) {
console.error('FFmpeg load error:', err);
setError('Failed to initialize FFmpeg');
} finally {
setIsLoading(false);
}
};