如何在 JavaScript 应用中使用 FFmpeg

本文提供了将 FFmpeg 与 JavaScript 集成的综合指南，介绍了 FFmpeg 的功能，并通过实际示例演示了其用法。

将 FFmpeg 与 JavaScript 整合

FFmpeg 是一个领先的多媒体框架，它提供了一套用于处理多媒体数据的库和程序。FFmpeg 的核心功能是通过命令行界面运行，允许用户执行各种命令，对多媒体文件执行所需的操作。这些命令通常涉及指定输入和输出文件，以及自定义处理的其他参数。

虽然 FFmpeg 本身主要是用 C 编写的，但它可以通过提供 FFmpeg 功能接口的库或绑定在 JavaScript 应用程序中使用。其中一个流行的库是 ffmpeg.wasm，它可以通过 WebAssembly 在网页浏览器中直接运行 FFmpeg。

在 JavaScript 中使用 FFmpeg 有哪些优势？

通过将 FFmpeg 纳入 JavaScript 项目，开发人员可以直接在浏览器环境中完成各种多媒体处理任务。这消除了服务器端处理的需要，实现了音频和视频内容的实时处理，为交互式网络应用程序、多媒体编辑工具等提供了可能性。

示例

为了说明如何在 JavaScript 应用程序中使用 FFmpeg，让我们考虑这样一种情况：我们需要调整用户上传的视频文件的大小。

设置

首先，我们需要在项目中包含 ffmpeg.wasm 库。可以下载该库并手动将其包含在内，或者使用 npm 等软件包管理器。

npm install @ffmpeg/ffmpeg

执行

现在，编写一些 JavaScript 代码来处理视频调整大小功能：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });
const handleFileInputChange = async (event) => {
  const file = event.target.files[0];
  await ffmpeg.load();
  ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file));
  await ffmpeg.run('-i', 'input.mp4', '-vf', 'scale=320:-1', 'output.mp4');
  const data = ffmpeg.FS('readFile', 'output.mp4');
  const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
  // Display the resized video
  const videoElement = document.createElement('video');
  videoElement.src = url;
  document.body.appendChild(videoElement);
};
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', handleFileInputChange);

在本例中，我们使用 ffmpeg.wasm 加载 FFmpeg，读取输入的视频文件，使用 -vf（视频过滤器）选项调整其大小，然后在浏览器中显示调整后的视频。

分解一下视频大小调整过程中的关键步骤：