ffmpeg.js vue3

### 在 Vue 3 中集成和使用 `ffmpeg.js` 进行视频处理

#### 准备工作
为了在 Vue 3 应用程序中成功集成并使用 `ffmpeg.js` 或更推荐的 `ffmpeg.wasm`，需要先安装必要的依赖项。

对于基于 WebAssembly 的解决方案——即 `ffmpeg.wasm`：

npm install @ffmpeg/ffmpeg @ffmpeg/core

这一步骤确保了应用程序能够访问 FFmpeg 功能的同时保持较好的性能表现[^1]。

#### 创建 FFmpeg 实例
接下来，在项目中创建一个用于初始化 FFmpeg 实例的方法。考虑到 Vue 3 的 Composition API 和现代 JavaScript 特性，可以采用如下方式定义此方法：

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

const initFfmpeg = () => {
    const ffmpeg = createFFmpeg({
        corePath: '/path/to/your/local/ffmpeg-core.js',
        log: true,
    });
    
    return ffmpeg;
};

注意路径 `/path/to/your/local/ffmpeg-core.js` 需要替换为实际部署位置。如果是在开发环境中，则可能是相对路径；如果是生产环境，建议配置成绝对 URL 并考虑缓存策略[^2]。

#### 加载与准备资源
为了让 FFmpeg 可以正常运作，必须等待其加载完成。可以通过调用 `.load()` 方法来实现这一点：

async function prepare() {
    let ffmpegInstance = initFfmpeg();
    await ffmpegInstance.load();
}

一旦准备好之后就可以开始执行各种媒体操作了。

#### 执行视频处理任务
假设有一个名为 `input.mp4` 的文件待处理，并希望将其转换为另一种格式如 MP3 提取音频轨道：

await ffmpeg.write('input.mp4', new Uint8Array([...]));
await ffmpeg.run('-i', 'input.mp4', '-vn', '-acodec', 'libmp3lame', 'output.mp3');
let result = await ffmpeg.read('output.mp3');
console.log(result);

这里展示了如何读写二进制数据以及指定命令参数来进行具体的音视频编解码操作[^4]。

#### 处理结果展示
最后不要忘记将处理后的文件通过适当的方式呈现给用户查看或下载。可以根据实际情况选择不同的方案，比如直接播放、提供链接供下载等。