Зачем это всё нужно

Главные задачи у серии публикаций такие:

Создать туториал по использованию Emscripten для компиляции C/C++ библиотек в JavaScript (более детальный и полезный, чем написанные ранее)
Персональная памятка

Почему FFmpeg?

FFmpeg — это свободный проект с открытым исходным кодом, состоящий из обширного набора библиотек и программ для обработки видео, аудио и других мультимедийных файлов/трансляций. (из Википедии)

Библиотеки JavaScript, которая предоставляла бы подобные возможности, попросту не существует. Если вы погуглите «ffmpeg.js», то найдёте несколько решений, подобных тому что мы собираемся сделать:

Эти библиотеки, конечно, можно использовать, но у них есть свои недостатки:

Используемые версии как FFmpeg, так и Emscripten устарели
Проекты не поддерживаются уже долгое время

Изначально я планировал заняться поддержкой какой-нибудь из двух библиотек, но так как за годы накопилось слишком много изменений, решил сделать всё с чистого листа, попутно создав туториал по использованию Emscripten для компиляции большой C/C++ библиотеки.

Как скомпилировать FFmpeg в Docker

Для начала клонируем исходники FFmpeg, а так как ветка master используется для разработки, выберем ветку с конкретной версией.

На момент написания туториала последняя версия FFmpeg — 4.1.4, поэтому её и будем использовать.

$ git clone --depth 1 --branch n4.1.4 https://github.com/FFmpeg/FFmpeg

--depth 1 добавлять необязательно, но это ускорит клонирование, так как нам не нужно скачивать все коммиты.

После успешного клонирования скомпилируем исходники с gcc, чтобы убедиться, что всё работает.

Конечно, этот шаг можно пропустить, но мой опыт говорит, что всегда хорошо предварительно пощупать систему сборки. (FFmpeg использует стандартный make, который легче портировать по сравнению с Bazel)

Инструкцию по компиляции и установке FFmpeg можно найти в файле INSTALL.md, расположенном в корневой директории:

# Установка FFmpeg:

1. Наберите `./configure` чтобы создать конфигурацию. Список опций для конфигурирования можно получить выполнив `configure — help`.

`configure` можно выполнять из директории отличной от исходников FFmpeg. Для этого передавайте в `configure` абсолютный путь, напр. `/ffmpegdir/ffmpeg/configure`.

2. Теперь наберите `make` для сборки FFmpeg. Понадобится GNU Make 3.81 или выше.

3. Наберите `make install` для установки бинарников и библиотек.

ЗАМЕТКА
— — —

— Не системные зависимости (напр. libx264, libvpx) по умолчанию отключены.

Так как устанавливать FFmpeg мы не будем, необходимы лишь первые два шага.

При компиляции с gcc мы воспользуемся Docker'ом для создания окружения, что позволит изолировать весь процесс и добиться его однообразия на разных машинах.

Давайте в корневой директории создадим bash-скрипт build-with-docker.sh с таким содержимым:

#!/bin/bash

docker pull gcc:4
docker run -it \
  -v $PWD:/usr/src \
  gcc:9.1 \
  sh -c 'cd /usr/src && ./configure --disable-x86asm && make -j4'

--disable-x86asm нужно добавить, так как об этом попросит сам ffmpeg

Запустим скрипт:

$ chmod +x build-with-docker.sh
$ ./build-with-docker.sh

В зависимости от скорости интернет-соединения и вашего железа, компиляция займёт где-то 10-30 минут.

Учтите, что вы увидите много предупреждений, так как gcc 9.1 строже предыдущих версий. Это нормально.

Если всё завершилось успешно, можно попробовать запустить ffmpeg:

$ ./ffmpeg

Или

$ docker run -it -v $PWD:/usr/src gcc:9.1 /usr/src/ffmpeg

Вы увидите что-то типа:

ffmpeg version n4.1.4 Copyright 2000–2019 the FFmpeg developers
built with gcc 9.1.0 (GCC)
configuration: — disable-x86asm
libavutil 56. 22.100 / 56. 22.100
libavcodec 58. 35.100 / 58. 35.100
libavformat 58. 20.100 / 58. 20.100
libavdevice 58. 5.100 / 58. 5.100
libavfilter 7. 40.101 / 7. 40.101
libswscale 5. 3.100 / 5. 3.100
libswresample 3. 3.100 / 3. 3.100
Hyper fast Audio and Video encoder
usage: ffmpeg [options] [[infile options] -i infile]… {[outfile options] outfile}…

Use -h to get full help or, even better, run ‘man ffmpeg’

В следующей части мы начнём компиляцию FFmpeg уже с помощью Emscripten.

Компилируем FFmpeg в WebAssembly (=ffmpeg.js): Часть 1 — Приготовления