FFmpeg + WebAssembly：浏览器端视频处理的未来

FFmpeg 是世界上最流行的音视频处理框架，几乎所有的视频编辑软件、流媒体服务器都在底层使用它。然而，它一直只能在桌面环境或服务器上运行。直到 WebAssembly 的出现，一切都改变了。

什么是 WebAssembly？

WebAssembly（简称 Wasm）是一种低级的字节码格式，可以在现代浏览器中以接近原生代码的速度运行。它让你可以用 C、C++、Rust 等语言编写代码，然后编译成 Wasm 格式在浏览器中执行。

关键特性：

• 高性能：执行速度接近原生代码（约为原生速度的 80-90%）
• 安全性：运行在浏览器沙箱中，无法访问系统资源
• 可移植性：一次编译，到处运行
• 与 JavaScript 互操作：可以和 DOM、Web API 无缝配合

FFmpeg.wasm 的诞生

FFmpeg.wasm 项目将 FFmpeg 编译为 WebAssembly 格式，使其能够在浏览器中直接运行。这意味着你可以在不安装任何软件的情况下，在网页上完成视频转码、剪辑、合并等复杂操作。

技术架构

// FFmpeg.wasm 基本用法
import { FFmpeg } from '@ffmpeg/ffmpeg';

const ffmpeg = new FFmpeg();
await ffmpeg.load();  // 加载 WASM 核心（约 31MB）

// 读取输入文件
const inputData = await fetchFile('input.mp4');
await ffmpeg.writeFile('input.mp4', inputData);

// 执行转换命令
await ffmpeg.exec([
  '-i', 'input.mp4',
  '-c:v', 'libx264',
  '-crf', '23',
  'output.mp4'
]);

// 读取输出文件
const outputData = await ffmpeg.readFile('output.mp4');

M3U8 转 MP4 的实现原理

我们的在线转换工具正是基于 FFmpeg.wasm 实现的。整个转换流程如下：

1. 加载引擎：首次使用时下载 FFmpeg.wasm 核心文件（约 31MB），之后浏览器会缓存
2. 获取 M3U8：通过 CORS 代理获取 M3U8 播放列表内容
3. 解析分片：解析 M3U8 文件，提取所有 TS 分片的 URL
4. 下载分片：逐个下载所有 TS 视频分片
5. 合并转换：使用 FFmpeg 将所有分片合并为一个完整的 MP4 文件
6. 输出结果：生成 Blob URL 供用户下载

CORS 代理的作用

由于浏览器的安全策略（同源策略），网页不能直接请求不同域名的资源。而 M3U8 链接和视频分片通常托管在不同的服务器上。

我们使用 Cloudflare Workers 作为 CORS 代理：

// 客户端请求
const response = await fetch(
  `https://worker.example.com/${encodeURIComponent(m3u8Url)}`
);

// Worker 端处理
export default {
  async fetch(request) {
    const url = decodeURIComponent(
      new URL(request.url).pathname.slice(1)
    );
    const response = await fetch(url);
    // 添加 CORS 头
    return new Response(response.body, {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET'
      }
    });
  }
}

性能优化策略

浏览器端视频处理面临独特的性能挑战。以下是我们采用的优化策略：

1. 分片下载优化

• 使用 HTTP/2 多路复用减少连接开销
• 实现错误重试机制
• 支持断点续传

2. 内存管理

• 及时释放已处理的分片数据
• 限制最大分片数量防止 OOM
• 使用 -c copy 避免重新编码，减少 CPU 占用

3. 用户体验

• 实时进度显示
• 支持取消操作
• FFmpeg 引擎缓存复用

未来展望

随着 WebAssembly 技术的不断发展，浏览器端视频处理的能力将越来越强大：

• SharedArrayBuffer 支持：实现多线程并行处理，大幅提升速度
• GPU 加速：利用 WebGPU API 进行硬件加速转码
• 更小的 WASM 包：通过 Tree Shaking 减少核心文件大小
• 更丰富的功能：支持字幕嵌入、水印添加、视频滤镜等

也许在不久的将来，复杂的视频编辑工作也能在浏览器中轻松完成，而不再需要安装笨重的桌面软件。