Electron+React集成FFmpegWasm遇加载停滞及SharedArrayBuffer未定义问题

一、Electron 环境下 FFmpeg.load 卡住问题 #

1. 替换远程资源为本地加载 #

直接从 unpkg 拉取资源并转 Blob 容易触发 Electron 的跨域或沙箱限制，建议将 FFmpeg 核心文件下载到项目本地：

• 下载 @ffmpeg/core-mt@0.12.6 的三个核心文件（ffmpeg-core.js、ffmpeg-core.wasm、ffmpeg-core.worker.js），放到项目 public 目录下
• 修改初始化代码，使用本地相对路径：

const ffmpegInit = async () => {
  try {
    const ffmpeg = ffmpegRef.current;
    // 新增错误监听，捕获隐藏异常
    ffmpeg.on("error", (err) => console.error("FFmpeg 加载错误:", err));
    ffmpeg.on("log", ({ message }) => console.log(message));
    ffmpeg.on("progress", ({ progress }) => console.log("加载进度:", progress));

    await ffmpeg.load({
      coreURL: "/ffmpeg-core.js",
      wasmURL: "/ffmpeg-core.wasm",
      workerURL: "/ffmpeg-core.worker.js",
    });
    setLoaded(true);
  } catch (err) {
    console.error("初始化失败:", err);
  }
};

2. 调整 Electron 沙箱与 Web 配置 #

Electron 默认开启沙箱会限制 WebAssembly 和跨源资源的运行，修改主进程的 BrowserWindow 配置：

const mainWindow = new BrowserWindow({
  webPreferences: {
    sandbox: false, // 关闭沙箱以支持 FFmpeg WebAssembly
    contextIsolation: true, // 保持上下文隔离保障安全
    preload: path.join(__dirname, "preload.js"),
  },
});

二、Vite 构建后 SharedArrayBuffer is not defined 问题 #

1. 确保生产环境跨源头生效 #

Vite 的 server.headers 仅作用于开发服务器，Electron 打包后需要在主进程中全局添加响应头：

import { session } from 'electron';

// 全局设置跨源隔离头
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
  callback({
    responseHeaders: {
      ...details.responseHeaders,
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    },
  });
});

2. 可选：切换单线程 FFmpeg 核心 #

如果不需要多线程功能，可替换为单线程版本，无需依赖 SharedArrayBuffer：

npm uninstall @ffmpeg/core-mt
npm install @ffmpeg/core@0.12.6

修改初始化代码中的 baseURL 为单线程版本的资源路径即可。

3. 优化 Vite 依赖配置 #

去掉 optimizeDeps.exclude 中对 FFmpeg 包的限制，避免预构建异常：

export default defineConfig({
  plugins: [react(), crossOriginIsolation()],
  // 移除 optimizeDeps.exclude 相关配置
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    },
  },
});

内容的提问来源于stack exchange，提问作者Satnam Sandhu