Разработка онлайн-редактора видео: браузерный монтаж и рендеринг

Разработка онлайн-редактора видео

Отметим: когда клиент просит сделать монтаж видео прямо в браузере — первое, с чем сталкивается команда: рендеринг финального результата. Если одну минуту ролика можно обработать на клиенте через FFmpeg.wasm, то десятиминутное видео «зависнет» даже на мощном ноутбуке. Мы прошли этот путь на нескольких проектах и выработали архитектуру, которая работает для любого масштаба. В этой статье разберём ключевые архитектурные решения: от типа рендеринга до реализации таймлайна и загрузки файлов. Вы узнаете, как выбрать стек, чтобы не переплачивать за серверы и не терять пользователей из-за тормозов. Мы также рассмотрим типичные ошибки, такие как создание тысяч запросов на один проект, и как их избежать. Если планируете создать браузерный видеоредактор — эта статья станет вашей архитектурной картой.

Браузер vs Сервер: где рендерить?

Выбор между клиентским и серверным рендерингом определяет весь стек и UX. Рассмотрим оба варианта в таблице.

Client-side рендеринг (WebCodecs API + FFmpeg.wasm): не требует серверных мощностей, вся нагрузка на CPU пользователя. FFmpeg.wasm рендерит 10 минут видео за 5–15 минут реального времени (зависит от CPU). WebCodecs API поддерживается в Chrome 94+, Firefox 130+, Safari 16.4+. Идеален для коротких клипов до 2 минут — без задержек, без серверных затрат.

Server-side рендеринг (Remotion + FFmpeg): рендеринг на серверах с GPU, пользователь получает готовый файл по ссылке. Remotion позволяет описывать видео как React-компоненты, что даёт гибкость и переиспользование. Масштабируется через AWS Lambda — рендеринг параллельными чанками. Для коммерческого продукта с видео более 2 минут — это единственный надёжный путь. Мы в проектах чаще выбираем серверный подход: он даёт предсказуемое время рендеринга и не «съедает» батарею пользователя. Но в минимальном редакторе для коротких роликов клиентский вариант быстрее и дешевле.

Remotion официальная документация: https://remotion.dev/docs/

Как устроена временная шкала (таймлайн)?

Центральная UI-концепция — таймлайн с дорожками (треками). Структура данных:

interface VideoProject {
  id: string;
  duration: number; // секунды
  fps: number; // 24 | 30 | 60
  width: number;
  height: number;
  tracks: Track[];
}

interface Track {
  id: string;
  type: 'video' | 'audio' | 'text' | 'image' | 'effect';
  clips: Clip[];
  muted: boolean;
  locked: boolean;
  volume: number; // 0–1
}

interface Clip {
  id: string;
  trackId: string;
  assetId: string; // ссылка на загруженный файл
  startTime: number; // позиция на таймлайне (секунды)
  duration: number; // длительность клипа
  trimStart: number; // обрезка начала исходного файла
  trimEnd: number; // обрезка конца
  speed: number; // 0.25 – 4.0
  opacity: number;
  transform?: ClipTransform;
  filters?: VideoFilter[];
}

Данные хранятся в сторе (Zustand или Redux) и синхронизируются с базой при сохранении. Drag-and-drop реализуем через @dnd-kit — он надёжно работает с перетаскиванием клипов по трекам.

Как разрезать клип на таймлайне?

Split (разрезать клип) — одна из базовых операций. Вот пошаговый алгоритм:

1. Определите точку разреза в секундах относительно таймлайна (например, при перетаскивании маркера).
2. Рассчитайте splitPoint = (atTime - clip.startTime) + clip.trimStart.
3. Создайте два новых клипа: левый с trimEnd = splitPoint и правый с trimStart = splitPoint.
4. Удалите исходный клип и добавьте новые.

Код:

const splitClip = (clipId: string, atTime: number) => {
  const clip = getClip(clipId);
  const splitPoint = atTime - clip.startTime + clip.trimStart;
  const leftClip: Clip = {
    ...clip,
    id: uuid(),
    duration: atTime - clip.startTime,
    trimEnd: splitPoint
  };
  const rightClip: Clip = {
    ...clip,
    id: uuid(),
    startTime: atTime,
    duration: clip.startTime + clip.duration - atTime,
    trimStart: splitPoint,
  };
  removeClip(clipId);
  addClip(leftClip);
  addClip(rightClip);
};

