FFmpeg WebCLI: 基于 WebAssembly 的浏览器端视频编辑

FFmpeg WebCLI 是一个基于浏览器的视频编辑器，它利用 ffmpeg.wasm 在用户设备上本地执行所有媒体处理任务。通过使用 WebAssembly (WASM)，该工具提供了一套全面的视频和音频处理工具，无需将文件上传到服务器，从而确保了完全的数据隐私和离线功能。

本地处理与隐私

FFmpeg WebCLI 完全在客户端运行，这意味着视频或音频数据永远不会被传输到远程服务器。应用程序在首次加载时会下载约 31 MB 的 ffmpeg-core WASM 二进制文件，随后将其缓存以供后续使用。所有的文件 I/O 都在浏览器的虚拟文件系统中进行，处理过程由 Web Workers 处理，以确保在进行繁重的编码任务时用户界面保持响应。

核心视频与音频功能

该工具提供了超过 30 种预定义操作，涵盖了从简单的格式转换到复杂的滤镜链。

视频处理

  • 格式转换： 支持重新编码为 MP4 (H.264/AAC), WebM (VP9/Opus), MKV, MOV, 和 AVI。
  • 压缩： 包括 CRF (Constant Rate Factor) 滑块 (18 到 51) 和编码预设 (从 ultrafast 到 veryslow) 以平衡文件大小和质量。
  • 视觉效果： 提供旋转、翻转、裁剪、反转以及添加淡入/淡出效果的工具。
  • 色彩调整： 提供亮度、对比度和饱和度的滑块，包括一键灰度切换。
  • 高级布局： 支持并排（水平/垂直）布局、画中画叠加，以及针对特定宽高比（例如 TikTok 的 9:16 或电影感的 21:9）的自定义填充/黑边处理。
  • GIF 创建： 使用两阶段调色板生成过程，以确保在动画 GIF 中实现高质量的色彩还原。

音频处理

  • 提取与转换： 将音频轨道提取为 MP3, AAC, WAV, OGG, 或 FLAC 格式。
  • 混音与标准化： 通过 amix 滤镜允许将背景音乐与原始音频混合，并使用 loudnorm 滤镜将感知响度标准化为广播标准（例如 YouTube/Spotify 的 -14 LUFS）。
  • 音量控制： 提供一个倍数滑块 (0 到 4x) 来调整音频电平，同时通过 stream-copy 视频以避免质量损失。

工具实用程序

  • 元数据移除： 使用 -map_metadata -1 剥离所有嵌入的元数据（GPS、时间戳）以增强隐私。
  • 字幕嵌入： 将 .srt, .vtt, 或 .ass 文件作为软字幕轨道封装进 MP4 或 MKV 容器中。
  • 缩略图提取： 在特定时间戳捕捉单帧图像作为 JPEG 或 PNG。

高级用户控制：Raw FFmpeg 访问

对于高级用户，FFmpeg WebCLI 包含一个 Raw FFmpeg 面板。该界面允许用户输入自定义参数，这些参数将被插入在 -i input 和输出文件名之间。

  • 命令预览： 实时预览正在执行的准确命令。
  • 示例库： 内置库为高级任务提供方案，例如降噪 (hqdn3d), 锐化 (unsharp), 运动稳定 (deshake), 以及无损重封装 (-c copy)。
  • 次要输入： 用户可以上传第二个文件（引用为 input2.<ext>）来执行诸如替换音频轨道等操作。

通过 PWA 实现离线功能

FFmpeg WebCLI 是作为一个渐进式 Web 应用 (PWA) 实现的，允许将其安装为桌面和移动设备的本地应用。

  • 离线访问： 一旦 WASM 二进制文件和静态资源被 service worker 缓存，该应用即可在完全没有互联网连接的情况下运行。
  • 屏幕唤醒锁： 为了防止移动设备或桌面在长时间编码过程中进入睡眠状态，该应用利用了 Screen Wake Lock API 来保持显示器处于激活状态。
  • 兼容性： 该 PWA 兼容 Chrome, Edge, Firefox, 和 Safari，支持桌面端、Android 和 iOS。

技术实现与要求

要在本地运行该项目，必须配置服务器以使用特定的安全响应头来启用 SharedArrayBuffer，这是 ffmpeg.wasm 所必需的的。 这些响应头是：

  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp

社区见解与讨论

虽然该工具因其易用性而受到称赞，但一些社区成员就性能和优化提出了技术问题：

"如何与原生应用进行比较？是否有任何形式的硬件解码/编码，例如 h264_nvenc 可用？"

目前，该工具依赖于基于 CPU 的 FFmpeg WASM 实现，这意味着它无法访问像 NVENC 这样的硬件加速编码器。此外，一些用户指出，UI 术语（例如 "Click to upload"）可能会产生误导，因为实际上并没有发生任何向服务器的上传操作。

Sources