Как создать hls rtmp сервер как сделать собственный стрим сервер

Добавил пользователь Владимир З.
Обновлено: 05.10.2024

Необходимость рестрима

Ретрансляция позволяет стримерам демонстрировать прямую трансляцию с выводом, дублируя эфир или видео с одной площадки на другую.

Необходимость в ретрансляции потока возникает в таких ситуациях:

когда нужно одновременно принять и передать контент разного формата;
быстрый и эффективный набор аудитории;
при окончании демонстрации видео его можно добавить в другой канал в автоматический хостинг.

Справка! При трансляции часто возникает проблема с битрейтом. Величина задержки видео связана с различными факторами. Это может быть длительность кодирования потока, операции по упаковке данных, время распространения в сети и буферизация в CDN.

Назначение плагина Multiple RTMP

Плагины используют для расширения функционала ПО, в частности, Multiple RTMP предназначен для одновременной потоковой передачи на несколько серверов. Можно совместно использовать кодировщики с основным выходом OBS для экономии мощности процессора. Пользователь также может использовать автономные кодировщики с базовой конфигурацией и битрейтом. В текущей версии доступно несколько вариантов языковой настройки.

Плагин Multiple RTMP применяется для программы OBS Studio. Она позволяет захватить и записать экран компьютера. Пользователи смогут организовывать стримы на Twitch, Youtube. Плагин позволяет выполнить рестрим на различные площадки. При этом пользователям станут доступными настройки кодировщика и битрейта. Они необходимы для стриминговых площадок, чтобы улучшить качество изображения.

Осторожно! Для трансляции Twitch подойдет битрейт 6000, чтобы картинка была детализированной, не размытой. Но на площадке Youtube качество будет снижено.

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

Установка плагина

Чтобы установить плагин на персональный компьютер на базе операционной системы Windows, сначала необходимо загрузить его последнюю версию. На устройстве появится zip-файл. Его нужно извлечь в папку OBS, которая по умолчанию имеет следующий путь: C: \Program Files \obs studio. Теперь нужно открыть путь к папке: C: \Program Files \obs studio \data \obs-plugins. После выбора пути установка будет завершена.

Процесс установки на MacOS немного отличается:

Нужно также скачать последнюю версию плагина из надежного источника.
На устройстве появится zip-файл. Его нужно извлечь в любую папку на собственное усмотрение.

Внимание! Пользователи не смогут сразу извлечь файл в папку OBS. Именно поэтому нужно сначала извлечь все компоненты и после вручную переместить их в OBS.

Перед установкой нужно ознакомиться с минимальными требованиями для подключения модуля. Версия основного модуля OBS Studio должна быть создана с использованием QT 5.15.2.

Настройка OBS Studio и Multiple RTMP

Справка! Необходимо регулярно отслеживать показания пропуска кадров, чтобы получить качественное и четкое изображение при рендеринге, кодировании и сети.

Чтобы настроить Multiple RTMP нужно:

Настройка трансляции на Youtube

Настройка трансляции на Twich

Программа для тестирования была выпущена после обновления правил стриминговой платформы. Главной задачей стала защита сообщества. Проверка сервера необходима для того, чтобы узнать, сможет ли пользователь вести стримы с соблюдением правил.

Полезное видео

Дополнительный материал по теме:

Настройка видео и аудио переносится из программы OBS Studio. Пользователи, которые имеют достаточно мощный персональный компьютер, смогут экспериментировать с различными параметрами. Плагин Multiple RTMP был создан для отсылки потока на все доступные площадки из одного приложения. С одного компьютера можно выводить трансляцию одновременно на Twich и Youtube. А чтобы видео было максимально качественным, дополнительно необходимо обеспечить хороший интернет.

Conclusion – key learnings for Network operators
1. Netflix uses multiple TCP connections and uses TLS therefore it’s not possible to limit the number of devices or streaming sessions even with DPI based platforms.
2. Netflix videos are variable bitrate encoded (and dependent on genre of movie amongst other things) therefore it’s not possible to limit resolution (like standard def) with network policy.
3. Netflix downloads in short bursts at full link rate, which can negatively impact other traffic like gaming packets or VoIP. A strategy to fix QoE problems associated with Netflix behavior is to leverage modern queuing technologies such as FQ-CoDel.