Предпросмотр в браузере

Для предпросмотра используем HTML5 <video> с синхронизацией через currentTime. Вот ключевой hook:

const PreviewPlayer: React.FC = () => {
  const { currentTime, isPlaying, tracks } = useEditorStore();
  const videoRefs = useRef<Map<string, HTMLVideoElement>>(new Map());

  useEffect(() => {
    // Синхронизируем все видео-клипы с таймлайном
    tracks.forEach(track => {
      track.clips.forEach(clip => {
        const video = videoRefs.current.get(clip.id);
        if (!video) return;

        const clipTime = currentTime - clip.startTime;
        const isActive = clipTime >= 0 && clipTime <= clip.duration;

        video.style.display = isActive ? 'block' : 'none';

        if (isActive) {
          const targetTime = clip.trimStart + clipTime * clip.speed;
          if (Math.abs(video.currentTime - targetTime) > 0.05) {
            video.currentTime = targetTime;
          }
          isPlaying ? video.play() : video.pause();
        } else {
          video.pause();
        }
      });
    });
  }, [currentTime, isPlaying]);

  // ...
};

Скроббинг по таймлайну делаем через mousedown/mousemove — расчёт позиции в секундах от ширины контейнера.

Клипы: drag, trim, split

Перетаскивание: при drag клипа вычисляем дельту и обновляем startTime с учётом пикселей на секунду. Ограничиваем границами проекта и соседними клипами.

Trim (обрезка) реализуется аналогично split, но без удаления исходного клипа: достаточно изменить trimStart/trimEnd.

Серверный рендеринг через Remotion

Remotion позволяет описать видео как React-компонент. Передаём проект через inputProps и рендерим на сервере:

// Компонент для рендеринга
const VideoComposition: React.FC<{ project: VideoProject }> = ({ project }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const currentTime = frame / fps;

  return (
    <AbsoluteFill style={{ background: '#000' }}>
      {project.tracks.flatMap(track =>
        track.clips.map(clip => {
          const clipTime = currentTime - clip.startTime;
          if (clipTime < 0 || clipTime > clip.duration) return null;
          return (
            <OffthreadVideo
              key={clip.id}
              src={clip.assetUrl}
              startFrom={Math.round(clip.trimStart * fps)}
              style={{ opacity: clip.opacity }}
            />
          );
        })
      )}
    </AbsoluteFill>
  );
};

Запуск рендеринга через API с использованием renderMediaOnLambda для масштабирования.

Загрузка ассетов

Крупные файлы (видео, аудио) загружаем напрямую в S3 через presigned URL — минуем сервер приложения:

// 1. Запрашиваем presigned URL
const { uploadUrl, key } = await api.post('/api/editor/upload-url', {
  filename: file.name,
  contentType: file.type,
  size: file.size,
});

// 2. Загружаем напрямую в S3 с прогрессом
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
  setProgress(Math.round(e.loaded / e.total * 100));
});
xhr.open('PUT', uploadUrl);
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);

Этот подход разгружает сервер и повышает скорость загрузки. Свяжитесь с нами, чтобы обсудить детали вашего проекта.

Сроки и что входит в работу

Минимальный редактор (таймлайн, обрезка, предпросмотр, экспорт через Remotion) — от 13 до 17 рабочих дней. Полный функционал с эффектами, переходами и аудиомикшером — 20–25 дней. Стоимость базового решения стартует от $2.7k–3.9k., а затраты на серверную инфраструктуру — от $200 в месяц.

Отметим: Что входит в результат:

• Архитектура и код проекта с документацией API.
• Инструкция по развёртыванию (Docker Compose, .env).
• Доступы к репозиторию и CI/CD.
• 12 месяцев гарантии на код и поддержка при внедрении.

Ориентировочная стоимость рассчитывается индивидуально после брифа. Получите консультацию для оценки вашего проекта — мы подготовим смету и сроки за один рабочий день.

Минимальный редактор (без эффектов и сложных фильтров): 13–17 рабочих дней. Закажите разработку под ключ — мы учтём все ваши требования.