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

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); };

</details> ### Попередній перегляд в браузері Для попереднього перегляду використовуємо HTML5 `<video>` з синхронізацією через `currentTime`. Ось ключовий hook: ```tsx 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 днів. Вартість базової версії — від 2000 доларів США. Економія на серверній інфраструктурі при використанні Remotion складає до 40%, що може становити близько 800 доларів на місяць при середньому навантаженні. Витрати на серверну інфраструктуру залежать від обсягу.

Відзначимо: Що входить в результат:

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

Орієнтовна вартість розраховується індивідуально після брифу.

Мінімальний редактор (без ефектів і складних фільтрів): 13–17 робочих днів. Якщо ви шукаєте надійного партнера для створення онлайн редактора відео, звертайтеся — ми маємо досвід у розробці браузерних відеоредакторів для різних завдань.