Установка
Главная фишка нашего проекта заключается в том, что он полностью иполняется на стороне клиента.
Для того, что бы протестировать функционал проекта достаточно всего-лишь перейти по ссылке: https://artemlapys.github.io/SkoolHack/
Данный проект написан с использованием HTML, CSS и чистого JS.
Для данного проекта были использованы следующие библиотеки: FFMPEG .WASM - Порт C++ библиотеки FFMPEG на чистом JS. Основная библиотека для рендера на данном этапе разработки. coi-serviceworker - Библиотека для решения проблем с COOP и COEP, без которых ffmpeg не работает.
Отрисовка превью идёт в виде анимации в canvas. Реднер итогового видео происходит с помощью библиотеки FFMPEG. В данный момент видео по сути не рендерятся, из-за этого достигается достаточно большая скорость экспорта, но это делает невозможным некоторые планируемые функции, например изменение размера или разрешения.
На старте проекта нами рассматривались следующие варианты рендера:
- Хранение метаданных на стороне клиента, а рендеринг на стороне сервера. Вариант, который используется большинство сайтов для онлайн редактирования видео, ввиду своей быстроты и удобства. Нами этот вариант был отбракован с самого начала, ввиду своей сложности исполнения.
- Запись покадрового видео с превью элемента (HTML CANVAS). Данный вариант достаточно прост в исполнении, но у него есть целый ряд ограничений: Стабильный, но медленный рендер. Ввиду того, что это рендер в реальном времени, он будет ни больше ни меньше оригинального видео. Невозможность свернуть окно браузера. По факту самая главная проблема данного подхода.
- Использование рендера на стороне клиента. Тот вариант, который по итогу был нами выбран, но у которого также есть минус: при рендере браузер потребляет большое количество ресурсов а рендер всё равно идёт медленно.
Самое важное: перенос рендера на сторону сервера. Добавление возможности рендера со слоями. Рендер чёрного экрана между треками, если между ними есть пробел. Изменение координат слоёв на итоговом видео. Экспорт видео в различные форматы.
A.Lapys
TedCraft
MeToDucT
AIR_RU