kostyl.dev
Media Streaming

01. Магія Стрімінгу: Що відбувається, коли ви натискаєте "Play"

01. Магія Стрімінгу: Що відбувається, коли ви натискаєте "Play"

1. Вступ та Контекст

Hook: Кнопка, яка змінила світ

Уявіть ситуацію: ви відкриваєте YouTube, натискаєте на відео в 4K, і воно починає грати миттєво. Ви перемотуєте на середину — і воно знову грає майже без затримок. Для нас це буденність. Але з точки зору інженерії — це справжнє диво.

Як сервер, що знаходиться за тисячі кілометрів, примудряється передавати гігабайти даних на ваш телефон через нестабільний 4G так, щоб ви не бачили "колеса завантаження"?

Goal: Що ми зрозуміємо сьогодні

У цьому розділі ми розберемо фундаментальну різницю між завантаженням (downloading) та потоковою передачею (streaming). Ми прослідкуємо шлях одного кліку і зрозуміємо, чому "буферизація" — це не помилка, а необхідність.

Аналогія: Водопровід vs Відро

Уявіть, що ви хочете прийняти душ.

  1. Downloading (Завантаження): Це як носити воду відрами з колодязя.
    • Ви йдете до колодязя (сервер).
    • Набираєте повне відро (качаєте весь файл).
    • Несете його додому.
    • І тільки коли відро повне і стоїть у вашій ванні — ви можете почати митися.
    • Проблема: Ви чекаєте, поки завантажиться все (або значна частина), перш ніж почати споживання.
  2. Streaming (Стрімінг): Це водопровід.
    • Ви відкриваєте кран (натискаєте Play).
    • Вода (дані) тече трубами (мережа) постійним потоком.
    • Вам байдуже, скільки води в резервуарі водоканалу. Головне, щоб потік у трубі був стабільним.
    • Ви споживаєте воду в момент її надходження.

2. Фундаментальні Концепції

Download vs Progressive Download vs Streaming

Download

Традиційне завантаження файлу. Ви маєте отримати файл повністю, щоб ОС могла його відкрити. Приклад: Завантаження .zip архіву.

Progressive Download

"Псевдо-стрімінг". Це звичайний HTTP GET запит на файл, але відеоплеєр вміє грати ту частину, яку вже встиг завантажити. Недолік: Ви не можете перемкнути якість на льоту. Ви качаєте той самий великий файл.

Adaptive Streaming

Справжній стрімінг (HLS/DASH). Відео розбите на тисячі маленьких шматочків (chunks) різної якості. Плеєр сам вирішує, який шматочок качати наступним, залежно від швидкості інтернету.

Шаблони Стрімінгу (Streaming Patterns)

VOD (Video on Demand)

Відео за запитом (Netflix, YouTube Video). Файл вже існує повністю. Його можна легко кешувати на CDN (серверах доставки), користувач може довільно перемотувати відео назад і вперед без обмежень по часу.

Live Streaming

Пряма трансляція (Twitch, YouTube Live). Відео потік створюється в реальному часі. Перемотка в майбутнє неможлива. CDN повинен одночасно роздавати всім глядачам один і той самий поточний активний "шматок" (chunk) відео.

Real-Time

Двостороннє спілкування (Zoom, WebRTC). Затримка (latency) становить мілісекунди. Замість сегментації та кешування через CDN використовується пряме з'єднання (UDP), де швидкість доставки важливіша за втрату кількох кадрів.

Анатомія "Кліку"

Давайте подивимось на Timeline того, що відбувається за лаштунками:

1. The Handshake (Рукостискання)

Користувач відкриває сторінку. Браузер завантажує Маніфест (Manifest file). Це "меню" або "карта" відео. Там написано, які є варіанти якості (360p, 720p, 1080p) і де лежать шматочки відео.

2. Buffering (Наповнення буфера)

Плеєр обирає початкову якість (зазвичай середню) і починає качати перші кілька секунд відео (Chunks). Ці дані складаються в Буфер — спеціальну область пам'яті.