services:
origin:
build:
context: .
image: airensoft/ovenmediaengine:latest
ports:
– “1935:1935/tcp”
– “3333:3333/tcp”
– “8080:8080/tcp”
– “9000:9000/tcp”
– “4000-4005:4000-4005/udp”
– “10006-10010:10006-10010/udp”
environment:
– OME_ORIGIN_PORT=9000
– OME_RTMP_PROV_PORT=1935
– OME_HLS_STREAM_PORT=8080
– OME_DASH_STREAM_PORT=8080
– OME_SIGNALLING_PORT=3333
– OME_MPEGTS_PROV_PORT=4000-4005/udp
– OME_ICE_CANDIDATES=*:10006-10010/udp
command: /opt/ovenmediaengine/bin/OvenMediaEngine -c origin_conf

edge:
build:
context: .
image: airensoft/ovenmediaengine:latest
ports:
– “3334:3334/tcp”
– “8090:8090/tcp”
– “10000-10005:10000-10005/udp”
environment:
– DEFAULT_ORIGIN_SERVER=192.168.0.199
– OME_HLS_STREAM_PORT=8090
– OME_DASH_STREAM_PORT=8090
– OME_SIGNALLING_PORT=3334
– OME_ICE_CANDIDATES=*:10000-10005/udp
command: /opt/ovenmediaengine/bin/OvenMediaEngine -c edge_conf

How to Find Your YOUTUBE Stream Key – 2021 Tutorial

How to Find Your Twitch Stream Key – 2021 Tutorial

How to Find Your AfreecaTV Stream Key – 2021 Tutorial

Обновление: Новые виджеты/Джайна и Питер в донатах/Boosty/DA Studio выходит на IOS

Интервью со стримером: SpaceMita – потеряла канал из-за мошенников

Автор материала, перевод которого мы сегодня публикуем, говорит, что работает над приложением, которое позволяет организовывать потоковое вещание (стриминг) того, что происходит на рабочем столе пользователя.

Приложение принимает от стримера поток в формате RTMP и преобразует его в HLS-поток, который может быть воспроизведён в браузерах зрителей. В этой статье будет рассказано о том, как можно создать собственное стриминговое приложение с использованием Node.js и React. Если вы привыкли, увидев заинтересовавшую вас идею, сразу же погружаться в код, можете прямо сейчас заглянуть в этот репозиторий.

Разработка веб-сервера с базовой системой аутентификации

Давайте создадим простой веб-сервер, основанный на Node.js, в котором, средствами библиотеки passport.js, реализована локальная стратегия аутентификации пользователей. В роли постоянного хранилища информации будем использовать MongoDB. Работать с базой данных будем с помощью ODM-библиотеки Mongoose.

Инициализируем новый проект:

В директории проекта создадим две папки — client и server . Код фронтенда, основанный на React, попадёт в папку client , а бэкенд-код будет храниться в папке server . Сейчас мы работаем в папке server . А именно, для создания системы аутентификации будем использовать passport.js. Мы уже установили модули passport и passport-local. Прежде чем мы опишем локальную стратегию аутентификации пользователей — создадим файл app.js и добавим в него код, который нужен для запуска простого сервера. Если вы будете запускать этот код у себя — позаботьтесь о том, чтобы у вас была бы установлена СУБД MongoDB, и чтобы она была бы запущена в виде сервиса.

Вот код файла, который находится в проекте по адресу server/app.js :

Мы загрузили всё необходимое для приложения промежуточное ПО, подключились к MongoDB, настроили express-сессию на использование файлового хранилища. Хранение сессий позволит восстанавливать их после перезагрузки сервера.

Теперь опишем стратегии passport.js, предназначенные для организации регистрации и аутентификации пользователей. Создадим в папке server папку auth и поместим в неё файл passport.js . Вот что должно быть в файле server/auth/passport.js :

Кроме того, нам нужно описать схему для модели пользователя (она будет называться UserSchema ). Создадим в папке server папку database , а в ней — файл UserSchema.js .

