Чому ми створили браузерний інструмент для обробки відео

Коли ми взялися за створення відеоінструментів для вебу, загальноприйнята думка була чіткою: обробка відео належить серверу. Завантажте файл, запустіть FFmpeg, поверніть результат. Просто, перевірено та глибоко обмежено пропускною здатністю, вартістю та конфіденційністю.

Ми думали, що має бути кращий спосіб. Виявляється, він є — і він весь час був у наших браузерах.

Статус-кво: ffmpeg.wasm

Протягом останніх кількох років ffmpeg.wasm був основним рішенням для обробки відео в браузері. Він компілює FFmpeg у WebAssembly, надаючи доступ до повного інструментарію FFmpeg прямо в браузері. Він працює, але має значні недоліки:

• Великий розмір бандлу: ядро ffmpeg.wasm становить ~25 МБ, а кодеки для конкретних форматів збільшують його до 30 МБ+
• Повільна ініціалізація: Завантаження модуля WebAssembly розміром 25 МБ перед початком будь-якої обробки
• Однопотоковий за замовчуванням: Немає доступу до апаратного прискорення
• Обмеження пам'яті: Обмеження лінійної пам'яті WebAssembly (4 ГБ) створюють проблеми з великими файлами
• Без апаратного декодування: Декодування/кодування лише програмним забезпеченням, повністю відсутнє прискорення GPU

У наших тестах стиснення відео MP4 розміром 50 МБ з якістю 70% займало 45-60 секунд за допомогою ffmpeg.wasm. Не жахливо, але й не чудово.

Підхід WebCodecs

WebCodecs API — це відносно новий браузерний API, який надає прямий доступ до нативних медіакодеків браузера — тих самих, що використовуються для відтворення відео на YouTube, Netflix та всіх інших потокових платформах. Ключові переваги:

• Апаратне прискорення: Використовує GPU для декодування та кодування, де це можливо
• Нульові накладні витрати на бандл: Без WebAssembly, без скомпільованих бінарних файлів — це нативний браузерний API
• Швидка ініціалізація: Доступний негайно, без часу завантаження
• Повна підтримка форматів: H.264, H.265, VP8, VP9, AV1 — все, що підтримує ваш браузер

У чому підступ? WebCodecs є низькорівневим. Вам потрібно обробляти демультиплексування, покадрове кодування, форматування контейнерів та все інше. Це багато роботи.

Зустрічайте mediabunny

Ми створили mediabunny — легку бібліотеку, яка обгортає WebCodecs простим, ергономічним API. Вона обробляє складні частини:

• Автоматичне демультиплексування: Виявляє формат контейнера та витягує відео/аудіо потоки
• Покадровий контроль: Доступ до окремих кадрів для точного редагування
• Розумне перекодування: Настроювані попередні налаштування якості з прогресом у реальному часі
• Ефективна потокова передача пам'яті: Обробляє кадри частинами, а не всі одночасно

Порівняння продуктивності

У 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 зроблять браузерне відео ще потужнішим. Ми раді розширювати межі можливого.

Якщо ви ще не спробували VideosKit, відвідайте videoskit.cc. Стискайте, конвертуйте, обрізайте або переглядайте відео — все у вашому браузері, все безкоштовно.