Как сделать чат на стриме поверх игры. Установка и настройка Restream Chat для twitch, YouTube и periscope

Множество стримов на Ютуб трудно представить без чата, где пользователи делятся своими мыслями, обмениваются мнениями, высказывают пожелания и критику. При этом организация такого чата может стать существенной проблемой, так как многие из стримеров не в достаточной мере знакомы с соответствующим интерфейсом YouTube (а также интерфейсом релевантной программы для создания стримов «Open Broadcasting Software»). Для того чтобы научиться перейдите на соответствующую статью. А в этом материале я постараюсь помочь пользователям, и подробно расскажу, как организовать чат для стрима на Ютуб, и какие инструменты нам в этом помогут.

Организации чата в стриме на своём канале Ютуб подразумевает, что вы уже имеете настроенный ранее стрим в вашем аккаунте, а также установленную на ПК программу «OBS», которая сопряжена с вашим аккаунтом на Youtube.

Организация чата на Ютуб проходит следующим образом:

  • Активация чата в вашем канале на Ютуб и получение соответствующей ссылки на чат;
  • Добавление в «OBS» источника «BrowseSource», в настройки которого вводится полученная нами ссылка;
  • Переход на внешний ресурс chatv2.septapus.com, где расположен «Chat v2.0 Style Generator », благодаря которому производится настройка чата и копирование данных CSS;
  • Вставка указанных данных СSS в соответствующее окно программы «OBS» (внешний вид чата изменяется нужным нам образом).

При этом замечу, что данный способ более актуален нежели другие аналоги, так как для многих внешних чатов, которые необходимо скачать и установить на ПК, необходим источник в «OBS», называемый «CLR-browser», который в последних версиях OBS отсутствует, будучи заменён на «BrowseSource».

Используем возможности «OBS» и «Youtube» для создания чата

Как создать чат для стрима на YouTube

Итак, чтобы сформировать чат для стрима, рекомендую выполнить следующее:


Теперь перейдите в программу «OBS», и в главном окне создайте новый источник, нажав на плюсик, выбрав «BrowseSource».

Выберите «BrowserSource» в источниках «OBS»

Откроется окно создания нового источника, назовите его «Чат» и нажмите на «Ок», откроется окно настроек источника. В графу «URL» вставьте ранее полученную на Ютуб ссылку, и нажмите на «Ок».

В окне появится окно чата, но оно будет довольно грубоватого внешнего вида, да ещё с белым фоном, асинхронным с чёрным фоном самого экрана. Как же изменить ситуацию? Обратимся к возможностям сайта chatv2.septapus.com.

Как скачать чат для стрима

Возможности сайта chatv2.septapus.com позволяют произвести гибкую настройку вашего чата на Ютуб, а также визуально проверить, как данный чат будет выглядеть на вашем канале. После произведения всех настроек чата (как их сделать я опишу в следующем разделе), необходимо будет перейти в самый низ страницы данного сайта, и скопировать код, располагающийся в поле под названием «CSS».

Затем необходимо будет перейти в «OBS», навести курсор на созданный нами ранее источник под названием «чат», нажать правую клавишу мыши, и выбрать «Свойства». В открывшемся окне необходимо будет найти поле «CSS», удалить его имеющееся содержимое, а затем вставить туда код CSS, который мы ранее скопировали на сайте chatv2.septapus.com .

Настройка чата для стрима

Как я уже писал выше, возможности сайта chatv2.septapus.com позволяют произвести достаточно гибкую настройку окна чата и его содержимого. При этом вы будете наглядно видеть все производимые вами изменения.

В частности, настройки чата делятся на «Fonts» (шрифты), «Avatars» (аватары), «Channel names» (имена каналов), Messages (сообщения), «Timestamps» (отметки о времени отправки сообщений), «Backgrounds» (задний фон), SuperChat/ Fan Funding /Sponsors (Суперчат/Пожертвования, Спонсоры), Animation (Анимация), и, собственно, CSS (язык описания внешнего вида нашего чата).

