Как запустить FFmpeg в браузере и не сойти с ума от серверных логов

Представьте, что вам нужно сделать простой видеоредактор или конвертер для пользователей вашего сайта. Раньше схема была стандартной: пользователь загружает файл весом в гигабайт на ваш сервер, вы крутите там тяжелый процесс FFmpeg, тратите ресурсы CPU, а потом отдаете результат обратно. Это долго, дорого и больно для инфраструктуры. Но что, если переложить всю эту работу на процессор пользователя?

Проект ffmpeg.wasm делает именно это. Это полноценный порт легендарного FFmpeg на WebAssembly и JavaScript. Теперь все возможности по обработке видео и аудио доступны прямо в браузере.

Что это за зверь

Если вы хоть раз работали с видео кодом, то знаете, что FFmpeg — это швейцарский нож, который умеет всё: перекодировать, обрезать, склеивать, накладывать фильтры и стримить. Проблема в том, что это нативная C-библиотека. Чтобы затащить её в веб, разработчики использовали Emscripten и скомпилировали исходники в WebAssembly (WASM).

В итоге мы получили библиотеку, которая работает в Chrome, Firefox и Safari, а также в Node.js. Главная фишка здесь в приватности и экономии. Данные пользователя не покидают его компьютер. Для сервисов, где важна конфиденциальность, это киллер-фича.

На что способен ffmpeg.wasm

Библиотека не просто «умеет конвертировать mp4 в avi». Она тянет за собой почти весь багаж оригинального FFmpeg.

Конвертация на лету

Вы можете взять файл любого формата и превратить его в то, что понимает HTML5 плеер. При этом управление происходит через привычный синтаксис командной строки FFmpeg, только обернутый в JS-методы.

Работа с потоками и записью

Инструмент позволяет записывать видео прямо с камеры или экрана и тут же упаковывать его в нужный контейнер. Никаких промежуточных загрузок на сервер.

Извлечение метаданных и создание превью

Нужно быстро нарезать кадры из видео для галереи? ffmpeg.wasm сделает это за доли секунды, прочитав файл локально.

Как это выглядит в коде

Работать с библиотекой довольно просто, хотя есть свои нюансы с загрузкой тяжелых WASM-бинарников. Сначала нужно инициализировать ядро:

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

const ffmpeg = createFFmpeg({ log: true });

const transcode = async ({ targetFile }) => {
  await ffmpeg.load();
  // Пишем файл во внутреннюю файловую систему WASM
  ffmpeg.FS('writeFile', 'input.avi', await fetchFile(targetFile));
  
  // Запускаем привычную команду
  await ffmpeg.run('-i', 'input.avi', 'output.mp4');
  
  // Читаем результат
  const data = ffmpeg.FS('readFile', 'output.mp4');
  
  // Создаем URL для скачивания или показа в <video>
  const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
}

Интересный момент: ffmpeg.wasm использует SharedArrayBuffer для многопоточности. Это дает ощутимый прирост скорости, но накладывает ограничения на безопасность. Ваш сервер должен отдавать специфические заголовки (Cross-Origin Isolation), иначе браузер просто заблокирует эти функции.

Почему это не всегда идеальное решение

Не буду лукавить, у проекта есть свои «но». Во-первых, производительность. WebAssembly быстр, но он всё равно медленнее нативного C-кода. На обработку тяжелого 4K видео уйдет заметно больше времени.

Во-вторых, размер бинарника. Чтобы магия заработала, пользователю придется скачать около 20-30 МБ WASM-кода. Для разовой операции это может быть критично. Однако, если ваше приложение — это полноценный инструмент для работы с медиа, такая плата вполне оправдана.

Где это реально пригодится

Я вижу несколько сценариев, где ffmpeg.wasm незаменим:

1. Инструменты для быстрой обрезки видео (например, для сторис или соцсетей).
2. Клиентские приложения для записи экрана с последующим сохранением в GIF или MP4.
3. Образовательные платформы, где нужно проверять видеоматериалы студентов без нагрузки на бэкенд.
4. Утилиты для извлечения аудиодорожек из видео.

Стоит ли пробовать

Проект сейчас находится в статусе экспериментального, но его уже активно используют в продакшене для внутренних инструментов. Если ваша задача — дать пользователю базовые функции обработки медиа и при этом не разориться на серверах с мощными GPU/CPU, ffmpeg.wasm — это первое, на что стоит посмотреть.

Для старта лучше всего заглянуть в их документацию на Netlify. Там есть готовые примеры для React и чистого JS. Главное, помните про заголовки безопасности, чтобы не гадать, почему SharedArrayBuffer не определен в консоли.