Как настроить чат для трансляции

Как добавить чат на экран во время трансляции на youtube

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

Для начала небольшое техническое отступление… в качестве примера будет рассмотрена настройка отображения чата во время трансляции через программу OBS Studio. Программу можно бесплатно скачать с сайта разработчика Open Broadcaster Software / obsproject.com. Настройка XSplit Broadcaster осуществляется по аналогии. Если используете другие аналоги, то убедитесь в возможности добавить отображения окна браузера в сцене (Nvidia ShadowPlay и Action! пока не имеют таких функций).

Итак приступим, перед началом стрима или трансляции в используемую сцену необходимо добавить элемент BrowserSource (CLR Browser). В списке сцен слева необходимо выбрать нужную сцену. В окне «Источники» добавляем новый и выбираем из списка «BrowserSource». Добавить источник можно кликнув мышью на кнопку с символом «плюс» (1) или нажать правой кнопкой мыши и выбрать нужный источник. В появившемся диалоговом окне будет предложено «создать новый» или «добавить существующий», выбрав из предложенного списка.

При создании нового источника или редактировании существующего открывается окно изменения свойств элемента BrowserSource. Здесь необходимо указать ссылку на источник URL (3), ширину и высоту области отображения (4), дополнительный CSS стиль (5) а также отметить две галочки (6) «отключать если источник невидим» и «обновлять браузер при переключении сцены». Значение в поле FPS по умолчанию равно 30, но для меньшей нагрузки на программу это значение можно установить в промежутке от 5 до 15.

Теперь разберем немного подробней. В качестве ссылки на источник URL (3) необходимо использовать ссылку окна, открывающего при нажатии «открыть чат в новом окне» (скопировать адрес в открывшемся окне).

Для удобства использования в качестве ссылки источника можно использовать следующую строку https://www.youtube.com/live_chat?is_popout=1&v=ИДЕНТИФИКАТОР предварительно заменив слово ИДЕНТИФИКАТОР на уникальный идентификатор (ID) трансляции. Скопировать ID можно либо из адресной строки браузера после того, как открыли страницу с трансляцией или в блоке «поделиться» ниже окна с видео. В рассматриваем примере идентификатор трансляции будет выглядеть следующим образом UQpTQBrSg-4. Необходимо отметить, что у вашей трансляции этот идентификатор будет другой. Для каждой новой трансляции необходимо указывать новый идентификатор. Также, обращаю ваше внимание, что это не ключ трансляции, который вы используете в настройках OBS.

Дополнительный стиль CSS можно найти в конце статьи или из текстового файла по ссылке www.otrip.ru/uploads/2017/05/css.txt

После завершения редактирования BrowserSource он появится в окне предварительного просмотра и в списке источников текущей сцены. Далее можно изменить позицию элемента на экране, где он будет отображаться во время трансляции. Для этого элемент можно перетащить мышкой по экрану предварительного просмотра (7) или задать значения вручную используя фильтры и дополнительные настройки (8). Для вызова дополнительных настроек необходимо нажать правой кнопкой мыши на название элемента в сцене.

Дополнительный CSS стиль (5)

::-webkit-scrollbar,
.yt-live-chat-renderer-0 yt-live-chat-header-renderer.yt-live-chat-renderer,
.yt-live-chat-message-input-renderer-0,
.yt-live-chat-header-renderer-0,
#live-comments-controls,
.live-chat-widget .accent-bar,
.yt-live-chat-mode-change-message-renderer,
#action-panel
<
display: none;
>

body
<
background-color: rgba(0,0,0,0);
margin: 0 auto;
overflow: hidden !important;
color: #fff !important;
width: 100%;
font-family: Roboto,arial,sans-serif,Verdana;
>

#item-scroller <
overflow: hidden !important;
>

@-webkit-keyframes FadeOut
<
0%, 100% <
opacity: 0;
>
0%, 95% <
opacity: 1;
>
>

.yt-live-chat-message-renderer-0
<
background: none;
>