Соответственно, вы можете менять размеры букв (size), выбирать различные шрифты (fonts) для отображения текста, цвета данных шрифтов и так далее.

После выбора необходимых настроек не забудьте скопировать код CSS, и перенести его в программу «OBS», как я уже упоминал выше.

Заключение

В данной статье мной было рассмотрен способ, как создать для общения чат для стрима на Ютуб, и какова последовательность действий для организации данного чата. Обращаю внимание читателя на то, что все визуальные настройки чата производятся на сайте chatv2.septapus.com, а полученный оттуда CSS-код вставляется в соответствующее поле настроек программы «OBS». Воспользуйтесь приведённым мной способом, и указанный чат будет радовать вас своим функционалом на протяжении многих выполненных вами трансляций.

Вконтакте

× Информация! В связи с блокировкой IP адресов Amazon Роскомнадзором, на некоторых провайдерах не открывается сайт .

Ведение онлайн-трансляции компьютерной игры подразумевает вывод чата со зрителями и подписчиками. Новым поколением чата для стримеров можно считать программу Restream Chat , которая взаимодействует с такими популярными стримерскими площадками, как twitch и YouTube. На первоначальную настройку чата в этой программе придется потратить немного времени.

Restream Chat – способ установки

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

Регистрация простая, как и на всех других сайтах. После регистрации, подтвердите ее на своем почтовом ящике, так вам будут доступны все функции сайта. Теперь вы попали в меню управления своим . Тут вам доступно более 30 методов стримов, в том числе самые популярные Twitch и YouTube. Теперь нужно скачать Restream Chat на этом сайте и приступать к настройке.

Скачивание Restream Chat и предварительная настройка

Настройка чата начинается с добавления канала, на котором вы собираетесь стримить – Twitch и YouTube или другие площадки.

1. Добавляем канал и скачиваем Restream Chat. Для этого идём во вкладку «Чат».

2. Чтобы подключить чат к сервисам Twitch и YouTube, подключенные каналы к рестрим должны быть включены, переключатели в положении «On»

3. Запускаем чат. Теперь вы можете наблюдать счетчик подключённых зрителей «цифра 1» и сервисов «цифра 2», настройки «цифра 3», выбор на какой площадке (нижний блок) ответить и много других дополнительных возможностей.

Настройка программы Restream Chat на PC

Первой вкладкой в разделе настроек программы является вкладка «Accounts» , где выполняется вход в выбранную площадку. Заход в аккаунт именно в этом разделе даст возможность отвечать своим зрителям, иначе вы будете только просматривать сообщения, без возможности отвечать.