В UserSchema имеется три метода. Метод generateHash предназначен для преобразования пароля, представленного в виде обычного текста, в bcrypt-хэш. Мы используем этот метод в стратегии passport для преобразования паролей, вводимых пользователями, в хэши bcrypt. Полученные хэши паролей потом сохраняются в базе данных. Метод validPassword принимает пароль, вводимый пользователем, и проверяет его путём сравнения его хэша с хэшем, хранящимся в базе данных. Метод generateStreamKey генерирует уникальные строки, которые мы будем передавать пользователей в качестве их стриминговых ключей (ключей потока) для RTMP-клиентов.

Вот код файла server/database/Schema.js :

Теперь, когда мы определили стратегии passport, описали схему UserSchema и создали на её основе модель, давайте инициализируем passport в app.js .

Вот код, которым нужно дополнить файл server/app.js :

Кроме того, в app.js надо зарегистрировать новые маршруты. Для этого добавим в server/app.js следующий код:

Создадим файлы login.js и register.js в папке routes , которая находится в папке server . В этих файлах определим пару вышеупомянутых маршрутов и воспользуемся промежуточным ПО passport для организации регистрации и аутентификации пользователей.

Вот код файла server/routes/login.js :

Вот код файла server/routes/register.js :

Мы используем движок шаблонизации ejs. Добавим файлы шаблонов login.ejs и register.ejs в папку views , которая находится в папке server .

Вот содержимое файла server/views/login.ejs :

Вот что должно быть в файле server/views/register.ejs :

Мы, можно сказать, закончили работу над системой аутентификации. Теперь приступим к созданию следующей части проекта и настроим RTMP-сервер.

Настройка RTMP-сервера

Мы используем модуль node-media-server — Node.js-реализацию медиа-сервера RTMP. Этот медиа-сервер принимает RTMP-потоки и преобразует их в HLS/DASH с использованием мультимедийного фреймворка ffmpeg. Для успешной работы проекта в вашей системе должен быть установлен ffmpeg. Если вы работаете на Linux и у вас уже установлен ffmpeg, вы можете выяснить путь к нему, выполнив следующую команду из терминала:

Для работы с пакетом node-media-server рекомендуется ffmpeg версии 4.x. Проверить установленную версию ffmpeg можно так:

Если ffmpeg у вас не установлен и вы работаете в Ubuntu, установить этот фреймворк можно, выполнив следующую команду:

Если вы работаете в Windows — можете загрузить сборки ffmpeg для Windows.

Добавьте в проект конфигурационный файл server/config/default.js :

Замените значение свойства ffmpeg на путь, по которому ffmpeg установлен в вашей системе. Если вы работаете в Windows и загрузили Windows-сборку ffmpeg по вышеприведённой ссылке — не забудьте добавить к имени файла расширение .exe . Тогда соответствующий фрагмент вышеприведённого кода будет выглядеть так:

Теперь установим node-media-server, выполнив следующую команду:

Создайте в папке server файл media_server.js .

Вот код, который нужно поместить в server/media_server.js :

Пользоваться объектом NodeMediaService довольно просто. Он обеспечивает работу RTMP-сервера и позволяет ожидать подключений. Если стриминговый ключ недействителен — входящее подключение можно отклонить. Мы будем обрабатывать событие этого объекта prePublish . В следующем разделе мы добавим в замыкание прослушивателя событий prePublish дополнительный код. Он позволит отклонять входящие подключения с недействительными стриминговыми ключами. Пока же мы будем принимать все входящие подключения, поступающие на RTMP-порт по умолчанию (1935). Нам нужно лишь импортировать в файле app.js объект node_media_server и вызвать его метод run .

Добавим следующий код в server/app.js :

Загрузите и установите у себя OBS (Open Broadcaster Software). Откройте окно настроек программы и перейдите в раздел Stream . Выберите Custom в поле Service и введите rtmp://127.0.0.1:1935/live в поле Server . Поле Stream Key можно оставить пустым. Если программа не даст сохранить настройки без заполнения этого поля — в него можно ввести произвольный набор символов. Нажмите на кнопку Apply и на кнопку OK . Щёлкните кнопку Start Streaming для того, чтобы начать передачу своего RTMP-потока на собственный локальный сервер.

Настройка OBS

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

