Руководство настройки JSMpeg Server Relay

JSMpeg Server Relay — позволяет объединить несколько трансляции на одной веб странице.

• Прием данных по протоколу MPEG-TS через HTTP в формате цифрового сжатия аудио и видео MPEG1
• Поддержка множества трансляций на один порт сервера
• Трансляции отображаются на веб странице с помощью jsmpeg плеера

Клиент

Начать трансляцию на сервер можно с помощью приложения JSMpeg Webcam Broadcaster.

Настройки

Переменные среды применяемые для настройки сервера.

Переменные среды (ENV)	Описание	Значение по умолчанию
STREAM_KEY	Ключ для подключения клиента	не задано
WEBSITE_PASSWORD	Пароль от сайта	admin
ALLOW_MULTISTREAM	Значение true разрешает несколько трансляций с одного IP адреса, false запрещает	false
BROADCASTERS_LIMIT	Максимальное количество трансляций	10
PORT	Порт HTTP сервера	80

Интеграция с OBS

Отобразите веб страницу с трансляциями на стриме.
Для этого выполните следующие шаги:

1. Скопируйте URL страницы из браузера (по умолчанию: http://localhost:80)
2. В OBS создайте новый источник Браузер и вставьте ранее скопированный URL в поле Адрес URL
3. Поставьте чекбокс ☑️ напротив Отключать, когда не видим и Обновить браузер, когда сцена становиться активной

Примечание

• Чтобы отредактировать камеры в источниках OBS нажмите на Браузер -> Взаимодействовать.
• Если OBS показывает не актуальную информацию выберете Браузер в источниках и нажмите Обновить.
• По умолчанию OBS применяет прозрачный фон к страницам. Чтобы сделать фон непрозрачным удалите свойство background-color или все свойства из поля CSS.

Изменение дизайна через OBS

Для изменения дизайна отредактируйте поле CSS выбрав Браузер в Источники OBS.

Фон

За фоновый цвет (подложку) отвечает CSS свойство background-color элемента body. По умолчанию используется белый цвет фона, в примере ниже розовый.

body {
    background-color: hotpink;
}

В этом примере прозрачный фон.

body {
    background-color: rgba(0, 0, 0, 0);
}

Цвет рамки плеера

Используйте класс .border-a, .border-b, .border-c для изменения цвета рамок. Изменим цвет на зеленый для первой рамки и желтый для второй.

.border-a {
    background-color: green;
}
.border-b {
    background-color: yellow;
}

Для выбора цвета кликните на плеер правой кнопкой мыши.

Контакты

По вопросам сотрудничества свяжитесь со мной через:
[email protected]
Steam
Discord сервер Alliance