如何在Svelte项目中使用ffmpeg npm包？

直接安装原生 ffmpeg npm 包无法在前端环境运行，该包仅适配 Node.js 服务端场景，前端项目需使用 WebAssembly 版本的 @ffmpeg/ffmpeg，具体操作步骤如下：

1. 安装正确依赖 #

执行以下命令安装适配前端的 ffmpeg 相关包：

npm install @ffmpeg/ffmpeg @ffmpeg/core

2. 配置 Vite 兼容规则（Svelte / SvelteKit 通用） #

ffmpeg.wasm 依赖 wasm 二进制文件和 SharedArrayBuffer 高性能 API，需要在 vite.config.js 中添加如下配置：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  optimizeDeps: {
    exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/core']
  },
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp'
    }
  }
});

以上响应头配置是 SharedArrayBuffer 运行的必要条件，Linux 本地开发和生产部署时都需要配置，生产环境需要在对应的静态资源服务端添加相同响应头。

3. Svelte 组件调用示例 #

如果使用 SvelteKit，需要禁用服务端渲染逻辑，避免服务端环境缺少浏览器 API 报错：

<script>
  import { FFmpeg } from '@ffmpeg/ffmpeg';
  import { fetchFile } from '@ffmpeg/util';

  let ffmpeg = null;
  let loaded = false;

  // 仅在客户端环境初始化ffmpeg
  async function loadFFmpeg() {
    ffmpeg = new FFmpeg();
    ffmpeg.on('log', ({ message }) => console.log(message));
    await ffmpeg.load({
      coreURL: '/node_modules/@ffmpeg/core/dist/ffmpeg-core.js',
      wasmURL: '/node_modules/@ffmpeg/core/dist/ffmpeg-core.wasm'
    });
    loaded = true;
  }

  // 示例功能：选中的视频前3秒转GIF
  async function convertToGif(videoFile) {
    if (!loaded) return;
    // 将输入文件写入ffmpeg虚拟内存
    await ffmpeg.writeFile('input.mp4', await fetchFile(videoFile));
    // 执行ffmpeg转码命令
    await ffmpeg.exec(['-i', 'input.mp4', '-t', '3', '-r', '10', 'output.gif']);
    // 读取输出文件并触发下载
    const data = await ffmpeg.readFile('output.gif');
    const url = URL.createObjectURL(new Blob([data], { type: 'image/gif' }));
    const a = document.createElement('a');
    a.href = url;
    a.download = 'output.gif';
    a.click();
  }

  // 客户端挂载后执行加载逻辑
  if (typeof window !== 'undefined') {
    loadFFmpeg();
  }
</script>

{#if loaded}
  <input type="file" accept="video/mp4" on:change={(e) => convertToGif(e.target.files[0])} />
{:else}
  <p>ffmpeg 资源加载中...</p>
{/if}

Linux 环境额外注意事项 #

• Node.js 版本需 >= 16，避免依赖兼容性问题
• 如果本地开发加载 wasm 文件报404，可手动将 node_modules/@ffmpeg/core 下的 ffmpeg-core.js、ffmpeg-core.wasm、ffmpeg-core.worker.js 复制到项目 static 目录，再将初始化时的路径改为 /ffmpeg-core.js 等对应路径即可
• 若 ffmpeg 仅在服务端运行，可直接安装 fluent-ffmpeg 包，同时提前在 Linux 系统安装原生 ffmpeg 二进制即可，无需处理浏览器端配置：

  # Debian/Ubuntu 系
  sudo apt update && sudo apt install ffmpeg
  # RHEL/CentOS 系
  sudo dnf install ffmpeg
  

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