Аналогія: Бак з водою (Стабільність) Уявіть, що вода з міської мережі (Інтернет) тече з перебоями — то сильний напір, то ледве капає. Якщо підключити душ напряму — митися буде неможливо, вода то ошпарить, то зникне. Тому ми ставимо проміжний бак (Буфер). Вода наповнює бак нерівномірно, але з баку в душ (Плеєр) вона тече ідеальним стабільним потоком. Поки в баку є вода — вам байдуже, що там ремонтують труби на вулиці. Проблеми починаються лише тоді, коли бак порожніє повністю — це і є той самий "кружечок завантаження".

Аналогія: Винос сміття (Ефективність) Чому ви не біжите на вулицю до смітника з кожною окремою обгорткою від цукерки? Це неефективно. Ви витратите весь день на біганину. Замість цього ви маєте домашнє відро (буфер). Ви:

  1. Накопичуєте дрібне сміття (дані/пакети).
  2. Коли відро повне — ви робите один ефективний рейс до смітника. Комп'ютери роблять так само. Передавати дані мікро-порціями — дорого. Краще зібрати їх у пакет і відправити разом.

Чому це важливо? Інтернет нестабільний. Буфер — це ваша "подушка безпеки". Якщо інтернет на секунду зникне, плеєр показуватиме відео з буфера, і користувач нічого не помітить.

3. Playback Start

Як тільки в буфері є достатньо даних (наприклад, 4 секунди), плеєр починає відтворення. Це той момент, коли зникає "спіннер".

4. The Loop (Цикл)

Поки користувач дивиться, плеєр у фоні продовжує качати нові шматочки, намагаючись тримати буфер повним, але не переповненим.

3. Архітектура та Механіка

Lifecycle запиту

Погляньмо на спрощену діаграму взаємодії про яку ми будемо говорити детально протягом всього майстер-класу:

Loading diagram...

sequenceDiagram participant User as Глядач (Player) participant CDN as CDN (Cache) participant Origin as Origin Storage

Note over User, Origin: Фаза 1: Отримання маніфесту
User->>CDN: GET /movie/master.m3u8
CDN->>Origin: (Якщо немає в кеші) Отримати маніфест
Origin-->>CDN: Повертає маніфест
CDN-->>User: Повертає маніфест

Note over User: Плеєр аналізує маніфест і обирає якість

Note over User, Origin: Фаза 2: Завантаження відео сегментів
loop Кожні 4-10 секунд
    User->>CDN: GET /movie/chunk_001_720p.ts
    CDN-->>User: Повертає відео-сегмент
    User->>User: Декодування і відтворення
end

4. Практика: Перший погляд під капот

Спробуйте самі побачити це "диво".

1. Відкрийте YouTube

Відкрийте будь-яке відео на YouTube у браузері Chrome.

2. Developer Tools

Натисніть F12 або Cmd+Option+I (на Mac), щоб відкрити інструменти розробника. Перейдіть у вкладку Network.

3. Фільтр

У полі фільтра напишіть videoplayback.

4. Спостереження

Ви не побачите одного файлу, що завантажується. Ви побачите серію запитів, які з'являються кожні кілька секунд. Це і є "чанки" (chunks), про які ми говорили.

5. Резюме

  • Стрімінг — це не магія, це інженерія. Це розбиття великої проблеми (гігабайтний файл) на тисячі маленьких (секундні шматки).
  • Буфер — ваш друг. Він згладжує нерівності мережі.
  • Маніфест — це карта. Без нього плеєр сліпий.

Далі ми пірнемо глибше і розберемо, з чого саме складаються ці "шматки" — у розділі про Кодеки та Контейнери.

Глава 13. DDD на Практиці

Теорія DDD звучить чудово. В ідеальному світі ми починаємо нові проекти (Greenfield), формуємо ідеальну команду, де кожен експерт володіє термінологією DDD, і створюємо бездоганну модель.

02. Анатомія Медіа: Кодеки, Контейнери та Стиснення