Данные, которые выводит в терминал медиа-сервер, основанный на Node.js

В замыкании мы выполняем запрос к базе данных для нахождения пользователя со стриминговым ключом. Если ключ принадлежит пользователю — мы просто позволяем пользователю подключиться к серверу и опубликовать свою трансляцию. В противном случае мы отклоняем входящее RTMP-соединение.

В следующем разделе мы создадим простую клиентскую часть приложения, основанную на React. Она нужна для того чтобы позволить зрителям просматривать потоковые трансляции, а также для того, чтобы позволить стримерам генерировать и просматривать свои стриминговые ключи.

Показ потоковых трансляций

Теперь переходим в папку clients . Так как мы собираемся создать React-приложение, нам понадобится webpack. Нужны нам и загрузчики, которые применяются для транспиляции JSX-кода в JavaScript-код, понятный браузерам. Установим следующие модули:

Добавим в проект, в его корневую директорию, конфигурационный файл для webpack ( webpack.config.js ):

Добавим в проект файл client/index.js :

Вот содержимое файла client/index.scss :

Для маршрутизации используется react-router. Во фронтенде мы также используем bootstrap, и, для показа трансляций — video.js. Теперь добавим в папку client папку components , а в неё — файл Root.js . Вот содержимое файла client/components/Root.js :

Компонент рендерит React, содержащий три субкомпонента . Компонент выводит список трансляций. Компонент отвечает за показ проигрывателя video.js. Компонент отвечает за создание интерфейса для работы со стриминговыми ключами.

Создадим компонент client/components/LiveStreams.js :

Вот как выглядит страница приложения.

Фронтенд стримингового сервиса

После монтирования компонента выполняется обращение к API NMS для получения списка подключённых к системе клиентов. API NMS выдаёт не особенно много сведений о пользователях. В частности, от него мы можем получить сведения о стриминговых ключах, посредством которых пользователи подключены к RTMP-серверу. Эти ключи мы будем использовать при формировании запросов к базе данных для получения сведений об учётных записях пользователей.

В методе getStreamsInfo мы выполняем XHR-запрос к /streams/info , но мы пока не создали то, что способно ответить на этот запрос. Создадим файл server/routes/streams.js со следующим содержимым:

Мы передаём сведения о потоках, возвращённые API NMS, бэкенду, делая это для получения информации о подключённых клиентах.

Мы выполняем запрос к базе данных для получения списка пользователей, стриминговые ключи которых совпадают с теми, что мы получили от API NMS. Полученный список мы возвращаем в формате JSON. Зарегистрируем маршрут в файле server/app.js :

В итоге мы выводим список активных трансляций. В этом списке присутствует имя пользователя и миниатюра. О том, как создавать миниатюры для трансляций, мы поговорим в конце материала. Миниатюры привязаны к конкретным страницам, на которых, с помощью video.js, проигрываются HLS-потоки.

Создадим компонент client/components/VideoPlayer.js :

При монтировании компонента мы получаем стриминговый ключ пользователя для инициализации HLS-потока в проигрывателе video.js.

Проигрыватель

Выдача стриминговых ключей тем, кто собирается заниматься потоковой трансляцией

Создадим файл компонента client/components/Settings.js :

В соответствии с локальной стратегией passport.js, мы, если пользователь успешно зарегистрировался, создаём для него новую учётную запись с уникальным стриминговым ключом. Если пользователь посетит маршрут /settings — он сможет увидеть свой ключ. При монтировании компонента мы выполняем XHR-запрос к бэкенду для выяснения существующего стримингового ключа пользователя и выводим его в компоненте .

Пользователь может сгенерировать новый ключ. Для этого нужно нажать на кнопку Generate a new key . Это действие вызывает выполнение XHR-запроса к серверу на создание нового ключа. Ключ создаётся, сохраняется и возвращается. Это позволяет показать новый ключ пользователю. Для того чтобы данный механизм заработал — нам нужно определить маршруты GET и POST для /settings/stream_key . Создадим файл server/routes/settings.js со следующим кодом:

Для генерирования уникальных строк мы используем модуль shortid.

Зарегистрируем новые маршруты в server/app.js :

Генерирование миниатюр для видеопотоков

