Skip to content

Latest commit

 

History

History
52 lines (41 loc) · 3.86 KB

README.MD

File metadata and controls

52 lines (41 loc) · 3.86 KB
Raw

Установка

Главная фишка нашего проекта заключается в том, что он полностью иполняется на стороне клиента.

Для того, что бы протестировать функционал проекта достаточно всего-лишь перейти по ссылке: https://artemlapys.github.io/SkoolHack/

Стек технологий

Данный проект написан с использованием HTML, CSS и чистого JS.

Для данного проекта были использованы следующие библиотеки: FFMPEG .WASM - Порт C++ библиотеки FFMPEG на чистом JS. Основная библиотека для рендера на данном этапе разработки. coi-serviceworker - Библиотека для решения проблем с COOP и COEP, без которых ffmpeg не работает.

Рендер видео

Отрисовка превью идёт в виде анимации в canvas. Реднер итогового видео происходит с помощью библиотеки FFMPEG. В данный момент видео по сути не рендерятся, из-за этого достигается достаточно большая скорость экспорта, но это делает невозможным некоторые планируемые функции, например изменение размера или разрешения.

На старте проекта нами рассматривались следующие варианты рендера:

  1. Хранение метаданных на стороне клиента, а рендеринг на стороне сервера. Вариант, который используется большинство сайтов для онлайн редактирования видео, ввиду своей быстроты и удобства. Нами этот вариант был отбракован с самого начала, ввиду своей сложности исполнения.
  2. Запись покадрового видео с превью элемента (HTML CANVAS). Данный вариант достаточно прост в исполнении, но у него есть целый ряд ограничений: Стабильный, но медленный рендер. Ввиду того, что это рендер в реальном времени, он будет ни больше ни меньше оригинального видео. Невозможность свернуть окно браузера. По факту самая главная проблема данного подхода.
  3. Использование рендера на стороне клиента. Тот вариант, который по итогу был нами выбран, но у которого также есть минус: при рендере браузер потребляет большое количество ресурсов а рендер всё равно идёт медленно.

Возможные улучшения

Самое важное: перенос рендера на сторону сервера. Добавление возможности рендера со слоями. Рендер чёрного экрана между треками, если между ними есть пробел. Изменение координат слоёв на итоговом видео. Экспорт видео в различные форматы.

Contributing

A.Lapys

TedCraft

MeToDucT

AIR_RU