最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

reactjs - FFmpeg.js in ReactVite: Worker.js 504 Error and Loading Stalls After load() - Stack Overflow

programmeradmin3浏览0评论

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);
  }
};
发布评论

评论列表(0)

  1. 暂无评论