strimometr

СВОЙ СОБСТВЕННЫЙ

СТРИМОМЕТР

Сервис для мониторинга RTMP / SRT потоков, записи, рестрима в 4 источника, резервирования стрима от прерывания с помощью картинки, а так же уведомлений в личный телеграм бот

Данная инструкция предназначена для широкого круга читателей, почитателей и стримеров всея Руси и СНГ. Выполнение оной позволит вам установить Стримометр себе на домен и наслаждаться удобством работы в этим инструментом.

"Иногда вам будет казаться, что вы зашли в тупик и ничего не получается. Nginx не работает, 404, 502, 403 ошибки... Ищите выход, и двигайтесь дальше." - Джейсон Стетхем.

Как же установить Стримометр на свой (или не свой) домен?

Для этого нужно всего лишь выполнить 53 простых шага.

Шаг №0. Скачайте Стримометр.

На моём Гитхабе он скорее всего самый свежий.

Скачать Стримометр

Шаг №1. Вам нужен домен.

Вариант 1. У вас есть домен.
Вариант 2. У вас нет домена. Придётся потратить 200 рублей и купить домен.
Способов покупки доменов великое множество, достаточно только набрать в поисковике "Купить домен". Дальнейшие шаги по регистрации и настройке домена будут показаны на примере бесячего регистратора регру.

Дорогу осилит идущий ведущий поющий сведущий.

После того, как вы смогли зарегистрироваться в регру и купить там домен, при этом мне повелись на уникальные предложения уникальных услуг по хостингу, SSL, еще какому-то ненужному хламу и смогли купить просто домен без ВСЕГО, то вполне вероятно что вы попадёте в личный кабинет пользователя. Там в списке доменов будет ваш домен, который мы впредь будем условно называть "your_domain.ru". И это половина успеха.

Шаг №2. Теперь вам нужен выделенный или не выделенный облачный или не облачный сервер. Точно сервер. Вы безусловно можете воспользоваться миллионами сервисов про предоставлению серверов в аренду. В данной инструкции будет рассмотрено создание и настройка сервера на базе immers.cloud.

Шаг №3. Нажав на кнопку "Начать", вы попадаете в создание облачного сервера, где вам нужно ввести "Наименование", выбрать конфигурацию.
Конфигурацию для стримометра советую вот эту: cpu.4.4.80. В ней 4 ядра процессора, 4 Гб памяти и 80 ГБ харда, из готорых 5 ГБ займёт Ubuntu и ещё примерно 1 ГБ займёт Стримометр.

Важно: если вы планируете много записей хранить. то берите хард побольше.

Тип инстанса оставляйте Volume-backed, Тип тома - сетевой том на базе HDD с х3 репликацией. Образ ставьте Ubuntu 22.04.2 (20230619) (5 ГБ). Сеть выбирайте любую, но чем больше, тем лучше, ценник одинаковый. И в меню "Ключевая пара" выбирайте "Создать новую ключевую пару". (Смотрите картинку ниже).

Шаг №4. После того, как сервер создастся, появится статус "ACTIVE", у вас будет назначенный вам IP адрес сервера, который вы радостно копируете, после чего идёте в личный кабинет регистратора доменов.

В регистраторе доменов вы заходите в личный кабинет, выбираете свой домен, и нажимаете на кнопку "Изменить" в строке DNS серверов и ресурсных записей.

Шаг №5. Вписываете IP адрес вашего облачного сервера в ресурсные записи A @ и A www. Обновление перенаправления вашего доменного имени на ваш сервер произойдёт довольно быстро, но по инструкциям доменных регистраторов может занять до 24 часов.

Шаг №6. Больше регистратор доменов вам не нужен. Дальнейшая работа будет происходить на вашем сервере. Для этого возвращаемся на immers.cloud и радостно жмакаем слово "Ключевые пары" в левом меню.

Там будет ваша ключевая пара, которую вам надо скачать на компутер в двух ипостасях на всякий случай чтобы 2 раза не заходить в это меню - PEM и PPK.