Во вкладке «Filters» указываются слова, которые будут автоматически блокироваться системой, соответственно, стример их не увидят. Нужные слова указываются в поле «Filter words», также можно указывать и словосочетания.

  1. Можно сделать так, чтобы указанные слова помечались звездочками, это галочка «Don`t delete message. Replace bad word with asterisks».
  2. Можно оставить сообщения в первоначальном виде, стримеру они не будут видны (в самой программе) – это галочка «Hide message in App Window».
  3. Скрыть сообщения на web сайте и на самом стриме галочка – «Hide message in Web UI»

Есть опции отображения личных сообщений. За это отвечает поле «Whisoer display». При указании маркера в поле «Show in App Window» они будут отображены в окне программы, во втором случае «Show in Web UI» они будут видны всем на стриме и web сайте.

Что касается поля «Permission» , то там можно выбрать площадку или определенного пользователя, сообщения которого будут показываться в окне программы или же на стриме. Это поле для определения разрешений. Например, в «Platforms» выбирается youtube а в «Permissions» выставляются галочки на «Message in app window», «Message in web UI» и Post Images, соответственно, сообщения будут показываться и в программе и на сайте (стриме), также будут показываться присланные изображения. Это нужно для того, что бы например скрыть назойливого пользователя для этого:

  1. Выбираем платформу с которой пишет пользователь в «Platforms»;
  2. Вписываем его ник в колонке «Users and groups» в поле «Username»;
  3. И скрываем его например только из окна программы снимая галочку с пункта «Message in app window», чтобы он не стал доставать вас под другим ником.

Отображение чата настраивается во вкладке «Appearance» .

  1. Для отображения чата поверх всех окон ставится флажок «Windows always on top», теперь можно будет видеть сообщения во время игры.
  2. «Enable transparency» активирует настройки прозрачности окна программы и сообщений доступных под пунктом «Opacity» и также активирует опцию «Click-through window».
  3. «Use GPU (not recommended)» устанавливается тогда, когда чат тормозит – в этом случае обрабатывать его будет видеокарта, но разработчики не рекомендуют это делать.
  4. «Show in taskbar» – отображение иконки программы в taskbare.
  5. «Show viewers counter» – показать количество зрителей.

Следующий раздел «Click-Through Mode» позволяет управлять чатом только по нажатию кнопки «Ctrl» (или любой другой клавиши которую вы зададите, запомните её иначе просто не попадёте в настройки программы), чат не будет реагировать на нажатия.

Следующее поле «Opacity» регулирует прозрачность окна и сообщений – это ползунки «Window» и «Message». Последнее поле «Font Size» регулирует размеры шрифта сообщений, никнеймов и времени.

Во вкладке «Notifications» выбирается громкость звука уведомления. Пользователь выбирает звук для уведомления на своем компьютере или из поставляемых вместе с программой в папке Документы → RestreamChat → Sounds. Если Вы выбрали свою мелодию задайте ей максимальную длительность с помощью ползунка «Idle time»

  1. Первая галочка «Notify about new message» установит уведомления на каждое сообщение,
  2. «Notify if my nickname mentioned in message» – только при упоминании ника пользователя.
  3. «Notify on keyword» – при упоминании ключевого слова.
  4. Последняя галочка в поле «Text to speech» ставится для преобразования текста в голосовую речь.

Что касается вкладки «Embed chat in stream» , то в нем есть ссылка, скопировав которую, можно будет встроить чат в отдельный сайт и на стрим. Можно в поле «Settings» выбрать:

  1. «Theme» – тему чата.
  2. «Message background opacity» – прозрачность окон сообщений.
  3. «Chat background opacity» – прозрачность заднего фона.
  4. «Scale» – масштаб сообщений.
  5. «Hide message after» – время исчезновения поступивших сообщений (0 секунд – сообщения не будут исчезать).

Под «Bot» подразумевается автоматическая реакция на запрос пользователя.

1. Первый флажок «Enable bot» включит бота.
2. Второй флажок «Enable message relay between all chats» даст возможность посылать сообщения во все чаты.
3. Флажок «Voice commands recognition» предназначен для активации бота по голосовым командам.

Настройка бота выглядит так:

  1. Нажимается кнопка «New Action».
  2. Если в первом поле «Action Type» по умолчанию будет выбрано Send Message, это означает отправку сообщения после отправки кодового слова от пользователя.
  3. Во втором поле «Description for !help» указывается описание команды (описание делается исключительно для себя, что будет означать данное действие).
  4. В «Message text» – выводимое сообщение в чат.
  5. Справа, в «Triggers and conditions» указывается частота отображения этого сообщения. Это ползунок «Repeat».
  6. В поле «Chat command» устанавливается сама команда (указывайте с символом "!", что бы избежать путаницы).
  7. В поле «Voice command» голосовое сообщение.
  8. «Trigger on keyword» указывается слово на которое тоже будет срабатывать команда (учитывайте регистр букв, так слово "привет" и "Привет" для бота 2 разных слова)

В поле «Action Type» можно указать «Send random text from the list» - сообщение будет рандомным, то есть, выбираться из указанного списка случайным образом (можно использовать для приветствия например: привет бро, привет пиплы, хаю хай бро и т.д, а если указать привет %nick% то бот ещё укажет и ник того кто здоровался). Текст также может браться из текстового файла «Send text file content». По отправке от пользователя команды или ключевого слова может открываться скрипт, ссылка или программа – «Run application/script or URL».

Вкладка «Web server (deprecated)» присутствует расширенная кастомизация чата, то есть, можно выбрать:

  1. «Message show» – эффект появления текста.
  2. «Message hide» – эффект исчезновения текста.
  3. «Message alignment» – направление появления сообщений (сверху или снизу).
  4. «Hide message after» – время исчезновения текста.
  5. «Max messages» – лимит количества сообщений.

Все изменения автоматически заносятся в динамическую ссылку, которую будет можно использовать для стрима, не забудьте отметить галочку «Enable».

Во вкладке «Export» можно выбирать способ сохранения чата.

  1. Первый флажок «Save chat in image» предназначен для сохранения в изображения.
  2. Второй флажок «Save chat in text file» предназначен для истории чата в текстовый файл.
  3. В текстовый файл также можно сохранить и количество зрителей на стриме. Это флажок «Save viewer counters to .txt files».

Вкладка «Profile» содержит одну кнопку «Logout», пригодится в том случае когда нужно сменить профиль restream.io.

Последняя вкладка «About» содержит только номер версии программы, версия программы при написании статьи 2.2.1.38 beta.

Restream Chat – простота и удобства для стримера

Этот чат очень легко и просто настраивается, как под твич, так и под ютуб. Это происходит благодаря специально созданному сайту Restream.io. Чат автоматически подключается к вашему аккаунту на любой из 30 платформ, которые доступны для проведение трансляций. Сама программа очень практичная и как видно имеет огромное количество настроек. Каждый пользователь может настроить программу лично под себя и использовать как будет ему удобно. Использовать ее можно сразу на нескольких профилях и отвечать с любой удобной площадки. Все возможности и функции чата, делают ее не заменимой для любого начинающего стримера, а также опытного.

Нужен качественный и удобный чат для стрима, Restream Chat этот будет правильным выбором.

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

После скачивания архива распаковываем его в папку, папку называем, например, названием самой программы TwoRatChat

В папке ищем файл TwoRatChat.Main, кликаем по нему 2 раза, если вы всё сделали верно запустится окно программы.

TwoRatChat

  1. Нажимаем правую кнопку мыши по окну программы выбираем пункт «Добавить источник чата:»
  2. Выбираем в пункте «Источник чата:» -> http://www.twitch.tv/
  3. В поле Ник стримера: пишем ник который вы используете на Twitch
  4. Идём в настройки ставим галочку напротив пункта «Поверх всех окон:»

Выполнив 4й пункт позволит нам отображать чат по верх игры, но помните чат отображается только если игра запущена в оконном режиме, если игра не имеет данной опции для того чтобы читать чат во время игры вам потребуется 2й монитор.

Тестируем чат, заходим на твич, идём на свой канал пишем в чат произвольное сообщение, работает.

Детальная настройка не вызовет у Вас трудностей программа на русском языке стоит упомянуть только как именно производить визуальную настройку программы:

  1. Нажимаем правую кнопку мыши по полю чата выбираем «Дизайнер скинов (альфа)…»
  2. В появившемся окне кликаем по слову «Скин»
  3. Выбиваем пункт «Новый дизайн на основе шаблона»
  4. В поле «Template:» выбираем «TwoRatChat default template» и жмём «Open and edit»
  5. Настраиваем как вам нужно там всё на русском языке

OBS Studio

Для добавления в OBS Studio можно воспользоваться 2 способами:

Способ 1-й

TwoRatChat

  1. Кликаем по полю программы правой кнопкой мыши и выбираем «Настройки».
  2. В настройках кликаем по синей кнопке рядом с пунктом «Сохранять чат как картинку».
  3. Указываем путь к файлу, например, на рабочий стол, указываем название, например, чат.

Добавляем в OBS Studio

  1. Запускаем программу
  2. Нажимаем по полю источники правой кнопкой мыши и выбираем «Добавить» -> «Изображение»
  3. В свойствах источника изображения жмём кнопку «Обзор» и выбираем наше сохранённое изображение
  4. Теперь можно разместить чат в любом месте на стриме