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

Проблема, о которой никто не говорит

Вы, вероятно, заметили, что видеопотоки с камер наблюдения, веб-камер и IoT-устройств практически никогда «просто так» не работают в браузере. У этой раздражающей проблемы есть причина.

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

Решение? Два инструмента, работающие вместе: 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
• Распаковать и запустить 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 = читать с нативной частотой кадров (важно для эффекта «живого» видео)
• -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 = максимальная скорость (важно для лайва)
• -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. Просто живое видео в реальном времени.

Что на самом деле произошло

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 мы рассмотрим: защиту пайплайна, подключение настоящих IP-камер, аутентификацию и деплой за пределы localhost. Вот там и начинается настоящая инженерия — и там большинство хобби-проектов терпят неудачу.