#contents.yt-live-chat-app > .yt-live-chat-app,
.live-chat-widget #comments-scroller
<
border: none;
-webkit-mask-image: -webkit-gradient(linear, left 10%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
>

.yt-live-chat-text-message-renderer-0 #author-name.yt-live-chat-text-message-renderer,
.live-chat-widget .comment .author a
<
font-size: 12pt;
color: #c6b281 !important;
text-shadow: -1px 0 #333, 0 1px #333, 1px 0 #333, 0 -1px #333;
>

.yt-live-chat-text-message-renderer-0 #author-name.yt-live-chat-text-message-renderer::after,
.live-chat-widget .comment .author a::after
<
content: ‘\A’;
white-space: pre;
>

.yt-live-chat-text-message-renderer-0 #message.yt-live-chat-text-message-renderer,
.live-chat-widget .comment-text
<
font-size: 12pt;
color: #eaeaea;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
>

.yt-live-chat-text-message-renderer-0,
.live-chat-page
<
background: rgba(0,0,0,0);
>

.yt-live-chat-message-renderer-0
<
display: none;
>

.yt-live-chat-text-message-renderer-0,
.live-chat-widget .comment
<
width: 100%;
background: rgba(0,0,0,0.5) !important;
margin-bottom: 1px;
-webkit-animation-name: FadeOut;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 90s;
-webkit-animation-fill-mode: both;
>

.yt-live-chat-text-message-renderer-0
<
background: rgba(0,0,0,0.5) !important;
padding: 5px;
>

.yt-live-chat-text-message-renderer-0 #author-photo.yt-live-chat-text-message-renderer
<
margin-right: 7px;
>

#content
<
margin-right: 10px;
>

.yt-live-chat-moderation-message-renderer-0
<
background: rgba(50,0,0,0.5) !important;
>

Источник

Как добавить чат на стрим Twitch через OBS бесплатно

У многих стримеров на площадке Twitch можно заметить чат прямо поверх их трансляции. Это упрощает просмотр стрима в полноэкранном режиме, ведь ты видишь сразу чат поверх картинки. И любой начинающий стример задаётся вопросом: «А как же сделать так, как у них?». Сейчас мы рассмотрим несколько простых и бесплатных вариантов, как добавить чат на стрим.

NightDev — KapChat

Один из самых простых вариантов — зайти на сайт NightDev.com/KapChat и там настроить свой чат.

Перейдя по ссылке, Вам нужно нажать на кнопку Get It и откроется окно настроек:

• Channel Здесь Вам потребуется ввести имя своего Twitch канала.
• Fade Если отметите этот чекбокс, то сможете выбрать через сколько секунд будут пропадать отображаемые сообщения.
• Show Bots Поставив галочку в этой графе, Вы скроете сообщения от ботов. Они останутся в чате Твича, но не будут отображаться на экране
• Prevent Clipping Предотвращает обрезание строк чата в длинных сообщениях.
• Chat Theme Можно выбрать одну из шести тем для Вашего чата: Light, Dark, BetterTTV Light, BetterTTV Dark, S0N0S 1080p, S0N0S 1440p.

Также Вы можете выбрать тему None, если владеете знаниями СSS, и настроить чат вручную.

После выбора темы нажимаете на Generate и получаете ссылку для встраивания чата в OBS.

Как добавить чат в OBS:

1. Копируете ссылку и открываете программу. Кстати, Вы можете прочесть про настройку OBS в нашей другой статье.
2. На нужной Вам сцене добавляете новый источник «Браузер .
   
3. В появившемся окне Вы вписываете название для источника, а далее вставляете ссылку с сайта в графу Адрес URL.
4. Также там можно изменить ширину и высоту отображаемого чата, настроить FPS для него, отключать ли чат, когда сцена неактивна, обновлять ли чат, когда Вы переходите на эту сцену.
   

Вот и всё! Ваш чат с помощью сайта NightDev готов.

Streamlabs Chat Box

Ещё один хороший бесплатный способ создать чат на своём стриме — использовать сайт streamlabs.com . Для упрощения ситуации можно даже скачать их софт под названием Streamlabs OBS, но сработает и с обычным OBS.

Зайдя на сайт, Вам нужно будет авторизоваться через аккаунт Twitch и перейти в All Widgets , выбрать Chat Box . Там Вам нужны такие настройки:

• Theme Тем тут пять: Сlean, Boxed, Twitch, Oldschool, Chunky . Выбирая тему, сверху можно увидеть, как будет выглядеть чат с той или иной настройкой.
• Badges Переключение отображения значков модераторов, подписчиков, владельцев турбо, Twitch-prime подписчиков.
• Text Color Собственно это цвет нашего текста.
• Font Size Размер шрифта сообщений.
• Hide Message After Переключение отоб ражения чата: показывать сообщения всегда или в течение определенного времени.
• Hide Chatters Выбираете, будут ли скрыты боты с чата и команды, начинающиеся с « ! »

Далее Streamlabs предоставляет возможность настроить фильтр плохих слов и внести никнеймы людей, от которых не будут отображаться сообщения.

Через Streamlabs Вы точно также можете настроить всё вручную через код.

Когда всё будет настроено, нажимаете Save Settings и поднимаетесь вверх страницы. Там Вы увидите ссылку чата. Теперь осталось провернуть ту же схему, что и с NightDev:

1. Копируем ссылку.
2. Открываем OBS.
3. Добавляем на сцену новый источник «Браузер» .
4. Даем название и вставляем скопированную ссылку.

И в заключение хочу сказать, что преимуществом Streamlabs является то, что купив на сайте Prime, Вам откроется доступ к уже настроенным виджетам чата и не только. Так вы сможете кастомизировать свой стрим с наименьшей тратой времени. И в целом настройка чата выглядит приятнее, нежели через NightDev.

Однако NightDev Kapchat позволяет вам создать чат на стрим всего в пару кликов. Поэтому нужно проанализировать, что Вам нужно и под потребности выбрать способ вывода чата.

Новости и сливы 18+ стримеров твича по ссылке

Источник

Чат для стрима на Ютуб

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

Что необходимо для создания чата для стрима на Ютубе

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

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

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

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

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

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

• Перейдите на Ютуб, кликните на аватарку вашего канала, выберите «Творческая студия»;
• Выберите раздел «Прямые трансляции» справа;
• Справа внизу экрана найдите надпись «Чат», и справа от неё кнопку с изображением трёх точек. Нажмите на данную кнопку, выберите «Открыть чат в новом окне»;

Выберите опцию «Открыть чат в новом окне»

Откроется окно, сверху которого будет размещена ссылка. Скопируйте её.

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

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

Вставьте ранее полученную на Ютуб ссылку в строку «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», как я уже упоминал выше.

Источник