Виджеты для стримов
Виджеты на стримах являются обычными веб-сайтами с прозрачным фоном, разработка таких виджетов практически не отличается от разработки обычных веб-сайтов.
Добавление виджетов на стрим
Добавляются такие виджеты в OBS через функцию Браузерный источник (Browser Source).
Добавление браузерного источника в OBS
После чего, необходимо указать URL виджета, а так же размеры страницы в пикселях.
Настройки браузерного источника
Рекомендация
Старайтесь использовать такое разрешение страницы, которое вам потом не придётся масштабировать в OBS, любое масштабирование будет приводить к потере качества изображения.
- Если указать разрешение ниже целевого и увеличить размер, то изображение будет размытым.
- Если указать разрешение выше целевого и уменьшить размер, то появятся артефакты на границах элементов. (пропадёт сглаживание)
Пример потери качества при масштабировании
В методе смешивания включите SRGB off, это связано с некорректным отображением полупрозрачных цветов в OBS при включённом SRGB, отслеживать баг можно в issue#469.
Изменение метода смешивания
Разработка виджетов
По умолчанию, OBS автоматически применяет стиль к body, который задаёт прозрачный фон, делает нулевые отступы и скрывает появляющиеся полосы прокрутки. Однако, рекумендуется явно указать эти стили в вашем CSS, чтобы избежать возможных проблем с несовместимостью версий OBS и плагина браузерного источника.
body {
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
}Хорошей практикой будет автоматическое масштабирование виджета под ширину окна браузерного источника, для этого можно использовать следующий CSS:
body {
font-size: 1vw; /* Устанавливаем размер шрифта в зависимости от ширины окна */
}После чего, все размеры на странице должны быть заданы в em или rem единицах, чтобы они масштабировались вместе с размером шрифта, а значит и размером страницы.
.container {
width: 30em; /* Ширина контейнера будет зависеть от ширины окна */
height: 10em; /* Высота контейнера будет зависеть от ширины окна */
}Подробнее о разработке именно танковых виджетов можно прочитать в разделе Интеграции -> WotStat виджеты.
Andrei Soprachev