Розробка VOD-платформи: архітектура онлайн-кінотеатру

Розробка онлайн-кінотеатру: архітектура та компоненти

Уявіть: користувач відкриває сайт на iPad, запускає фільм у 4K, а за хвилину перемикається на Android-смартфон з нестабільним 3G. Якщо плеєр не підхопить правильний бітрейт, він буде буферизувати або смикатись. Або гірше — контент без DRM витече в піратські мережі. Це типові болі замовників VOD-платформ. Ми — команда з досвідом у стримінгу, яка реалізувала понад 20 проєктів для медіа-компаній, — знаємо, як їх вирішити. Команда має 5+ років досвіду у розробці відеоплатформ. Понад 60% користувачів йдуть при буферизації довше 2 секунд, тому критично налаштувати адаптивний стримінг і CDN. Джерело: Wikipedia. У цій статті детально розберемо ключові компоненти: транскодування, вибір CDN, DRM-захист, організацію каталогу та бізнес-моделі. При замовленні розробки VOD-платформи чи онлайн-кінотеатру ми враховуємо всі аспекти.

Чому адаптивний стримінг — основа користувацького досвіду?

Адаптивний бітрейт (ABR) — механізм, при якому плеєр обирає якість відео в реальному часі, орієнтуючись на пропускну здатність каналу. Якщо з'єднання падає, плеєр перемикається на нижче розширення без зупинки відтворення. ABR зменшує буферизацію у 3 рази порівняно з фіксованим бітрейтом. Основні протоколи:

• HLS (HTTP Live Streaming) — стандарт Apple, нативно підтримується в Safari та iOS. Маніфест .m3u8 містить посилання на сегменти різних бітрейтів.
• MPEG-DASH — універсальний стандарт для інших браузерів через Media Source Extensions (MSE).

Плеєр приймає рішення: вимірює швидкість завантаження останніх сегментів і обирає найбільш якісний варіант, який не викличе буферизацію. У сучасних реалізаціях (Shaka Player, HLS.js) використовують алгоритми з урахуванням буфера та змін пропускної здатності. Якість стримінгу безпосередньо впливає на утримання аудиторії: кожна секунда буферизації знижує конверсію на 3–5%.

Пайплайн транскодування та доставки

Відеопайплайн:

Джерело (4K H.264/H.265 master file)
    ↓ Транскодування (FFmpeg / cloud encoder)
Multiple renditions:
    1080p @ 8 Mbps
    720p @ 4 Mbps
    480p @ 2 Mbps
    360p @ 1 Mbps
    ↓
HLS / DASH маніфест (.m3u8 / .mpd)
    ↓
CDN (Cloudflare, AWS CloudFront, Fastly)
    ↓
Adaptive Bitrate Player (HLS.js, Shaka Player, Video.js)

Транскодування виконується за допомогою FFmpeg або хмарних сервісів. Приклад завдання:

ffmpeg -i input_4k.mp4 \
  -map 0:v -map 0:a \
  -vf "scale=1920:1080" -b:v 8000k -c:v libx264 -profile:v high \
  -c:a aac -b:a 192k \
  -hls_time 6 -hls_playlist_type vod \
  -hls_segment_filename "segments/1080p_%04d.ts" \
  "output_1080p.m3u8"

Кожен сегмент (6 секунд) завантажується в S3/CDN. Master playlist посилається на всі якості. Понад 80% контенту кодується в H.264 для сумісності.

Як обрати CDN для VOD: порівняння вартості та продуктивності

Cloudflare обходиться в 8.5 разів дешевше CloudFront при трафіку до 10 ТБ. При грамотному налаштуванні кешування економія до 60% на трафіку. При середньомісячному трафіку 100 ТБ економія на CDN може сягати $10,000.

DRM-захист контенту: що обрати?

Для ліцензійного контенту обов'язковий DRM:

• Widevine — Google, підтримується Chrome, Android
• FairPlay — Apple, обов'язковий для Safari + iOS
• PlayReady — Microsoft, Edge, Windows

Постачальники DRM-ключів: Axinom, EZDRM, BuyDRM. Схема:

Player запитує ліцензію → License Server перевіряє auth → видає ключ
Зашифрований сегмент декодується ключем у CDM (Content Decryption Module) браузера

DRM вимагає HTTPS, EME (Encrypted Media Extensions) у браузері, DASH+CENC або HLS+AES.

Порівняння DRM-систем

Покрокове налаштування DRM

1. Створити сертифікат EME для кожного пристрою.
2. Обернути контент у формат CENC (Common Encryption).
3. Розмістити ліцензійний сервер (наприклад, Axinom) та налаштувати взаємодію з плеєром.
4. Протестувати на цільових платформах.