Сохраните их в потайную папку, только сами не забудьте какую. Важно чтобы у вас в пути к этим файлам не было русских букв. Вообще использовать русские названия в именах папок и файлов вам ни разу не поможет в жизни стримерской, поэтому откажитесь от этой неблагонадёжной привычки сразу. Называйте папки на латинице и будет меньше проблем.

Теперь правой кнопкой манипулятора типа "Мышь" нажмите на .pem файле (обратите внимание, что в названии они оба .pem, а вот истинное расширение у одного .pem, у другого .ppk. Чтобы узнать расширения файлов в файловом эксплорере Windows - есть отличная книга.

Так вот, правой кнопкой на .pem файле, далее Properties (свойства по русски, но я буду писать по английски, потому что систему на русском языке я не понимаю и вам не советую.). Как изменить язык системы Windows, вы найдёте в книге выше.

Далее вкладка "Security". Далее кнопка "Advanced". Далее кнопка "Disable inheritance", и наконец "Remove all inherited permissions from this object".

Теперь жмакайте "Add".
Синенькие буквы "Select a principal".
В поле вводите буквы вашего имени пользователя (надеюсь оно на английсом языке. Если нет, то книга выше поможет).
Жмакайте "Check Names", оно станет подчеркнутым.
ОК.
В Basic Perimissions тыкайте "Full Control".
ОК - Apply - ОК - ОК.

Поздравляю, вы прошли шаг 6. Предлагаю отвлечься на котиков.

Шаг №7. Торжественное подключение к вашему серверу.
Я пользуюсь PowerShell, чего и вам советую. Но вы вольны поступать как считаете нужным и более удобным вам лично.

Открываем PowerShell и пишем буквы:

ssh -i "ПУТЬ_ДО_ВАШЕГО_PEM_ФАЙЛА" ubuntu@IP_АДРЕС_ВАШЕГО_СЕРВЕРА

Вставка текста через ctrl+v в PowerShell не работает. Чтобы вставить текст из буфера обмена, наведите манипулятор типа "Мышь" на черное поле PowerShell и нажмите правую кнопку манипулятора.

Например: ssh -i "G:\PEM\strimometr-AVStream.pem" ubuntu@123.456.789.101
Далее нажимаем yes буквами на клавиатуре и тыкаем Enter. Произойдёт подключение к вашему серверу и консоль покажет нечто подобное:

Шаг №8. Обновление компонентов системы.

sudo apt update && sudo apt upgrade -y

После ввода этой строки можно пойти кофе попить минут на 10.

Когда всё будет готово, внизу будут светиться зелёненькие буковки и ждать следующей команды.

Шаг №9. Установка NodeJS. После ввода каждой строки надо тыкать Enter и ждать зелёных буковок.

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -

sudo apt install -y nodejs

Установится NodeJS 22 версии.

Проверяем версию:

node -v

Проверяем версию npm:

npm -v

Шаг №10. Установка ffmpeg. После ввода каждой строки надо тыкать Enter и ждать зелёных буковок.

sudo apt install -y ffmpeg

Установится последний рабочий ffmpeg.

Проверяем версию:

ffmpeg -version

Шаг №11. Установка дополнительных модулей для NodeJS. После ввода каждой строки надо тыкать Enter и ждать зелёных буковок.

sudo apt install -y build-essential

Шаг №12. Заливание файлов на сервер.

Вы скачали архив с гитхаба, положили его в папку без русских букв в пути, нежно разархивировали и благоговеете над ним. Теперь надо его залить на ваш сервер. Для этого мы будем юзать SCP.

Откройте новое окно PowerShell из под администратора.

Введите команду:

scp -i "ПУТЬ_ДО_ВАШЕГО_PEM_ФАЙЛА" -r "ПУТЬ_ДО_ПАПКИ_С_ПРИЛОЖЕНИЕМ" ubuntu@ВАШ_АЙПИ:~/ПАПКА_НА_СЕРВЕРЕ

Пример:

scp -i "G:\PEM\strimometr-AVStream.pem" -r "G:\AVSTREAM 2024\deployment\strimometr" ubuntu@123.456.789.010:~/rtmp-monitoring-dashboard

Начнётся заливка файлов в папку на вашем сервере.

Шаг №13. Проверяем что всё залилось.

В PowerShell, где наш сервер, вводим

cd rtmp-monitoring-dashboard

Попадаем в созданную папку. (если она у вас так называется конечно, как в шаге №12 в примере ссылки).

ls

(это L латинская маленькая впереди)

Вы должны будете увидеть нечто подобное:

Если не увидели, не отчаивайтесь: многие через это проходили, не многие доходили.

Если вы там видите только например папку "strimometr" как в примере ссылки в шаге №12, то ввведите:

mv rtmp-monitoring-dashboard/strimometr/.* rtmp-monitoring-dashboard/

Оно скопирует всё из папки strimometr в корневую папку проекта rtmp-monitoring-dashboard.

Шаг №14. Теперь вернитесь в корневую папку

cd rtmp-monitoring-dashboard

Шаг №15. Установка приложения.

npm install

Шаг №16. Постройка фронтенда.

npm run build

Шаг №17. Пробный запуск приложения.

npm run dev

Шаг №18. Проверка запуска

В консоли вы увидите нечто подобное:

Это значит, что приложение готово к работе. Перейдите по адресу http://ВАШ_АЙПИ_АДРЕС:5173 и возрадуйтесь.

Шаг №19. В целом, многие могут здесь остановиться и наслаждаться безсекурной вкладкой, но мы не из таких, ведь, да? Нам же хочется, чтобы на нашем домене "https://superproductionlivestreamproultrahd.ru" был красивый дашборд, который мы развернём на отдельном мониторе на поляне и будем наслаждаться его работой?

Тогда пошли дальше:

sudo apt install -y nginx

Шаг №20. Теперь нам нужно прописать его базовую конфигурацию.

Для этого надо создать файл конфигурации нашего домена

sudo nano /etc/nginx/sites-available/your_domain.ru

Здесь и далее your_domain.ru надо заменить на буквы вашего домена.

Шаг №21. Конфигурирем nginx.

server {
    listen 80;
    server_name your_domain.ru www.your_domain.ru;

    location / {
        proxy_pass http://localhost:5173;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Для сохранения файла нажмите ctrl+o
Для выхода из редактора текста нажмите ctrl+x

Шаг №22. Активируем конфигурацию.

sudo ln -s /etc/nginx/sites-available/strimometr.ru /etc/nginx/sites-enabled/

Шаг №23. Проверяем конфигурацию.

sudo nginx -t

Должно быть как на картинке ниже:

Если это не так, проверьте правильность конфигурации. Обратите внимание на пробелы и их количество.

Шаг №24. Перезапуск nginx.

sudo systemctl reload nginx

Шаг №25. Установка сертификата безопасности на домен и сервер.

Установка certbot.

sudo apt install -y certbot python3-certbot-nginx

Шаг №26. Заказ сертификатов для вашего домена и установка их на сервер.

sudo certbot --nginx -d your_domain.ru -d www.your_domain.ru

В процессе установки бот попросит ввести почту, к которой будет привязан сертификат.

Шаг №27. Проверка автоматического обновления сертификата

sudo certbot renew --dry-run

Шаг №28. Обновление конфигурации nginx.

Снова открываем для редактирования:

sudo nano /etc/nginx/sites-available/your_domain.ru

И вставляем код (замените your_domain.ru на ваш домен):

server {
    listen 80;
    server_name your_domain.ru;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name your_domain.ru;

    ssl_certificate /etc/letsencrypt/live/your_domain.ru/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.ru/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # HSTS
    add_header Strict-Transport-Security "max-age=31536000" always;

    location / {
        proxy_pass http://localhost:5173;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /ws {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_read_timeout 3600;
        proxy_send_timeout 3600;
    }

    location /system-ws {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_read_timeout 3600;
        proxy_send_timeout 3600;
    }

    location /live/ {
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
	
	location /recordings/ {
        proxy_pass http://localhost:3000/recordings/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# Redirect HTTP to HTTPS
server {
    listen 80;
    server_name your_domain.ru;
    return 301 https://$server_name$request_uri;
}

Пожалуйста, не спешите, проверьте правильность указания вашего домена везде, где это требуется, проверьте отступы, пробелы и т.д.

Для сохранения нажмите ctrl+o
Для выхода из редактора текста нажмите ctrl+x

Шаг 29. Проверяем конфигурацию nginx.

sudo nginx -t

Шаг 30. Перезапускаем nginx.

sudo systemctl reload nginx

Шаг 31. Меняем конфигурацию дефолтного conf файла nginx.

sudo nano /etc/nginx/sites-available/default

Вам нужно закомментировать все строки, содержащие:

listen 80 default_server;
listen [::]:80 default_server;
listen 443 ssl default_server;
listen [::]:443 ssl default_server;

Должно выглядеть вот так:

# listen 80 default_server;
# listen [::]:80 default_server;
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server;

Шаг 32. Снова проверяем конфигурацию nginx и перезапускаем nginx.

sudo nginx -t

sudo systemctl reload nginx

Шаг 33. Запускаем Стримометр.

Переходим в папку с приложением

cd rtmp-monitoring-dashboard

Запускаем

npm run dev

Шаг 34. Открываем приложение.

Переходим на веб-страницу нашего домена https://your_domain.ru

Видим запущенный Стримометр.

Шаг 35. Радуемся.

Вы молодец! Всё получилось!

Шаг 36. Разбираемся как работает Стримометр.

Общий вид:

Шаг 37. Пробуем отправить RTMP поток на Стримометр

Слева вверху под названием будет RTMP URL, на который надо отправить стрим.

Это будет rtmp://your_domain.ru:1935/live/[ANY_KEY]
[ANY_KEY] - это KEY RTMP трансляции. Он может быть любым на ваш вкус. Например "1", или "coolhacker".

Шаг 38. Приняли стрим, увидели картинку, увидели статистику битрейта, загрузки сети, нагрузки CPU и т.д..

Шаг 39. Перейдём к настройке бота уведомлений в телеграмме, который будет присылать вам и всем кто хочет уведомления о начале стримов, завершении стримов, начале рестрима, ошибках и бизнес-советы как жить.

Для создания бота в телеграмм, нужно открыть бота-создавателя ботов "Botfather"
Обратите внимание, что в телеграмме тысячи клонов этого бота, но правильный только один.

Зайдя в бота, нужно нажать "Menu"

/newbot

Назвать вашего бота. Например "superstreambot".

Выбрать ему username. Например superstream_bot

BotFather напишет вам токен для HTTP API доступа к этому боту.
Например: 7921139310:AAEWkfbgs3VJ7-69FgTbdXgeOzD6gIqCrcY

Скопируйте этот токен и вернитесь в Стримометр.

Шаг 40. Установка токена бота в Стримометре.

Нажмите на шестерёнку настроек в правом верхнем углу Стримометра.

Шаг 41. Вставьте токен в поле токена и нажмите "Update Token".

Шаг 42. Откройте вашего бота в телеграмм и нажмите /start

Иногда два раза.

Бот пришлет вам сообщение, что вы теперь готовы принимать уведомления о работе Стримометра.

Шаг 43. Вернитесь в Стримометр.

Снова запустите на вход RTMP поток.

Бот пришлёт вам уведомление.

Шаг 44. Возрадуйтесь.

Шаг 45. Проверьте рестрим. Для этого в поля Forwarding Destinations введите RTMP URL и RTMP KEY сервиса, куда вы отправляете поток - например YouTube, VK или RuTube.

Если нажать на стрелочку справа от URL, они покажутся и можно быстро выбрать нужный.

Шаг 46. Нажмите "Start Forwarding" и проверьте что на площадку приходит ваш поток, который вы подаёте в Стримометр.

Шаг 47. Нажмите + и добавьте ещё 3 рестрима на площадки. Итого у вас может быть 4 рестрима на площадки.

Шаг 48. Настройка картинки-заглушки на случай обрыва входящего RTMP потока.

Так как на полянах интернет не стабильный, vMix глючит, компы висят, водой заливают материнские платы, происходит нашествие инопланетян и миллион других казусов, это должно минимально касаться зрителей вашей трансляции. Для того, чтобы трансляция для зрителя не оборвалась пока вы чините ваш компутер, загрузите картинку-заглушку в Стримометр.

Когда ваш RTMP поток до Стримометра оборвётся, а рестрим будет активен и зрители на YouTube, VK и RuTube радостно смотрят ваш стрим, то они продолжат его смотреть, но уже не в виде видеопотока, а в виде картинки-заглушки.

Шаг 49. Загрузка картинки-заглушки в Стримометр.

Чтобы загрузить картинку-заглушку в Стримометр, нужно её предварительно подготовить.

Нарисуйте вашу картинку-заглушку и сохраните её в формате .png с разрешением 1920х1080 пикселей, и назовите её "fallback.png".

После этого в правом верхнем углу Стримометра нажмите на значок шестерёнки настроек и нажмите зелёную кнопку "Upload New Fallback Image".

Выберите вашу сохранённую картинку в файловом эксплорере и нажмите "Open".

Картинка загрузится в Стримометр и покажется в случае обрыва входящего RTMP потока.

Шаг 50. Возобновление видеопотока на площадки.

И пока вы чините ваш компутер, восстанавливаете интернет, они будут видеть эту картинку и надеяться на лучшее.

Это даёт огромное преимущество, так как:

а) Стрим не остановится на площадки;
б) Зрители не потеряют ссылку, которую вы отправили на 90000 корпоративных адресов государственной корпорации;
в) Всегда можно продолжить общение в чате пока чинится трансляция и успокоить зрителей текстово.
г) Иные недокументированные преимущества.

После того, как вы починили ваш vMix или интернет, то вновь примите RTMP поток в Стримометр, убедитесь, что всё в порядке, подготовьте ведущего трансляции (при наличии ведущего трансляции), сообщите режиссёру, что вы готовы продолжать и по команде или самостоятельно нажмите на зеленую кнопку обновления трансляции рядом с кнопкой остановки рестрима.

После нажатия оной трансляция видеопотока входящего RTMP в Стримометр возобновится на площадке.

На каждом рестриме нажмите эту кнопку, если у вас все 4 рестрима активны.

Шаг 51. Записи трансляций.

После остановки трансляции вы (а обычно заказчик) очень хочет быстро получить запись мероприятия. Так как вы скорее всего забыли перед началом нажать на запись в vMix, то Стримометр сделал запись трансляйции за вас.

Важно: Стримометр записывает без перекодирования. То есть если вы стримили 6 Мбит/сек, то час видео будет весить около 2,64 ГБ.
А восьмичасовой марафон "Как стать успешным" будет весить 21,09 ГБ.

Расчитывайте объём жесткого диска вашего сервера исходя из параетмров ваших стримов.

Что будет, если кончится свободное место на сервере - лучше не знать.

Чтобы скачать записи трансляций, нажмите на кнопку "View Recordings" справа внизу Стримометра.

Вам откроется окно с вашими записями на сервере. Там будут как видеозаписи, так и записи логов всего того, что происходило в сходящим потоком вашего RTMP.

Записи можно скачать на компутер или удалить с сервера.

Метрики тоже.

Шаг 52. Теперь вы всё знаете про Стримометр, можете его установить на любой домен, развернуть на облачном сервере, настроить картинку-заглушку, уведомления телеграмм бота, скачать записи и метрики трансляции.

Вы молодец!

Шаг 53. Если у вас есть предложения / пожелания / восхищения относительно работы Стримометра, я с радостью или грустью приму их в своей личке телеграмм.

С уважением и заботой о стримерах, Сергей Корнеев.