В компоненте ( client/components/LiveStreams.js ) мы выводим миниатюры для транслируемых стримерами видеопотоков:

Миниатюры будем генерировать при подключении потока к серверу. Воспользуемся заданием cron, которое, каждые 5 секунд, создаёт новые миниатюры для транслируемых потоков.

Добавим следующий вспомогательный метод в server/helpers/helpers.js :

Мы передаём стриминговый ключ методу generateStreamThumbnail .

Он запускает отдельный ffmpeg-процесс, который создаёт изображение на основе HLS-потока. Этот вспомогательный метод будем вызывать в замыкании prePublish после проверки стримингового ключа ( server/media_server.js ):

Для того чтобы сгенерировать свежие миниатюры, мы запускаем задание cron и вызываем из него вышеописанный вспомогательный метод ( server/cron/thumbnails.js ):

Это задание будет выполняться каждые 5 секунд. Оно будет получать список активных потоков из API NMS и генерировать для каждого потока миниатюры с использованием стримингового ключа. Задание нужно импортировать в server/app.js и вызвать:

Итоги

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

Вот демонстрация работы приложения.

СОДЕРЖАНИЕ

Архитектура

Кодировщик: кодируйте видеофайлы в формате H.264 и аудио в AAC , MP3 , AC-3 или EC-3 . Он инкапсулируется транспортным потоком MPEG-2 или MPEG-4_Part_14 для его передачи.
Segmenter: разделяет поток на фрагменты одинаковой длины. Он также создает индексный файл, содержащий ссылки на фрагментированные файлы, сохраненные как .m3u8 .

Функции

Адаптируемость

Использование фрагментированного MP4

На WWDC 2016 Apple объявила о включении адресации байтового диапазона для фрагментированных файлов MP4 или fMP4, что позволяет воспроизводить контент через HLS без необходимости мультиплексировать его в транспортный поток MPEG-2 . Промышленность сочла это шагом к совместимости между HLS и MPEG-DASH .

HLS с низкой задержкой

Apple Low Latency HLS (ALHLS), анонсированная Apple на WWDC2019
"Community LHLS" (LHLS), предшествовавшая публикации Apple и предположительно более простая

Другие функции включают в себя:

Поддержка HLS с низкой задержкой доступна в бета-версии tvOS 13, iOS и iPadOS 14. 30 апреля 2020 года Apple добавила спецификации низкой задержки во второе издание основной спецификации HLS.

Динамическая вставка рекламы

Между двумя тегами EXT-X-DATERANGE, которые содержат атрибуты SCTE35-OUT и SCTE35-IN соответственно, может находиться последовательность URI сегментов мультимедиа. Эти медиа-сегменты обычно представляют собой рекламные программы, которые можно заменить местной или персонализированной рекламой. Замена рекламы не требует замены файлов мультимедиа, нужно изменить только URI в списке воспроизведения, чтобы указать разные рекламные программы. Замену рекламы можно выполнить на исходном сервере или на устройстве воспроизведения мультимедиа клиента.

Реализации сервера

использование

Поддерживаемые плееры и серверы

Windows 10 версий с 1507 по 2004 ( Microsoft Edge Legacy) (больше не поддерживается)
macOS 10.6+ ( Safari и QuickTime )
iOS 3.0+ ( Safari )
Android 4.1+ ( Google Chrome )

Клиенты

Имеет полную поддержку HLS.

В Edge Chromium с 79 по настоящее время нет встроенной поддержки.

Поддержка через Media Source Extensions в других ОС.

Android и iOS имеют встроенную поддержку, зависящую от ОС.

Для других платформ требуются расширения источников мультимедиа.

Поддержка через Media Source Extensions в других ОС.

Для других платформ требуются расширения источников мультимедиа.

Имеет полную поддержку HLS.

iPhone, iPad и AppleTV

Воспроизведение потокового Интернет-радио

HLS Audio - 100% совместимый
AAC-LC / HE-AAC / xHE-AAC 2.0 Stereo / 5.1-7.1 Surround
ES - элементарный поток ADTS
fMP4 - фрагментированный ISO MP4
отображает синхронные метаданные и графику в реальном времени

Читайте также: