Реализация вывода 9-ти RTSP-потоков в браузере - одна из них. Давайте я обрисую её реализацию, а потом расскажу об эмоциях

Изначальной проблемой было то, что браузеры не умеют кушать RTSP с ложечки, в отличие от тех же HLS, ну и, естественно, что на экране должно быть девять стримов одновременно, а не один. То есть, нужно было разобраться, как грамотно это всё добро конвертировать и заодно решать проблемы с памятью

В процессе ресерча я наткнулся на очень полезные инструменты: ffmpeg и MediaMTX - они же и стали путем к решению этой задачи. По итогу я построил следующий флоу работы:

1. Корпоративный сервер мне отдавал чистые rtsp с камер наблюдения 2. Поток кушает ffmpeg и делает небольшие, но крайне полезные шалости: уменьшает битрейт, чуть поджимает качество потока, ставит задержку, а также ограничивает размер буфера и сегментов и передает это дело дальше 3. MediaMTX принимает измененный поток и конвертирует его в hls 4. Фронт взаимодействует с потоком с помощью библиотеки hls.js и встраивает его в <video /> 5. Под эту красоту подогнал Docker и упаковал все инструменты в docker-compose. Вуаля!

Также сделал плавную анимацию раскрытия/сворачивания одной из камер (она плавно заполняет всё пространство, остальные размонтируются. Конечно, не забываем в этот момент сохранять память и снимать все вотчеры с компонентов)

Заголовки с такими непростыми тасками всегда вызывали у меня много эмоций: от рабочего азарта до радости. Я заряжен делать сложное, потому что понимаю - это и есть путь моего развития. Сам процесс приносит не меньше удовольствия: и начало ресерча, и финальный запуск проекта. Ну красота!

В следующих постах буду делиться с вами другими не менее интересными кейсами. К слову, а про какой кейс любите с гордостью рассказывать вы?