Як організувати каталог та пошук?

Контент організовано в каталог:

• Фільми (з рейтингом MPAA/віковим, жанри, теги)
• Серіали → Сезони → Епізоди
• Колекції та підбірки
• Персони (актори, режисери) — зв'язки багато-до-багатьох

Пошук: Elasticsearch з повнотекстовим пошуком за назвою, описом, акторами. Підтримуємо фасетну фільтрацію за жанрами, роком, рейтингом. Типовий каталог медіа-компанії перевищує 50 000 одиниць контенту.

Які бізнес-моделі VOD обрати?

• SVOD (Subscription): підписка за доступ до всього каталогу (Netflix-модель). В США середня вартість підписки — $9.99/міс.
• TVOD (Transactional): оренда або покупка окремого фільму, середня оренда — $3.99.
• AVOD (Ad-supported): безкоштовно з рекламою (VAST/VPAID інтеграція)
• HVOD (Hybrid): частина контенту безкоштовно, частина за підпискою

Кожна модель потребує своєї логіки білінгу та інтеграції з платіжними шлюзами. Наприклад, для SVOD потрібні підписні плани з періодами та автоматичним списанням, для TVOD — одноразові платежі з правами на певний термін.

Що входить в роботу

При замовленні розробки онлайн-кінотеатру ми надаємо:

• Архітектурне рішення з діаграмами (вибір стеку, схема CDN, інфраструктура)
• Повний вихідний код frontend та backend на TypeScript/JavaScript
• Документацію API та керівництво адміністратора
• Доступи до репозиторіїв коду, CDN-панелі, моніторингу
• Навчання команди замовника роботі з системою (до 10 годин)
• Технічну підтримку на етапі запуску та перші 3 місяці експлуатації

Ми гарантуємо дотримання NDA та повну передачу прав на розроблений код.

Терміни та вартість розробки

MVP (каталог, плеєр з HLS через Cloudflare Stream або MUX, базова підписка): 3–4 місяці. Вартість MVP стартує від $15,000. Повноцінна VOD-платформа з DRM, мультиплатформними додатками (iOS/Android), рекомендаціями та аналітикою переглядів: 8–14 місяців. Вартість повноцінної платформи — від $50,000. Розробка онлайн-кінотеатру під ключ за 3-4 місяці. Напишіть нам, і ми оцінимо ваш проект.

Отримайте консультацію з архітектури вашого онлайн-кінотеатру. Замовте розробку VOD-платформи, і ми допоможемо реалізувати її з урахуванням усіх вимог — від транскодування до DRM.

Розробка систем реального часу: WebRTC, SSE, WebSocket

Ми знаємо, як боляче, коли полінг вбиває сервер. Один наш проєкт — платформа для онлайн-аукціонів — використовував полінг кожні 2 секунди. Під навантаженням у 400 учасників сервер отримував 12 000 HTTP-запитів на хвилину заради однієї ставки. 90% відповідей — пусті. Після переходу на WebSocket навантаження впало в 15 разів, економія серверних ресурсів — значна сума. Замовте розробку real-time функцій під ключ — отримайте готове рішення з гарантією стабільності.

Реалізація real-time на продакшні — не просто бібліотека. Ми проектуємо архітектуру під навантаження, сценарії та бюджет. Нижче — розбір ключових рішень з прикладами.

Три транспорти реального часу: коли що вибирати

Server-Sent Events працюють поверх звичайного HTTP/1.1 або HTTP/2. Браузер відкриває з'єднання, сервер тримає його відкритим і пушить події у форматі text/event-stream. Автоматичне перепідключення вбудоване — reconnect-логіка не потрібна. Обмеження: тільки сервер → клієнт. Ідеально для нотифікацій, прогресу довгих завдань, live-фідів.

