Видеоредактор в браузере без облаков и регистраций

Представьте, что вам нужно быстро собрать ролик для соцсетей или обрезать запись митапа. Обычно есть два пути. Первый — тяжелый софт вроде Premiere Pro или DaVinci, который долго качать и еще дольше изучать. Второй — онлайн-сервисы вроде CapCut или Canva. Но там вечно всплывают ограничения: то платная подписка, то водяной знак на пол-экрана, то лимит на экспорт в 4K. А главное — ваши исходники улетают на чужой сервер, и что с ними там происходит, одному богу известно.

Недавно наткнулся на OpenReel Video. Это проект, который пытается усидеть на двух стульях: дать мощь профессионального редактора и доступность веб-приложения. При этом он работает по принципу client-side. Это значит, что все манипуляции с пикселями происходят прямо у вас в хроме, ни один байт видео не покидает компьютер.

Что это вообще такое

OpenReel Video — это опенсорсный видеоредактор, написанный на React и TypeScript. Он не требует установки и запускается по ссылке. Звучит как очередная поделка на HTML5 Canvas, но внутри там все гораздо серьезнее. Разработчики задействовали WebGPU для рендеринга и WebCodecs для аппаратного ускорения кодирования.

Проект позиционируют как замену CapCut. Здесь есть привычная тайм-линия с несколькими дорожками, работа с масками, ключевые кадры и даже цветокоррекция. И все это под лицензией MIT, то есть бесплатно и без подвохов.

Чем он интересен в деле

Я потыкал демо-версию и выделил несколько вещей, которые реально цепляют.

Многодорожечный монтаж без тормозов. В браузере сложно реализовать плавный скраббинг (это когда вы возите ползунком по тайм-линии и картинка не дергается). В OpenReel это работает на удивление шустро. Можно накидать кучу слоев: видео, звук, титры, наложить их друг на друга, и превью не превратится в слайд-шоу. Секрет в кэшировании кадров через LRU-кэш и использовании мощностей видеокарты через WebGPU.

Продвинутая работа с текстом и графикой. Обычно в простых редакторах текст — это просто плашка. Тут же прикрутили полноценный редактор титров с анимациями вроде «печатной машинки» или глитч-эффектов. Есть даже поддержка караоке-субтитров, которые подсвечиваются в такт аудио. Для тех, кто делает контент для Reels или Shorts, это маст-хэв.

Звуковой движок. Обычно про звук в таких проектах забывают. В OpenReel завезли Web Audio API, что позволило добавить эквалайзер, компрессор и даже реверберацию. Есть интересная фича — детектор битов. Он расставляет маркеры на дорожке в такт музыке, чтобы было проще монтировать «в бит». Также заявлено подавление шумов, что для браузерного решения звучит амбициозно.

Экспорт в нормальном качестве. Проект позволяет выгружать готовое видео в MP4 (H.264/H.265) или WebM. Поддерживается разрешение до 4K при 60 кадрах в секунду. Есть даже поддержка ProRes для тех, кому нужно сохранить максимум деталей для дальнейшей обработки.

Как это устроено внутри

Если заглянуть в репозиторий, видно, что архитектура разделена на монорепозиторий. Фронтенд на React занимает около 66 тысяч строк кода, а ядро (packages/core) — еще 59 тысяч.

Интересный момент: проект активно использует MediaBunny для обработки медиаданных. Это позволяет не изобретать велосипед в работе с потоками данных. За состояние отвечает Zustand — он легкий и отлично подходит для реактивных интерфейсов, где данных много и они постоянно меняются.

Для хранения проектов используется IndexedDB. Если вы случайно закроете вкладку или браузер упадет, работа не пропадет. При следующем открытии редактор подтянет проект из локального хранилища браузера.

Как запустить у себя

Если не хотите пользоваться публичным инстансом, поднять проект локально можно за пару минут. Вам понадобится Node.js версии 18 или выше и pnpm.

git clone https://github.com/Augani/openreel-video.git
cd openreel-video
pnpm install
pnpm dev

После этого редактор будет доступен по адресу localhost:5173. Кстати, проект находится в стадии беты, так что баги возможны, но коммиты летят часто.

Особенности разработки

Любопытный факт: OpenReel — это эксперимент по созданию крупного софта совместно с ИИ. Автор использует Claude AI для триажа задач, написания фиксов и даже ревью кода. Это объясняет, почему проект с таким объемом кода (суммарно более 130к строк) развивается так быстро. Судя по README, ИИ помогает даже с документацией, а человек выполняет роль архитектора и проверяющего.

Кому стоит попробовать

В первую очередь — тем, кто ищет приватный инструмент для быстрого монтажа. Если вы параноик и не хотите заливать личные видео в облака ради простой склейки, OpenReel — идеальный вариант.

Также проект будет полезен разработчикам, которые хотят разобраться, как выжимать максимум из браузера. Посмотреть, как реализован видеодвижок на WebGPU и WebCodecs — это отличный способ прокачать свои знания в современном вебе.

Конечно, это не замена полноценному десктопному софту для кинопроизводства. Но для 90% задач обычного пользователя или создателя контента возможностей OpenReel хватает за глаза. Проект подкупает своей честностью: никакой рекламы, никаких «купите про-версию», просто работающий инструмент в одной вкладке браузера.