Якщо ви дивилися стрими, то неодмінно бачили на екрані всілякі віджети: коментарі глядачів, донати, що з'являються та зникають, рамки навколо камери стримера, реклама та інше.
Як це робиться? Більшість стримерів користуються програмою що називається OBS. Вона дозволяє робити «сцени», довільно розміщувати на них різноманітні елементи, як-то відео з камер, аудіо, картинку, частину екрана (або весь екран) тощо. OBS вміє відображати веб джерела, тобто сайти. Таким чином, наприклад щоб показати коментарі, достатньо вказати OBS на потрібну адресу (ютуб та твітч коментарі можна відкривати в окремих сторінках), задати розміри, і він буде відображати це на екрані.
Щоб разом з коментарями не показувало тло, на яких вони зазвичай розміщуються, щоб не перекривати камеру або гру, OBS дозволяє визначати кастомний CSS. Таким чином, конструкція типу
body {
background-color: rgba(0, 0, 0, 0);
}оверрайдить тло і коментарі або інші елементи не затуляють сцену.
Так само можна робити різноманітні рамки, вставки донатів і так далі. Звичайно, в OBS є ще деяка нативна функціональність для цього, але зараз ми зосередимось саме на вебсайтах.
Загальний термін для цих штук це оверлеї. Існує індустрія яка надає готові сетапи, інтегрується з усім підряд, дозволяє робити різні налаштування.
Наприклад, коли на твітчі вас починає фоловити людина, то твітч може відправити івент на визначений вами ендпоїнт, який в реальному часі покаже алерт на урлі, який ви додали собі в оверлей. Так само можна підключати будь-які інтеграції, щоб додавати інтерактивності.
На крайньому стримі з Юрою Лучківим мені дуже хотілося додати інтерактиву з донатами. Існує багато таких платформ (streamalerts та інші), але я вирішив зробити все власноруч.
Монобанк дає можливість під'єднати API, встановити адресу вебхуку, та приймати транзакції.
Я придумав наступну схему:
- Встановлюю вебхук
- До мене приходять транзакції
- Я зберігаю собі їх у базу та відображаю на окремій сторіночці
- Сторінку вставляю в OBS
- Додаю реал-тайм оновлення, щоб транзакції з'являлися відразу після проведення
Швидше за все хтось десь вже таке зробив, але я хотів попрограмувати для себе. Як це зробив — у наступній частині.
Сподобалось? Долучайтеся до мого телеграм каналу: https://t.me/full_of_hatred
