---
title: "Виджеты для стримов"
description: "Виджеты на стримах являются обычными веб-сайтами с прозрачным фоном, разработка таких виджетов практически не отличается от разработки обычных веб-сайтов."
lang: ru
canonical_url: "https://docs.wotstat.info/guide/widgets/stream/"
markdown_url: "https://docs.wotstat.info/guide/widgets/stream/index.md"
source_url: "https://github.com/wotstat/mods-development-docs/blob/main/docs/ru/guide/widgets/stream/index.md"
---

# Виджеты для стримов

Виджеты на стримах являются обычными веб-сайтами с прозрачным фоном, разработка таких виджетов практически не отличается от разработки обычных веб-сайтов.

## Добавление виджетов на стрим
Добавляются такие виджеты в [OBS](https://obsproject.com/) через функцию **Браузерный источник** (Browser Source).

**Details — Добавление браузерного источника в OBS**

![add](https://docs.wotstat.info/guide/widgets/stream/assets/add.png)

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

**Details — Настройки браузерного источника**

![add-setup](https://docs.wotstat.info/guide/widgets/stream/assets/add-setup.png)

> **TIP — Рекомендация**

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

- Если указать разрешение **ниже** целевого и **увеличить** размер, то изображение будет размытым.
- Если указать разрешение **выше** целевого и **уменьшить** размер, то появятся артефакты на границах элементов. (пропадёт сглаживание)

**Details — Пример потери качества при масштабировании**

![compare](https://docs.wotstat.info/guide/widgets/stream/assets/compare-resolution.png)

В методе смешивания включите `SRGB off`, это связано с некорректным отображением полупрозрачных цветов в OBS при включённом `SRGB`, отслеживать баг можно в [issue#469](https://github.com/obsproject/obs-browser/issues/469).

**Details — Изменение метода смешивания**

![blending-method](https://docs.wotstat.info/guide/widgets/stream/assets/blending-method.png)

## Разработка виджетов

По умолчанию, OBS автоматически применяет стиль к `body`, который задаёт прозрачный фон, делает нулевые отступы и скрывает появляющиеся полосы прокрутки. Однако, рекумендуется явно указать эти стили в вашем CSS, чтобы избежать возможных проблем с несовместимостью версий OBS и плагина браузерного источника.

```css
body { 
  background-color: rgba(0, 0, 0, 0);
  margin: 0px auto;
  overflow: hidden; 
}
```

Хорошей практикой будет автоматическое масштабирование виджета под ширину окна браузерного источника, для этого можно использовать следующий CSS:

```css
body {
  font-size: 1vw; /* Устанавливаем размер шрифта в зависимости от ширины окна */
}
```

После чего, все размеры на странице должны быть заданы в `em` или `rem` единицах, чтобы они масштабировались вместе с размером шрифта, а значит и размером страницы.

```css
.container {
  width: 30em; /* Ширина контейнера будет зависеть от ширины окна */
  height: 10em; /* Высота контейнера будет зависеть от ширины окна */
}
```

Подробнее о разработке именно танковых виджетов можно прочитать в разделе [Интеграции -> WotStat виджеты](https://docs.wotstat.info/guide/integrations/wotstat-widgets/introduction/index.md).