Как написать расширение для Twitch

Как создать расширение для Twitch

Twitch Extensions (Расширения Twitch) — это новая система взаимодействия стримеров и зрителей, предоставленная разработчиками популярной стриминговой платформы Twitch пару лет назад. Этот способ позволяет разработчикам дополнять и улучшать интерфейс как сайта, так и мобильного приложения, создавая различные интерактивные элементы. В этой статье я расскажу, как работают расширения для Twitch и как создать такое расширение самому.

Бэкенд

Самое главное — интерактивность и налаженное взаимодействие между пользователями и стримером. Для этого нам потребуется хороший сервер.

Такой сервер для расширений Twitch называется Extension Backend Service (EBS). В отличие от фронтенда, ответственность за непрерывную работу которого берет на себя Twitch, хостинг и размещение EBS стриминговым сервисом не обеспечивается — а значит, эту проблему нам нужно решать самостоятельно.

Бэк состоит из нескольких частей.

  • Общение с пользователями и верификация JWT. Twitch для каждого человека, который активирует расширение, генерирует уникальный токен JWT, подписанный секретным ключом. Это позволяет идентифицировать пользователя, не раскрывая его персональных данных, и отделять настоящих зрителей от ботов, спама и DDoS.
  • Обработка действий пользователей внутри расширения. Это может быть, например, подсчет голосов зрителей или работа с базой данных.
  • Взаимодействие с Twitch API и в первую очередь с PubSub — сервисом, который позволяет фронтенду и бэкенду общаться без задержек.

Здесь мы используем популярное и надежное решение — ExpressJS. Для хостинга бэкенда можно использовать любой сервис, даже собственный ПК. Для небольших разработок нам пригодится сервис Heroku, который, помимо хостинга, предоставит удобоваримый URL.

Структура расширений Twitch
Структура расширений

Фронтенд

Фронтенд каждого расширения состоит из одного или нескольких экранов (view), они бывают разных типов и вместе составляют пользовательский интерфейс.

  • Mobile extension — специальный блок, предназначенный для показа внутри официального приложения Twitch с помощью WebView.
  • Video-overlay extension — виджет, который накладывается поверх всего видео (максимум на один стрим).
  • Video-component extension — блок, который занимает лишь часть видеопотока. Стример может расположить его на свое усмотрение.
  • Panel extension — полностью настраиваемая панель, которая отображается не поверх видео, а внизу, вместе с другими панелями.

Кроме различных view, предназначенных для зрителей, есть также два view для самого стримера, которые нужны для управления расширением.

  • Live-config (Live Dashboard) — настройки, доступные в прямом эфире, прямо в дашборде — там же, где и все остальные самые необходимые элементы управления.
  • Config (Configuration) — параметры, которые устанавливаются при инсталляции расширения (или в отдельном меню всех расширений).
Все типы view в расширениях Twitch
Все типы view

На самом деле каждый из этих view — это не более чем специально оформленный тег <iframe> или отдельный WebView (для телефонов), который занимается отображением своего интерфейса и обработкой действий пользователя. Именно поэтому, чтобы упростить разработку фронтенда, мы используем React.

РЕКОМЕНДУЕМ:
Как самому создать игру

Создание расширения для Twitch

Теперь давайте я на примере покажу, как написать основу для собственного расширения. Пусть это будет онлайновое голосование с обновлением голосов в реальном времени.

Упростить разработку расширений для Twitch помогает специальное приложение, которое работает в Windows, macOS или Linux. Оно называется Twitch Developer Rig и нужно исключительно для создания и тестирования расширений.

Developer Rig

При запуске программа предложит вам войти через свой аккаунт на Twitch, и только после этого можно начинать работу.

Создание расширения Twitch — шаг первый
Создание расширения Twitch — шаг первый

Здесь нужно выбрать для своего расширения уникальное имя, которое не только не используется сейчас, а вообще никогда никем не использовалось.

Создание расширения Twitch — шаг второй
Создание расширения Twitch — шаг второй

На этом шаге нам предлагают выбрать папку, где будет располагаться проект, и основу для проекта.

Если ты выберешь какой-либо базовый код, то он будет клонирован с официального репозитория Twitch на GitHub.

Фронт

Для работы расширения Twitch предоставляет специальный пользовательский интерфейс, который доступен в коде страницы через объект window.Twitch.ext. Этот интерфейс используется в первую очередь для управления событиями.

Ключевое событие — это, конечно, появление пользователя. Оно называется onAuthorized() и получает данные юзера: его токен (со всеми правами доступа — стример или зритель) и идентификатор.

Другое важное событие, onContext(), передает расширению данные об окружении во время инициализации (например, какой используется браузер).

Кроме того, API предоставляет возможность подписаться на события Twitch PubSub.

Создадим основу клиентского приложения — video_component.

Код, который будет отображаться у стримера в панели (config):

Бэк

Основная задача нашего бэкенда — хранить и распространять опросы, созданные стримерами, и собирать голоса пользователей, для чего пригодится база данных, например MongoDB. Кроме этого, стоит обратить внимание на обработку заголовков CORS, так как запросы будут идти от имени сервера Twitch.

Теперь, когда есть все составные части, дело за малым — запустить это!

РЕКОМЕНДУЕМ:
Как писать читы для игр

Развертывание и публикация расширения

В первую очередь нам необходим работающий бэкенд. Создадим в папке с файлом, содержащим код сервера, репозиторий Git и файл package.json (с помощью npm init). При инициализации укажите в качестве точки входа (entry point) свой файл.

Затем необходимо закоммитить изменения, создать приложение Heroku и запустить его.

Так, наш сервер запущен и уже ждет новые опросы. Займемся фронтендом.

Для улучшения качества загрузки хостинг этой части Twitch целиком берет на себя, поэтому, чтобы наше расширение стало доступно, нужно зайти в консоль разработчика расширений, в раздел управления вашим расширением, выбрать версию (у нас пока она одна), затем открыть вкладку Go to Files.

Вкладка загрузки файлов в Twitch CDN
Вкладка загрузки файлов в Twitch CDN
Загрузка файлов и история последних файлов
Загрузка файлов и история последних файлов

Кроме загрузки файлов, в других вкладках можно настроить параметры отображения (например, размеры video-component или типы видов расширения), управлять версиями расширения, а также включить монетизацию.

Настройки расширения Twitch
Настройки расширения

РЕКОМЕНДУЕМ:
Методы защиты от читов

Выводы

Как видите, расширения — мощнейший инструмент, который в корне меняет способ взаимодействия стримера со зрителями. Twitch Extensions позволяет устраивать небывалые интерактивные трансляции и шоу, и я показал вам лишь самую вершину айсберга. Это новое направление, где только начали появляться стоящие проекты. Теперь и вы тоже сможете поучаствовать в этом.

Для дальнейшего изучения и разработки расширений вы можете почитать официальный гайд или справку по всем методам.

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (9 оценок, среднее: 4,11 из 5)
Загрузка...
Понравилась статья? Поделиться с друзьями:
Комментарии: 1
  1. хумус

    для написания расширений для твитча само то!

Добавить комментарий