🎬

Streem Donations

Инструкция OBS Studio
Проверка сервера...

Подключение донатов к OBS Studio

Настройка занимает 2–3 минуты. Делается один раз. После этого донаты сами появляются на трансляции — стример не открывает браузер во время стрима.

🧪 Тестовый донат 🎨 Медиа алертов

Скопируйте и вставьте в OBS → Источники → Browser

0

Запустите сервер донатов

Откройте терминал в папке проекта и выполните:

npm install
npm start

Должно появиться:

🚀 Сервер запущен: http://localhost:3000
⚠️ Сервер должен работать весь стрим. Если закрыть терминал — донаты перестанут появляться.
1

Добавьте Browser Source в OBS

  1. Откройте OBS Studio
  2. Выберите нужную Сцену (ту, что идёт в эфир)
  3. В блоке «Источники» нажмите «+»
  4. Выберите «Browser» (Браузер / Browser Source)
  5. Назовите источник, например: Streem Donations
  6. Нажмите «OK»
Источники (Sources)
+ Browser ← нажать сюда
🖥️ Захват экрана
🎤 Микрофон
2

Вставьте ссылку и настройте параметры

В окне настроек Browser Source заполните так:

Параметр Значение Зачем
URL /overlay?obs=1 Скопируйте кнопкой выше
Width (Ширина) 1920 Размер вашего стрима
Height (Высота) 1080 Размер вашего стрима
FPS 30 Достаточно для анимаций
Custom CSS оставить пустым Не нужно
Shutdown source when not visible ❌ Выключить Иначе донаты не придут
Refresh browser when scene becomes active ✅ Включить Обновляет overlay при смене сцены
Control audio via OBS ✅ Включить Звук доната через OBS
💡 Если стримите в 1280×720 — поставьте Width: 1280, Height: 720
3

Поднимите источник выше захвата экрана

Browser Source должен быть выше захвата экрана/игры в списке источников — тогда алерт будет поверх картинки.

Правильный порядок слоёв ↑
🔥 Streem Donations ← сверху
🖥️ Захват экрана / Игра
🎨 Фон / Камера

Перетащите источник мышкой вверх списка, если он внизу.

4

Настройте звук (опционально)

  1. В OBS откройте «Микшер аудио» (Audio Mixer)
  2. Найдите источник Streem Donations
  3. Убедитесь, что громкость не на нуле и не заглушён 🔊
  4. Зрители услышат звук «дзынь» при каждом донате
5

Добавьте картинку/GIF к алертам (опционально)

На странице Медиа можно:

  • Выбрать готовую анимацию (огонь, корона, звезда...)
  • Загрузить свой GIF или PNG
  • Установить медиа по умолчанию для всех донатов
🎨 Открыть медиа-библиотеку
6

Проверьте, что всё работает

  1. Убедитесь, что сервер запущен (npm start)
  2. Откройте страницу тестового доната
  3. Отправьте тестовый донат
  4. В OBS (превью) должен появиться алерт с анимацией и звуком
🚀 Отправить тестовый донат
✅ Если алерт появился в OBS — всё настроено! Можно стримить.

Как это работает

👤 Зритель

Отправляет донат

→
⚙️ Сервер

localhost:3000

→
🎬 OBS Browser

Overlay в фоне

→
📺 Эфир

Зрители видят алерт

❓ Частые проблемы

Донаты не появляются в OBS
  • Проверьте, что npm start запущен и сервер работает
  • URL в Browser Source: http://localhost:3000/overlay?obs=1
  • Выключите «Shutdown source when not visible»
  • Нажмите «Refresh cache of current page» в свойствах источника
  • Browser Source должен быть выше захвата экрана
Нет звука при донате
  • Включите «Control audio via OBS» в настройках Browser Source
  • Проверьте громкость источника в микшере OBS
  • Убедитесь, что источник не заглушён (mute)
Виден чёрный фон вместо прозрачного
  • Используйте URL с параметром ?obs=1
  • Не используйте обычный /overlay без obs=1
OBS / Live Studio на ПК, сервер на VPS
  • Да, так и делают. Browser Source грузит страницу по интернету
  • Вместо localhost: http://IP_VPS:3000/overlay?obs=1
  • Лучше домен + HTTPS (Cloudflare / nginx)
  • На VPS откройте порт в firewall (ufw / security group)
OBS на другом ПК / ноутбуке
  • Сервер и OBS могут быть на разных машинах
  • localhost работает только если сервер на том же ПК
  • Для другого ПК / VPS нужен IP или домен: http://192.168.x.x:3000/overlay?obs=1
Нужно ли открывать overlay в браузере?

Нет. OBS сам держит overlay открытым через Browser Source. Стример во время стрима ничего не открывает.