Створення відеострімінгу в реальному часі: від нуля до відображення у браузері

Проблема, про яку ніхто не говорить

Ви, мабуть, помічали, що потоки з камер спостереження, live-камер та відеострімінг з IoT-пристроїв ніколи не "просто працюють" у вебі. Є причина цьому розчаруванню.

Ось у чому суть: більшість камер та професійного відеообладнання транслюють через RTSP (Real Time Streaming Protocol), але веббраузери взагалі його не підтримують. Це стало питанням безпеки приблизно у 2010-2015 роках, коли браузери відмовились від підтримки RTSP. І раптом показати live-стрім з камери на веб-сторінці стало міні-інженерною проблемою.

Рішення? Два інструменти, які працюють у парі: FFmpeg (легендарний "швейцарський ніж" для відео) та MediaMTX (легкий шлюз для стрімінгу). Разом вони перекладають те, що "говорять" камери (RTSP) у те, що розуміють браузери (WebRTC). Netflix використовує схожі пайплайни. Ймовірно, і ваша локальна система безпеки так працює.

Що робить кожен інструмент

FFmpeg: Звір обробки відео

FFmpeg — найпотужніший відеоінструмент, який ви, ймовірно, ніколи не налаштовували. Він бере на себе всю рутину:

• Захоплення відео з камер чи файлів
• Перекодування у формати, сумісні з браузером (зазвичай H.264)
• Стрімінг на сервери через RTSP або RTMP
• Все це — у реальному часі без зависань

Базовий робочий цикл: захоплення → кодування → надсилання.

MediaMTX: Перекладач протоколів

FFmpeg не може обслуговувати багато глядачів одночасно. Для цього і потрібен MediaMTX. Це своєрідний протокольний посередник:

• Приймає потоки RTSP, RTMP, WebRTC або HLS
• Перепаковує їх у різні формати для різних клієнтів
• Найголовніше: конвертує RTSP у WebRTC, щоб браузери могли його побачити
• Все це — одним бінарником і конфігом

Як налаштувати (Практична частина)

Встановлення FFmpeg

Linux/Ubuntu:

sudo apt-get update sudo apt-get install ffmpeg

macOS:

brew install ffmpeg

Windows:

• Завантажте з ffmpeg.org (білд від gyan.dev)
• Розпакуйте у C:\ffmpeg
• Додайте C:\ffmpeg\bin у системний PATH
• Перевірте: ffmpeg -version у командному рядку

Встановлення MediaMTX

Linux/macOS:

wget https://github.com/bluenviron/mediamtx/releases/download/v1.15.0/mediamtx_v1.15.0_linux_amd64.tar.gz tar -xzf mediamtx_v1.15.0_linux_amd64.tar.gz chmod +x mediamtx sudo mv mediamtx /usr/local/bin/ mediamtx

Windows:

• Завантажте .zip з GitHub releases
• Розпакуйте та запустіть mediamtx.exe
• (Windows Defender може заблокувати — тимчасово вимкніть, якщо потрібно)

Три проєкти

Проєкт 1: Стрімінг відеофайлу

Створіть mediamtx.yml:

paths: test_video: source: publisher

Запустіть: mediamtx mediamtx.yml

Далі стрімте відеофайл на сервер:

ffmpeg -re -i your_video.mp4 -c:v libx264 -preset fast -c:a aac -f rtsp rtsp://localhost:8554/test_video

Пояснення:

• -re = читати з нативною частотою кадрів (важливо для ефекту "live")
• -c:v libx264 = використовувати кодек H.264 (широко сумісний)
• -preset fast = компроміс між швидкістю і стисканням
• rtsp://localhost:8554/test_video = адреса призначення

Відкрийте VLC, оберіть Медіа → Відкрити мережевий потік, вставте rtsp://localhost:8554/test_video. Ви маєте побачити відео. Це працює MediaMTX.

Проєкт 2: Стрімінг з вашої вебкамери у реальному часі

Оновіть mediamtx.yml, додавши новий шлях:

paths: test_video: source: publisher webcam: source: publisher

Windows (через DirectShow):

ffmpeg -f dshow -rtbufsize 100M -i video="Integrated Webcam" -c:v libx264 -preset ultrafast -tune zerolatency -f rtsp rtsp://localhost:8554/webcam

macOS:

ffmpeg -f avfoundation -framerate 30 -video_size 1280x720 -i "0" -c:v libx264 -preset ultrafast -tune zerolatency -f rtsp rtsp://localhost:8554/webcam

Linux:

ffmpeg -f v4l2 -i /dev/video0 -c:v libx264 -preset ultrafast -tune zerolatency -c:a aac -f rtsp rtsp://localhost:8554/webcam

Ключові параметри:

• -preset ultrafast = максимальна швидкість (важливо для live)
• -tune zerolatency = оптимізація для реального часу (мінімальна затримка)
• /webcam = шлях, який ми визначили у конфігу

Проєкт 3: Магічний момент — WebRTC у вашому браузері

Ось тут стає цікаво. Оновіть mediamtx.yml:

webrtc: yes webrtcAddress: :8889 webrtcEncryption: no webrtcAllowOrigin: '*' webrtcLocalUDPAddress: :8189 webrtcIPsFromInterfaces: yes

paths: test_video: source: publisher webcam: source: publisher

Перезапустіть MediaMTX. Тепер відкрийте у браузері http://localhost:8889/webrtc/webcam

Ваша вебкамера транслюється напряму у браузер. Без плагінів. Без RTSP. Просто live-відео у реальному часі.

Що насправді відбулося

1. Ваша вебкамера генерує сирі кадри
2. FFmpeg захоплює їх, кодує у H.264, транслює через RTSP у MediaMTX
3. MediaMTX приймає RTSP-потік і чекає запиту
4. Браузер запитує WebRTC-потік з /webcam
5. MediaMTX конвертує RTSP → WebRTC (без перекодування, лише перепаковка)
6. Браузер отримує WebRTC-пакети й відображає їх

Головна перевага: MediaMTX не перекодовує, а лише перепаковує H.264-потік у різні контейнерні формати. Тому затримка мінімальна.

Поточні обмеження

Те, що ми побудували, чудово підходить для локального тестування, але для продакшну потрібно:

• Аутентифікація (зараз доступно всім)
• Працює лише на localhost (не готово для Інтернету)
• Ще немає підтримки IP-камер
• Відсутній моніторинг і обробка помилок

Це міцна основа. Така архітектура масштабується від однієї вебкамери у спальні до Netflix-рівня, що обслуговує тисячі одночасних потоків.

Що далі

У Частині 2 буде: захист pipeline, підключення справжніх IP-камер, аутентифікація, і розгортання за межами localhost. Саме тут починається справжня інженерія — і де більшість домашніх проєктів зазвичай застрягають.