vue 使用ffmpeg

### 集成 FFmpeg 在 Vue.js 中进行视频编码和解码 #### 安装依赖项 为了在 Vue.js 项目中使用 FFmpeg，首先需要安装 `ffmpeg.wasm` 库。这个库提供了 WebAssembly 支持，使得可以在浏览器环境中运行 FFmpeg。 ```bash npm install @ffmpeg/ffmpeg @ffmpeg/core ``` #### 初始化 FFmpeg 实例 创建一个新的 JavaScript 文件用于初始化 FFmpeg 的实例并加载必要的核心文件： ```javascript // src/utils/initFfmpeg.js import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; const ffmpeg = createFFmpeg({ log: true }); export const loadFfmpeg = async () => { await ffmpeg.load(); }; ``` #### 处理视频上传与转换 接下来编写逻辑来处理用户的视频上传以及调用 FFmpeg 执行具体的编码或解码工作： ```vue <template> <div> <input type="file" @change="handleFileChange"/> <button @click="processVideo">Process Video</button> <video controls v-if="outputUrl"> <source :src="outputUrl" /> </video> </div> </template> <script> import { ref } from 'vue'; import { loadFfmpeg } from '@/utils/initFfmpeg'; import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; export default { setup() { let fileInput; const outputUrl = ref(null); const ffmpegInstance = createFFmpeg({ log: true }); const handleFileChange = (event) => { fileInput = event.target.files[0]; }; const processVideo = async () => { if (!fileInput) return; // 加载 FFmpeg 并读取输入文件 await loadFfmpeg(); ffmpegInstance.FS('writeFile', 'input.mp4', await fetchFile(fileInput)); // 使用 FFmpeg 转换视频格式为例 await ffmpegInstance.run('-i', 'input.mp4', '-vf', 'scale=640:-1', 'output.webm'); // 获取输出文件 URL const data = ffmpegInstance.FS('readFile', 'output.webm'); outputUrl.value = URL.createObjectURL(new Blob([data.buffer], {type: 'video/webm'})); }; return { handleFileChange, processVideo, outputUrl }; } } </script> ``` 上述代码展示了如何在一个简单的 Vue 组件内完成从用户界面接收 MP4 格式的视频文件作为输入，通过 FFmpeg 将其缩小尺寸后保存为 WEBM 格式，并提供给前端播放器展示[^1]。

### 安装和配置 `ffmpeg` 进行视频处理 #### 1. 添加必要的依赖项 为了在 Vue.js 项目中集成 FFmpeg 并实现视频处理功能，需要先安装相应的 npm 包： ```bash npm install @ffmpeg/ffmpeg ``` 此命令会将 `@ffmpeg/ffmpeg` 库添加到项目的依赖列表中[^2]。 #### 2. 准备 WebAssembly 文件 除了上述 NPM 包外，还需要准备几个额外的资源文件来支持 WebAssembly 的运行环境。这些文件应放置于应用的公共目录 (`public`) 下以便能够被浏览器访问: - ffmpeg.min.js - ffmpeg-core.js - ffmpeg-core.worker.js - ffmpeg-core.wasm 确保以上提到的所有文件都已正确部署至 `/public` 路径下[^1]。 #### 3. 初始化 FFmpeg 实例 接下来，在组件内部初始化一个新的 FFmpeg 对象实例用于后续操作。这可以通过 ES6 模块导入语法完成： ```javascript import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; const ffmpeg = createFFmpeg({ log: true }); ``` 这段代码创建了一个新的 FFmpeg 上下文，并启用了日志输出选项方便调试。 #### 4. 加载 WASM 模块 为了让 FFmpeg 正常工作，必须加载之前放入 public 文件夹中的 WebAssembly 模块。通常可以在 mounted 生命周期钩子函数里执行这项任务： ```javascript async function loadFfmpeg() { await ffmpeg.load(); } loadFfmpeg().then(() => console.log('FFmpeg loaded successfully')); ``` 一旦模块成功加载完毕，则可以继续下一步的操作了。 #### 5. 处理上传的视频文件 假设已经有一个方法用来接收用户提交的视频文件对象 (file)，那么就可以利用 FFmpeg 来对其进行转换或编辑等操作。下面是一个简单的例子展示如何提取指定数量的关键帧图像序列： ```javascript // 假设 file 是由 input[type="file"] 获取到的对象 await ffmpeg.write(`input.mp4`, await fetchFile(file)); await ffmpeg.run('-i', 'input.mp4','-r','1','-ss','0','-vframes','5','-f','image2','-s','352x240','output-%02d.jpeg'); for(let i=1;i<=5;i++){ const dataUrl = URL.createObjectURL(new Blob([new Uint8Array(ffmpeg.read(`output-${String(i).padStart(2,'0')}.jpeg`).buffer)])); // 将生成的数据链接赋给 img 标签 src 属性显示图片 或者保存起来供以后使用 } ``` 这里演示的是从输入 MP4 中抽取前五秒内的五个固定间隔的画面片段并调整大小为 352×240 分辨率后另存为 JPEG 图像的过程[^3]。