Розробка хмарного інтерактивного оверлея для 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 використовується лише для фінального виведення оверлея на екран (як браузерне джерело).

Результат
#prototyping Хмарне розміщення — доступ 24/7 з будь-якого пристрою, без встановлення ПЗ.

Банк оновлюється в реальному часі з анімацією при зміні.

Голосування підписників зростає миттєво без затримок.

Подарки автоматично впливають на шкалу «2», створюючи динаміку.

Битва фанатів активується однією кнопкою.

Адмін-панель доступна звідусіль — ведучий керує ефіром навіть з телефона.

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

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

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

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

Режим Битви фанатів (3 хвилини, дві команди)

Очередь виступів для глядачів (за бажанням)

ехнології
#прототипування Node.js · Socket.io · TikTok Live Connector · HTML/CSS/JS · Render.com (Cloud) · OBS Studio