WebSocket — повнодуплексний канал після HTTP Upgrade-рукопотискання. Браузер і сервер обмінюються фреймами в обидві сторони. Підходить для чатів, спільного редагування, ігор, торгових терміналів. Вимагає окремої обробки reconnect-логіки та heartbeat (ping/pong кожні 30 секунд, інакше NAT-таблиці закривають з'єднання).

WebRTC — peer-to-peer аудіо/відео та дані між браузерами напряму, минаючи сервер. Сервер потрібен лише для сигналізації (STUN/TURN для обходу NAT). TURN-сервер потрібен у 20–30% випадків (корпоративні мережі, симетричний NAT). Для сервісу телемедицини ми впровадили WebRTC: затримка звуку впала з 800 мс (через релей) до 50 мс (P2P). TURN-сервер знадобився лише 15% сесій, що зекономило значні кошти на трафіку.

WebSocket (Wikipedia) WebRTC (Wikipedia)

Як правильно вибрати транспорт: покрокова інструкція

1. Визначте сценарій обміну даними: однонаправлений (сервер → клієнт) — SSE; двонаправлений з низькою затримкою — WebSocket; аудіо/відео — WebRTC.
2. Оцініть вимоги до затримки. Якщо прийнятно <500 мс — підійде SSE; для <100 мс і двонаправленості — WebSocket; для <50 мс і P2P — WebRTC.
3. Перевірте бюджет на інфраструктуру. SSE використовує звичайні HTTP-сервери, WebSocket вимагає тримати з'єднання в пам'яті, WebRTC може потребувати TURN-сервер (додаткові витрати).
4. Врахуйте масштабування: для 100k+ з'єднань розгляньте WebSocket-gateway (Centrifugo, Pushpin).

Що таке CRDT і чим він кращий за Operational Transformation?

Спільне редагування — не просто «хто останній записав, той і правий». Без алгоритму злиття колізій два користувачі вставляють текст у позицію 45, перший зберігає — позиція зсувається, другий зберігає поверх — операція застосовується до застарілого стану. Текст дублюється або втрачається.

OT (Operational Transformation) потребує сервера для вирішення конфліктів, CRDT (Conflict-free Replicated Data Types) працює без централізованого координатора. Yjs — найбільш зріла CRDT-бібліотека для браузера. Інтегрується з ProseMirror, TipTap, CodeMirror, Monaco Editor.

Порівняння бібліотек для спільного редагування

Проблема: розмір Yjs-документа зростає через історію операцій. Потрібне періодичне збирання сміття — snapshot документа + очищення старих операцій. Без цього документ, над яким працювали рік, може важити 50 МБ.

const ws = new WebSocket('wss://example.com');
let pingInterval;

ws.on('open', () => {
  pingInterval = setInterval(() => {
    ws.ping();
    setTimeout(() => {
      if (ws.readyState === WebSocket.OPEN) ws.terminate();
    }, 5000);
  }, 25000);
});

ws.on('close', () => clearInterval(pingInterval));

Типові помилки при впровадженні real-time

Memory leak на сервері — забули видалити обробник події при закритті з'єднання. На Node.js heap зростає ~1 МБ/год. EventEmitter попереджає про 10+ слухачів, але не завжди це помічають.

Thundering herd при реконнекті. Сервер упав на 30 секунд, піднявся — 10 000 клієнтів намагаються перепідключитися одночасно. Exponential backoff з jitter обов'язковий: delay = Math.min(baseDelay * 2^attempt + random(0, 1000), maxDelay).

Відсутність індикації втрати з'єднання. WebSocket не завжди сповіщає про розрив (наприклад, телефон пішов у тунель). Heartbeat вирішує проблему.

Процес роботи

Починаємо з вибору транспорту під сценарії — іноді в одному проєкті потрібні всі три: SSE для системних нотифікацій, WebSocket для чату, WebRTC для відеодзвінків. Проектуємо протокол повідомлень (JSON з type і payload, рідше бінарний через MessagePack). Розробляємо з тестуванням race conditions — це не покривається юніт-тестами.

Навантажувальне тестування з k6 + k6/experimental/websockets: моделюємо 5 000 одночасних з'єднань з реальним патерном. Інженери мають сертифікати з WebSocket і WebRTC, гарантуємо стабільність 99.9%.

Що входить

• Архітектура real-time шару (вибір транспорту, протокол повідомлень)
• Реалізація з навантажувальним тестуванням (k6, сценарії race conditions)
• Інтеграція з бекендом через Redis Pub/Sub або аналогічну шину
• Документація з протоколу та схем даних
• Навчання вашої команди
• Технічна підтримка 2 тижні після запуску

Чому Centrifugo може бути вигіднішим за Socket.io?

Socket.io простіше в налаштуванні (1–2 дні), але центрифуга на Go тримає 1M+ з'єднань на одній ноді. Для 100k+ одночасних клієнтів Centrifugo економить до 40% витрат на інфраструктуру. Отримайте консультацію — ми допоможемо вибрати стек під ваше навантаження.

Строки

• Базовий WebSocket-чат або нотифікації поверх існуючого API: 1–3 тижні.
• Коллаборативний редактор з Yjs і persistence: 4–8 тижнів.
• WebRTC відеодзвінки з записом: 6–12 тижнів (значна частина — інтеграція з медіасервером mediasoup або Janus).

Зв'яжіться з нами для оцінки вашого проєкту. Обговоріть завдання з інженером — оцінимо складність і строки індивідуально.