Почему мы создали браузерный инструмент для обработки видео
Когда мы задумали создать видеоинструменты для веба, общепринятое мнение было ясным: обработка видео должна происходить на сервере. Загрузить файл, запустить FFmpeg, вернуть результат. Просто, проверено и сильно ограничено пропускной способностью, стоимостью и конфиденциальностью.
Мы подумали, что должен быть лучший способ. Оказывается, он есть — и он все это время был в наших браузерах.
Текущее положение дел: ffmpeg.wasm
В течение последних нескольких лет ffmpeg.wasm был основным решением для обработки видео в браузере. Он компилирует FFmpeg в WebAssembly, предоставляя вам доступ ко всему инструментарию FFmpeg прямо в браузере. Он работает, но имеет существенные недостатки:
- Большой размер пакета: ядро ffmpeg.wasm составляет ~25 МБ, а кодеки для конкретных форматов увеличивают его до 30 МБ+
- Медленная инициализация: Загрузка модуля WebAssembly размером 25 МБ до начала любой обработки
- По умолчанию однопоточный: Нет доступа к аппаратному ускорению
- Ограничения памяти: Ограничения линейной памяти WebAssembly (4 ГБ) создают проблемы с большими файлами
- Отсутствие аппаратного декодирования: Декодирование/кодирование только программное, полностью отсутствует ускорение GPU
В наших тестах сжатие 50 МБ MP4 видео с качеством 70% занимало 45-60 секунд с ffmpeg.wasm. Не ужасно, но и не отлично.
Подход WebCodecs
WebCodecs API — это относительно новый браузерный API, который предоставляет прямой доступ к нативным медиакодекам браузера — тем же самым, которые используются для воспроизведения видео на YouTube, Netflix и всех других стриминговых платформах. Ключевые преимущества:
- Аппаратное ускорение: Использует GPU для декодирования и кодирования, если доступно
- Нулевые накладные расходы на пакет: Нет WebAssembly, нет скомпилированных бинарников — это нативный браузерный API
- Быстрая инициализация: Доступно немедленно, без времени загрузки
- Полная поддержка форматов: H.264, H.265, VP8, VP9, AV1 — все, что поддерживает ваш браузер
В чем подвох? WebCodecs — это низкоуровневый API. Вам нужно обрабатывать демультиплексирование, покадровое кодирование, форматирование контейнера и все остальное. Это много ручной работы.
Встречайте mediabunny
Мы создали mediabunny — легковесную библиотеку, которая оборачивает WebCodecs простым, эргономичным API. Она обрабатывает сложные части:
- Автоматическое демультиплексирование: Определяет формат контейнера и извлекает видео/аудио потоки
- Покадровый контроль: Доступ к отдельным кадрам для точного редактирования
- Умное перекодирование: Настраиваемые предустановки качества с прогрессом в реальном времени
- Эффективная потоковая передача памяти: Обрабатывает кадры частями, а не все сразу
Сравнение производительности
| Метрика | ffmpeg.wasm | mediabunny (WebCodecs) |
|---|---|---|
| Размер пакета | 25-30 МБ | ~15 КБ |
| Инициализация | 3-5 с | Мгновенно |
| Сжатие 50 МБ (70%) | 45-60 с | 10-20 с |
| Аппаратное ускорение | ❌ | ✅ |
| Использование памяти (файл 50 МБ) | ~800 МБ | ~300 МБ |
В 3-5 раз быстрее по всем параметрам, с значительно меньшим использованием памяти и нулевыми накладными расходами на пакет.
Конфиденциальность: Убойная функция
Производительность — это здорово, но вот что действительно отличает браузерную обработку: конфиденциальность по архитектуре.
С серверными инструментами вы доверяете свои данные кому-то другому. Даже добросовестные сервисы имеют серверы, которые могут быть взломаны, подвергнуты судебному запросу или неправильно настроены. С VideosKit:
- Файлы никогда не покидают ваше устройство — буквально нет серверной конечной точки для загрузки файлов
- Нет файлов cookie, отслеживания, аналитики содержимого файлов
- Работает в автономном режиме после загрузки — обрабатывайте видео в самолете, в ограниченной сети, где угодно
- Подходит для предприятий с конфиденциальным контентом — нет проблем с резидентностью данных или соответствием требованиям
Проблемы разработки
Создание этого не обошлось без проблем:
Обработка больших файлов
Браузеры не предоставляют произвольный доступ к файлам. Мы используем File API + потоковую передачу для покадровой обработки видео без загрузки всего файла в память. Это потребовало тщательного управления буферами и настройки сборки мусора.
Кроссбраузерная совместимость
WebCodecs поддерживается в Chrome 94+, Edge 94+ и Safari 16.4+. Firefox добавил поддержку в версии 130. Мы определяем возможности и корректно отображаем сообщение для неподдерживаемых браузеров.
Управление памятью
Видеокадры большие — один кадр 4K составляет ~33 МБ в несжатом виде. Мы реализовали пулинг кадров и потоковые конвейеры, чтобы контролировать использование памяти даже с контентом 4K.
Отчетность о прогрессе
Пользователям нужно знать, сколько ждать. Мы создали систему обратного вызова, которая сообщает о прогрессе на основе положения кадра, предоставляя точные обновления в реальном времени.
Открытый исходный код
VideosKit и mediabunny являются проектами с открытым исходным кодом. Ознакомьтесь с кодом:
- VideosKit: github.com/nicely-gg/video-tools
- mediabunny: github.com/nicely-gg/mediabunny
Приветствуются вклады, сообщения о проблемах и отзывы.
Будущее браузерного видео
WebCodecs все еще развивается. Кодирование AV1, обработка на базе WebGPU и улучшенные MediaSource Extensions сделают браузерное видео еще более мощным. Мы рады расширять границы возможного.
Если вы еще не пробовали VideosKit, посетите videoskit.cc. Сжимайте, конвертируйте, обрезайте или просматривайте видео — все в вашем браузере, все бесплатно.