使用 ffmpeg.js 0.10.0 实现浏览器端视频格式转换（Webm → MP4）

一、前言

在 Web 应用中实现浏览器端的音视频处理，ffmpeg.js 是一个强大的开源解决方案。本文基于 Vue 项目环境，演示如何通过 ffmpeg.js 0.10.0 实现 Webm 转 MP4 格式并下载的完整流程。该方案具有以下特点：

• 纯前端实现，无需服务器参与

• 支持主流视频格式转换

• 兼容现代浏览器

  ---

  二、环境配置

  1. 安装依赖

  bash

  npm install @ffmpeg/core@0.10.0 @ffmpeg/ffmpeg@0.9.8

  2. Vue 配置（vue.config.js）

  javascript

  module.exports = {
    devServer: {
      port: 8081,
      headers: {
        'Cross-Origin-Opener-Policy': 'same-origin',
        'Cross-Origin-Embedder-Policy': 'require-corp'
      }
    }
  }

  3. 静态资源配置

  将以下文件放入 public 目录：

  • ffmpeg-core.js

  • ffmpeg-core.wasm

  • ffmpeg-core.worker.js

    ---

    三、核心实现

    1. 初始化 FFmpeg

    javascript

    import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
    // 初始化 FFmpeg 实例
    const ffmpeg = createFFmpeg({
      corePath: "/ffmpeg-core.js", // 指向 public 目录的静态资源
      log: true // 开启日志输出
    });
    await ffmpeg.load(); // 加载核心模块

    2. 格式转换逻辑

    javascript

    // 写入输入文件
    await ffmpeg.FS('writeFile', 'input.webm', await fetchFile(superBuffer));
    // 执行转换命令
    await ffmpeg.run(
      '-i', 'input.webm',
      '-c:v', 'libx264',  // 指定视频编码器
      '-preset', 'fast',  // 编码预设
      'output.mp4'
    );
    // 读取输出文件
    const data = ffmpeg.FS('readFile', 'output.mp4');

    3. 文件下载实现

    javascript

    const mp4Blob = new Blob([data.buffer], { type: 'video/mp4' });
    const downloadUrl = URL.createObjectURL(mp4Blob);
    // 创建下载链接
    const anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = `video_${Date.now()}.mp4`;
    anchor.click();
    // 释放内存
    URL.revokeObjectURL(downloadUrl);

    ---

    四、注意事项

    1. 性能优化

    • 建议限制处理视频的时长（建议 ≤30秒）

    • 显示加载进度条提升用户体验

      
      （图片来源网络，侵删）

    • 使用 Web Worker 避免阻塞主线程

      2. 常见问题

      Q：出现跨域错误？

      
      （图片来源网络，侵删）

      • 确保开发服务器配置了正确的 CORS 头

      • 生产环境需要配置对应的 HTTP 头

        
        （图片来源网络，侵删）

        Q：转换后的视频无法播放？

        • 检查输出格式是否支持目标编码器

        • 尝试添加 -pix_fmt yuv420p 参数

          Q：内存占用过高？

          • 及时清理临时文件

            javascript

            ['input.webm', 'output.mp4'].forEach(file => {
              ffmpeg.FS('unlink', file);
            });

            ---

            五、扩展应用

            本文示例可以扩展实现：

            • 视频截图功能（使用 -ss 参数）

            • 视频压缩处理（调整码率参数）

            • 多格式支持（mov/flv/avi 等）

            • 音视频分离/合并

              ---

              六、总结

              通过 ffmpeg.js 我们实现了：

              1. 浏览器端零依赖的视频处理能力

              2. Webm → MP4 的无缝转换

              3. 前端直接文件下载

              官方文档参考：FFmpeg.wasm Documentation