Кейс: Разработка облачного интерактивного оверлея для TikTok LIV

Платформа: TikTok LIVE
Стек: Node.js, Socket.io, TikTok Live Connector, HTML/CSS/JS, OBS Studio, Render.com

Задача
Создать облачное решение для прямого эфира, которое:

Работает с любого устройства (телефон, планшет, ноутбук) без установки дополнительного ПО.

Автоматически считает общий банк (BANK) на основе подарков зрителей.

Проводит голосование «Судьи 0-1-2» (только для подписчиков).

Конвертирует подарки в баллы по шкале «2» во время выступления.

Имеет режим «Битва фанатов» (3 минуты, два участника).

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

Решение
Разработано облачное веб-приложение, размещенное на Render.com, которое:

Подключается к TikTok LIVE и анализирует чат и подарки в реальном времени (без необходимости в OBS для сбора данных).

Отображает 3 шкалы голосования (0 / 1 / 2), которые обновляются мгновенно через WebSocket.

Автоматически добавляет баллы за подарки к шкале «2» (формула: 1 монета = +10 баллов).

Ведет общий BANK, который растет от каждого подарка (пользовательский коэффициент).

Позволяет запускать «Битву фанатов» с таймером 3 минуты.

Админ-панель (контроллер) доступна через браузер на любом гаджете — телефон, планшет, ПК.

Каждый модуль вынесен в отдельный браузерный файл для гибкой настройки в OBS и управления видимостью с пульта.

Особенность: Для работы парсера чата и подарков OBS Studio не нужен. OBS используется только для финального вывода оверлея на экран (как браузерный источник).

Результат
#прототипирование Облачное размещение — доступ 24/7 с любого устройства, без установки ПО.

Банк обновляется в реальном времени с анимацией при изменении.

Голосование подписчиков растет мгновенно без задержек.

Подарки автоматически влияют на шкалу «2», создавая динамику.

Битва фанатов активируется одной кнопкой.

Админ-панель доступна отовсюду — ведущий управляет эфиром даже с телефона.

Клиент остался доволен — оверлей полностью автоматизировал судейство и мотивацию донатов.

Главный экран оверлея (3 шкалы, таймер, имя участника)

Админ-панель (контроллер) со всеми кнопками

Блок БАНКА (крупным планом)

Режим Битвы фанатов (3 минуты, две команды)

Очередь выступлений для зрителей (по желанию)

Технологии
#прототипирование Node.js · Socket.io · TikTok Live Connector · HTML/CSS/JS · Render.com (Облако) · OBS Studio