Потокове передавання ігор та іншого контенту на Twitch стало популярним способом спілкування з аудиторією та створення контенту для мільйонів глядачів у всьому світі. Одним з важливих аспектів стріму є взаємодія з глядачами через чат. Але як вивести чат на екран, щоб глядачі могли бачити його і брати участь в обговоренні? У даній статті ми розповімо докладну інструкцію, як вивести чат на екран під час стріму на Twitch.
Для виведення чату на екран під час стріму на Twitch вам знадобиться спеціальне програмне забезпечення. Одним з найпопулярніших інструментів для цієї мети є OBS Studio (Open Broadcaster Software). Це безкоштовна програма з відкритим кодом, яка дозволяє стримерам легко створювати професійні потоки.
Щоб вивести чат на екран, вам потрібно буде налаштувати вікно чату всередині OBS Studio. Спочатку потрібно відкрити інтерфейс OBS Studio і створити нову сцену, яку ви будете використовувати для потоку. Потім додайте джерело відеоогляду на сцену і встановіть його розміри і положення на ваш розсуд.
Важливо пам'ятати, що розміри та положення вікна чату повинні бути оптимальними для вашого потоку. Оптимальні налаштування допоможуть зробити чат більш зручним для читання і не будуть захаращувати екран.
Після установки розмірів і положення вікна чату в OBS Studio, вам необхідно додати джерело вікна браузера на сцену. Виберіть браузер, у якому відкрито чат на Twitch, і встановіть його розміри та положення, щоб чат правильно відображався на екрані.
Отримання маркера авторизації Twitch API: Підготовка до виведення чату
Для того щоб вивести чат на екран під час стріму на Twitch, потрібно отримати токен авторизації Twitch API. Маркер авторизації необхідний для доступу до Twitch API та отримання даних чату.
Щоб отримати токен авторизації, потрібно виконати наступні кроки:
- Зареєструватися на сайті розробників Twitch (https://dev.twitch.tv/).
- Створити новий додаток, вказавши необхідні дані, такі як ім'я програми, опис і URL-адресу перенаправлення.
- Отримати клієнтський і секретний ключі для нового додатка. Необхідно зберегти секретний ключ в безпечному місці.
- Згенерувати токен авторизації, використовуючи клієнтський і секретний ключі, а також вказавши необхідні права доступу (scope).
Після отримання токена авторизації, його можна використовувати для доступу до Twitch API і отримання даних про чат. Кожен токен авторизації має обмежений термін дії, тому при необхідності його можна оновити.
Створення HTML-сторінки для відображення чату під час стріму
Для того щоб відобразити чат на екрані під час стріму на Twitch, вам знадобиться створити просту HTML-сторінку. У цій статті я розповім, як це зробити.
1. Створіть новий документ HTML. Спочатку створіть відкриваючий тег і закриваючий тег . Потім додайте відкриваючий тег
і закриваючий тег .2. Всередині додайте відкриваючий тег
3. Після закриваючого тегу додайте відкриваючий тег
і закриваючий тег . Всередині ми будемо розміщувати елементи сторінки.4. Для відображення чату можна використовувати таблицю. Додайте відкриваючий тег
5. Усередині таблиці додайте відкриваючий тег
6. Всередині рядка додайте відкриваючий тег
7. Повторіть кроки 5 і 6 для додавання додаткових рядків і комірок в таблицю, якщо необхідно.
8. Після додавання всіх рядків і комірок збережіть HTML-документ з розширенням ".html".
9. Відкрийте документ HTML у будь-якому браузері, щоб переконатися, що чат відображається правильно.
Тепер у вас є HTML-сторінка, на якій відображається чат під час трансляції на Twitch. Ви можете відкрити цю сторінку під час трансляції та розмістити її на екрані, щоб глядачі могли бачити чат у режимі реального часу.
Підключення до Twitch API: встановлення необхідних залежностей
Для того щоб отримати доступ до API Twitch, необхідно встановити кілька залежностей, що дозволяють взаємодіяти з API. Нижче наведено список цих залежностей:
| Залежність | Опис |
|---|---|
| TwitchAPI | Бібліотека, що забезпечує взаємодію з Twitch API |
| OAuth2 | Бібліотека для роботи з протоколом авторизації OAuth2 |
| HTTPClient | Бібліотека для надсилання HTTP-запитів |
Для установки цих залежностей, необхідно виконати наступну команду в командному рядку:
npm install twitchapi oauth2 httpclient
Після успішної установки залежностей, можна приступати до підключення до Twitch API і отримання необхідних даних.
Використання WebSocket для отримання повідомлень чату в режимі реального часу
Для початку, необхідно відкрити WebSocket з'єднання з Twitch сервером чату. Це можна зробити за допомогою JavaScript. Приклад коду:
const socket = new WebSocket('wss://irc-ws.chat.twitch.tv:443');
Після встановлення з'єднання, необхідно авторизуватися, відправивши свої дані аутентифікації. Для цього використовується протокол IRC (Internet Relay Chat), який підтримується Twitch.
Приклад коду для надсилання даних автентифікації:
socket.send('PASS oauth:'); // Відправка токена аутентифікації
socket.send ('NICK'); / / надсилання імені користувача
socket.send ('JOIN#'); / / приєднання до потрібного каналу чату
Після успішної авторизації, можна почати отримувати повідомлення чату:
const message = event.data;
// Обробка отриманого повідомлення (наприклад, відображення в чаті на екрані)
Замість коментаря "/ / обробка отриманого повідомлення " потрібно додати свій код для обробки кожного отриманого повідомлення чату, наприклад, відображення його на екрані під час стріму на Twitch.
Використання WebSocket для отримання повідомлень чату в режимі реального часу дозволяє стримерам відображати чат під час трансляції без необхідності постійного оновлення сторінки та запиту сервера на нові повідомлення. Це значно покращує взаємодію з глядачами та допомагає створити більш інтерактивну атмосферу під час трансляції.