前端使用ffmpeg进行视频格式转换 (WebM → MP4)

复制代码

1、这里以vue项目为例，实现使用ffmpeg将.webm格式的blob文件转化为mp4的。
2、因为在项目中使用到杰西卡播放器，该播放器录制功能，在移动端录制的blob文件为.webm格式的，在ios或者低版本的安卓手机端保存录制文件时，文件打开会出现黑屏无法播放的问题，想正常播放就需要进行格式转化。
3、官方文档地址：https://ffmpegwasm.netlify.app/docs/getting-started/installation
4、注意v0.11.x和0.12.x的使用区别

1、安装依赖

typescript 复制代码

pnpm install @ffmpeg/ffmpeg @ffmpeg/util //版本为v.0.12.x
pnpm install @ffmpeg/core -D

2、配置ffmpeg的核心加载文件

在node-moudle/@ffmepg/core 找到文件"esm/ffmpeg-core.js"，"ffmpeg-core.wasm" 复制到项目static目录下，ffmpeg版本为0.12.x以上，加载需要手动配置加载必须文件

3、解决调用ffmpeg.load()无响应问题（必须）

在vite.config.js文件中，配置如下

typescript 复制代码

export default defineConfig({
  optimizeDeps: {
    exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
  },
})
//注意：不配置调用ffmpeg.load()时，不会出现任何报错，也不知道如何排查，我在这个问题上排查了很久

4、封装一个视频格式转换的方法

这是实现视频格式转换的核心处理流程，根据项目的需求，可以在此基础上去添加加载状态，监控转转化的进度，提高用户体验

typescript 复制代码

 const videoConverter = async () => {
  //创建视频处理器
  const ffmpeg = new FFmpeg();
  //开启日志监听
  ffmpeg.on("log", ({ message: msg }) => {
    console.log(msg);
  });
  //加载核心文件
  await ffmpeg.load({
    coreURL: await toBlobURL(`/static/esm/ffmpeg-core.js`, "text/javascript"),
    wasmURL: await toBlobURL(`/static/esm/ffmpeg-core.wasm`, "application/wasm"),
  });
  await ffmpeg.writeFile("test.webm", await fetchFile(recorder.getBlob()));
  //视频格式转化
  await ffmpeg.exec(["-i", "test.webm", "test.mp4"]);
  //重新封装格式，-c copy 表示直接复制视频和音频流，不进行重新编码，只是改变封装格式。
  await ffmpeg.exec(["-i", "test.mp4", "-c", "copy", "test.mp4"]);
  //读取转化后的文件
  const data = await ffmpeg.readFile("test.mp4");
  // 清理文件系统中的临时文件
  await ffmpeg.deleteFile("test.webm");
  await ffmpeg.deleteFile("test.mp4");
  // 创建 Blob 对象
  const blob = new Blob([data], { type: "video/mp4" });
  // 保存mp4文件
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "video.mp4";
  a.click();
  URL.revokeObjectURL(url);
};

复制代码

按照上面的步骤你就实现了一个简单视频格式转换，但是ffmpeg的功能不仅仅如此，它还可以实现
1. 降低视频分辨率
2. 降低视频比特率
3. 降低帧率
......
虽然ffmpeg功能强大，但是前端通过这种方式处理视频，太耗时，太耗时！！！用户体验太差，建议把压力交给服务端处理