初识@ffmpeg/ffmpeg库

前言

FFmpeg是一套可以用来记录、转换数字音频、视频，并且能够利用它们来创建一个新的流媒体格式的自由软件项目，它被广泛应用在视频处理、音频处理以及直播领域。其中，@ffmpeg/ffmpeg 是一个将 FFmpeg 编译为 WebAssembly（WASM）的库，可支持几乎所有的音视频格式。

 安装与引入

1. 使用 npm 安装 @ffmpeg/ffmpeg 和 @ffmpeg/core

   npm install @ffmpeg/core@0.11.0 @ffmpeg/ffmpeg@0.11.6 --save
   
   // @ffmpeg/ffmpeg@0.11.x 系列版本已经被广泛使用，且与 Vite 和其他工具链兼容
   

2. 在 JavaScript 文件中引入该库

   参数名	作用	默认值
   log	是否启用日志输出（true 或 false）	false
   corePath	指定 FFmpeg WebAssembly 核心文件的路径，例如 /node_modules/@ffmpeg/core/ffmpeg-core.js	（无默认值，必须指定）
   progress	提供进度回调函数，用于显示任务执行的进度信息	（无默认值，可选）

    

   import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
   

3.  启用 跨源隔离（Cross-Origin Isolation），这是浏览器安全策略的一部分.

   // vite.config.js
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     server: {
       headers: {
         'Cross-Origin-Opener-Policy': 'same-origin',
         'Cross-Origin-Embedder-Policy': 'require-corp',
       },
     },
   });
   

加载 FFmpeg‌

使用 createFFmpeg 创建一个 FFmpeg 实例，并通过 ffmpeg.load() 方法异步加载

const ffmpeg = createFFmpeg({
  log: true,
  corePath: '/node_modules/@ffmpeg/core/ffmpeg-core.js', // 指定核心路径
});
await ffmpeg.load();

处理输入文件‌

使用 fetchFile 方法从用户上传的文件或其他资源中获取文件，并通过 ffmpeg.FS 方法将其写入 FFmpeg 的虚拟文件系统（