Хабр Курсы для фронтендеров
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Поток Фронтенд доступен 24/7 благодаря поддержке друзей Хабра
Комментарии 32
Обычно это выглядит так: человек открывает один из сотен онлайн-конвертеров, загружает туда полугигабайтный файл, ждёт, пока он доползёт до сервера, потом ждёт очереди, потом скачивает обратно.
О, я, оказывается, необычный человек! Просто открываю командную строку и набираю: ffmpeg ...
Наш человек! 🤝 Консоль и ffmpeg в системном PATH - это база и вершина эффективности, тут вообще без вопросов.
BrowsersKit как раз и задумывался с идеей перенести главный плюс CLI-версии в браузер: обработку целиком на твоём железе, 0 байт отправки на чужие серверы, отсутствие очередей и полную приватность.
По сути, это просто удобный UI над той же магией FFmpeg для ситуаций, когда:
Лень вспоминать точную связку флагов (
-c:v,-crf,-preset) или сидишь с телефона/чужого устройства, где терминала под рукой нет.Нужно скинуть простой инструмент коллегам не из IT, для которых установка CLI и работа в консоли - отдельный увлекательный квест :)
интересно как же тогда называются те кто сами кодеки кодирования-декодирования пишут? Это какая-то не человеческая способность видимо. Их наверно уже и просто человеками нельзя называть.
Они называются Фабрис Беллар (Fabrice Bellard) и ещё небольшая группа архитекторов x264, AV1 и WebM 😄
А если серьёзно - это действительно отдельная лига. Боги высшей математики, цифровой обработки сигналов (ЦОС) и SIMD-инструкций. Нам, грешным прикладникам, остаётся только с трепетом заворачивать их шедевры в WebAssembly!
Недостаточно ленивый.
Баш-скрипт же - сделает всё то же самое. Правда, один раз придётся его написать...
Можно свой драйвер fs написать для emscripten, там не такое большое API, особенно если нужно просто читать-писать один файл. И в драйвере уже на чтении останавливать поток воркера через Atomics пока UI поток запишет кусочек в память. И это будет работать на многих потоках
Чёт попробовал по приколу преобразовать 4к mp4 x264 в 265. В настройках явно указано до 1920. Зачем? Ну пофиг, проигнорил. И результат: ффмпег завершился с кодом -1. Понятно, что это удобно и т.д. но толком не работает. Проще напрямую ффмпег запустить. Опять же - транскодирование лучше делать через видеокарту.
А точно ли пользователю нужен весь этот цирк внутри браузера? Просто уже иногда кажется, что разработчики решают интересную техническую задачу, а не реальную проблему человека
Ну почему цирк) Тот же конвертер или сжатие видео нужно людям постоянно. Только большинство онлайн-сервисов заставляют загружать гигабайты на их сервер, что долго и небезопасно для личных файлов. А тут открыл вкладку, обработал всё локально и закрыл. Никаких сторонних серверов, подписок и установки программ
Тот же конвертер или сжатие видео нужно людям постоянно.
Может быть, не постоянно, но услуга действительно востребованная.
А тут открыл вкладку, обработал всё локально и закрыл.
Вот тут для меня самый тонкий момент. В браузере я вижу не только удобный инструмент, но и плохо закрываемые ворота в опасный внешний мир. Джентльменам, конечно, принято верить на слово. Но, к сожалению, этим пользуются разного рода мошенники. И ни один мошенник почему-то не предупреждает, что он — мошенник. Осторожный человек, скорее всего, вспомнит о бесплатном сыре. Но домохозяек, конечно, это не остановит.
P.S. В качестве внутрикорпоративного сервиса BrowsersKit выглядит интересным решением. Задачи работы с PDF , видео- и аудиоматериалами встречаются, например, в банковских подразделениях по работе с клиентами и маркетингу. Но как внешний ресурс в таком контексте он теряет все свои преимущества.
Логичное опасение, про безопасность в вебе сейчас думают немногие. Но тут как раз фишка в том, что все проверяемо.
Любой технический человек может открыть вкладку Network в DevTools и за 5 секунд убедиться, что файл никуда не уходит. Можно вообще открыть страницу, выключить интернет и спокойно работать дальше в оффлайне. Обычной десктопной программе из интернета в этом плане верить приходится куда больше на слово.
А за идею про внутрикорпоративный сервис спасибо, в эту сторону мы еще детально не думали, а кейс с PDF и банками реально живой.
Людей много, у кого-то нсть и такие проблемы
Илон Маск утверждает, что к 2030 году уже и броузеров не будет...) не иначе все на командную строку перейдут..
Дружу с chat GPT и научился делать любые нужные сетапы по ситуации, конвертация, масштабирование, прозрачность, наложение, обрезка, смена форматов. Заготовил себе нужные сетапы и юзаю без проблем. Оч удобно, нужно желание и время. Особенно удачно научился склеивать видео с разной скоростью без артефактов. Веб сайт хорош для лунатиков, молодцы, но лично у меня запросы другие, нарезать видео в редакторе без сжатия, а потом оптимизировать размер, изменить скорость и склеить. На Snapdragon X7 к сожалению видео редакторы захлёбывается. Так бы ещё заставки делать можно было бы и субтитры красивые. Кстати, как субтитры красивые делают на Ютуб для шортс?
Каждому под свои задачи) Скрипты через ChatGPT отличная тема для кастомных связок, если есть время ковыряться. Веб-сервис скорее про быстрый результат здесь и сейчас в пару кликов без терминала.
A субтитры для шортс сейчас почти все делают через CapCut, там автораспознавание и готовые шаблоны анимаций в пару кликов накладываются
Хм. А зачем сервис-воркер? Unpkg вроде и так возвращает ответы с cache-control: public, max-age=31536000.
Статике самого сайта можно дописывать хэш в имя файла, и тогда тоже можно будет добавить заголовки кэширования, но при этом не бояться, что прилетит старьё из кэша
Логичная мысль! Для обычной статики заголовков Unpkg и хешей Vite реально хватает за глаза.С воркером и CacheStorage история немного про другое:
Браузер легко подчищает обычный дисковый HTTP-кэш, когда у юзера начинает поджимать место на диске. Выкачивать каждый раз 30+ МБ WASM-ядра заново не хочется. Из CacheStorage браузер эти данные так просто не выселяет.
Полный оффлайн. Воркер позволяет работать вообще без сети (в дороге или при слабом сигнале) и не зависеть от того, решит браузер валидировать HTTP-кэш или нет.
Зачем вообще тащить ffmpeg в wasm, если оно уже фактически встроено во все браузеры? Или WebCodecs API вашим нуждам не хватило? Вы пишите, что используете его в каких-то случаях, но почему не во всех?
Вопрос по делу! WebCodecs у нас как раз и работает на быстром пути, где это возможно.
Но завязать всё только на него не получается:
WebCodecs умеет работать только с сырыми кадрами и чанками, он вообще не умеет в медиа-контейнеры (MP4, MKV, AVI). Чтобы распаковать файл на дорожки и запаковать обратно, всё равно нужны сторонние библиотеки.
Ещё он завязан на железо и лицензии конкретного браузера. Чуть редкий кодек или формат - вылетает NotSupportedError. А FFmpeg тащит всё с собой и работает везде одинаково.
Плюс обработка: в FFmpeg сотни готовых фильтров (кроп, звук, субтитры, FPS). В WebCodecs всё это пришлось бы руками велосипедить на WebGL и WebAudio.
В итоге WebCodecs у нас юзается как быстрый аппаратный путь, а FFmpeg WASM работает как универсальный фолбэк для всего остального.
Тоже была такая идея, всё руки не доходили)
Спасибо, продолжайте развивать проект. Добавил в Закладки.
Есть проект, который похож на ваш, тоже полностью локален, но в нём есть экзотичные форматы, поддержка ImageMagick, 7-zip, Pandoc и других утилит (полный список можно тут посмотреть, некоторые утилиты самописные https://github.com/p2r3/convert/tree/master/src/handlers )
Пощупать можно тут https://p2r3.github.io/convert/, исходники https://github.com/p2r3/convert
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
FFmpeg в браузере: как мы сделали медиа-конвертер, который ни разу не обращается к серверу