vue使用ffmpeg
时间: 2025-02-24 10:35:16 浏览: 52
### 集成 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]。
阅读全文
相关推荐


















