Как сделать красивый чат YouTube на стриме в OBS Studio. Без левых программ и плагинов

[aeplug]

Искал способ сделать чат с YouTube видимым на стриме, и чтоб он выглядел более менее прилично, а не как кусок белого окна. Нашел кучу старых и неработающих методов. Пришлось придумать новый )
1. Через прямую ссылку на чат YouTube, подключенную в браузер OBS Studio, со специальным стилем, который делает чат красивым! И даже анимация кое-какая присутствует. Не нужно никаких дополнительных программ и плагинов. Все уже есть в OBS.
2. С использованием программы sheepChat, но она должна быть постоянно запущена во время стрима, зато может отображать сообщение не только в стриме для зрителей, но и для стримера поверх остальных окон в игровом режиме. А еще в программе есть несколько интересных тем оформления.
https://www.youtube.com/watch?v=flG4UZfdsS0
Еще одно полезное видео на тему чата для стрима:
Выводим чат YouTube крупным шрифтом для удобного чтения на втором мониторе
https://www.youtube.com/watch?v=uYucGI_FD4E

Краткое содержание

Захотелось мне сделать чат YouTube видимым на стриме, как это делают игроки-стримеры, а не держать его в виде большого белого окна, которое и некрасиво и места занимает достаточно много. Шрифт и размер у него настроить нельзя, кастомизации вообще никакой нет. А мне хотелось видеть каждое сообщение хотя бы на отдельной, полупрозрачной подложке.

Чат на стриме пример.jpg (46.04 КБ) 268796 просмотров

Чат на стриме пример.jpg (46.04 КБ) 268796 просмотров

В итоге я нашел один интересные сервис Chat v2.0 Style Generator, который позволяет создавать собственный CSS стиль для чата, и затем форматировать им страницу по ссылке (в моем случае ссылка ведет прямо на чат). Помимо задания собственных шрифтов и размеров, можно менять цвета и внешний формат строки сообщения. Даже можно добавить простую анимацию появления и исчезновения сообщений! Кстати, в моем стиле цвет подложки зависит и от статуса автора сообщения: у хозяина канала он будет красного оттенка, у модератора - синего, обычный же гость имеет стандартный черный цвет. Почувствуй себя местным царьком
Важным плюсом для меня стали и то, что не нужно запускать никаких дополнительных программ. Все уже есть в OBS, но нужно иметь плагин BrowserSource для работы с ссылками на стриме. Хотя без него стримами заниматься вообще не стоит! Через него выводятся донаты, оповещения, чаты и прочие интерактивные для зрителя вещи. Раньше он ставился отдельно, но сейчас, кажется, идет по умолчанию в составе установки программы OBS Studio.

Открыть чат в новом окне.jpg (25.97 КБ) 268796 просмотров

Открыть чат в новом окне.jpg (25.97 КБ) 268796 просмотров

И так, мы получили ссылку на чат с трансляции YouTube через команду "Открыть чат в новом окне", скопировали стиль CSS с сайта-генератора (или можете попробовать мой, он находится ниже), вставляем все это в свойства BrowserSource:

Настройки источника.jpg (26.91 КБ) 268796 просмотров

Настройки источника.jpg (26.91 КБ) 268796 просмотров

И радуемся нормально выглядящему чату!
Ну и еще мне понравился программа sheepChat (которая на данный момент находится еще в разработке, у меня была версия 0.9.4 RC) для вывода сообщений чата прямо на монитор стримера в игровом режиме с красивыми стилями оформления. Естественно, программа должна быть постоянно запущены для нормальной работы такого чата. У нее имеется собственный HTTP сервер, к которому можно подключиться из браузера OBS для трансляции чата поверх стрима, вместо вывода его на экран поверх окон других программ. Выбирайте любой режим по душе!
Правда у меня возникла небольшая проблема при подключении по ссылке, которую предлагает сама программа

Код: Выделить всё

http://widget.sheep.chat/chat.html#49135

OBS постоянно писала какую-то информация на диск, создавая излишнюю и абсолютно ненужную нагрузку на компьютер. Но мне удалось избежать этого, заменив вид ссылки на обычный локальный:

Код: Выделить всё

http://127.0.0.1:49135/game#csgo

SheepChat на стриме.jpg (50.47 КБ) 268796 просмотров

SheepChat на стриме.jpg (50.47 КБ) 268796 просмотров

В общем, мне пока хватает этих двух способов, надеюсь и вам пригодится. Мой стиль CSS для ютуба, который я использую, вы можете скопировать чуть ниже. А если у вас есть еще какие-нибудь интересные методы, не поленитесь и поделитесь со мной в комментариях. Удачных стримов!
V V

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

Код: Выделить всё

@import url("https://fonts.googleapis.com/css?family=Ubuntu Condensed");
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
@import url("https://fonts.googleapis.com/css?family=Imprima");

/* Background colors*/
body {
  background-color: rgba(0,0,0,0);
  overflow: hidden;
}
yt-live-chat-text-message-renderer {
  background-color: rgba(0,0,0,0.7) !important;
}

yt-live-chat-text-message-renderer[author-type="owner"] {
  background-color: rgba(100,0,0,0.7) !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"] {
  background-color: rgba(0,0,100,0.7) !important;
}

/* Transparent background. */
yt-live-chat-renderer {
  background-color: transparent !important;
}

/* Outlines */
yt-live-chat-renderer * {
  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
  font-family: "Ubuntu";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
  overflow: initial; !important
}

/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
  overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
  overflow: hidden !important;
}

/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-message-input-renderer {
  display: none !important;
}

/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    padding-left: 4px !important;
  padding-right: 4px !important;
  margin: 4px 0 !important;
}

yt-live-chat-paid-message-renderer #header {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
 
  width: 32px !important;
  height: 32px !important;
  border-radius: 32px !important;
  margin-right: 8px !important;
}

/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
 
  vertical-align: text-top !important;
}

/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
 
  color: #999999 !important;
  font-family: "Imprima";
  font-size: 16px !important;
  line-height: 16px !important;
}

/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  color: #ffd600 !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  color: #5e84f1 !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  color: #0f9d58 !important;
}

/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
  color: #cccccc !important;
  font-family: "Ubuntu Condensed";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #author-name::after {
  content: ":";
  margin-left: 2px;
}

/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: #ffffff !important;
  font-family: "Ubuntu";
  font-size: 20px !important;
  line-height: 20px !important;
}


/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
  color: #ffffff !important;
  font-family: "Ubuntu";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
  color: #ffffff !important;
  font-family: "Ubuntu";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
  color: #ffffff !important;
  font-family: "Ubuntu";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-paid-message-renderer {
  margin: 4px 0 !important;
}

yt-live-chat-legacy-paid-message-renderer {
  background-color: #0f9d58 !important;
  margin: 4px 0 !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
  text-decoration: none !important;
}

yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
  display: none !important;
}

yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
  display: none !important;
}


yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
  color: #ffffff !important;
  font-family: "Ubuntu";
}

@keyframes anim {
0% { opacity: 0; }
100% { opacity: 1; transform: none;}
}

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  animation: anim 200ms;
  animation-fill-mode: both;
}

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  animation: anim 30400ms;
  animation-fill-mode: both;
}

@keyframes anim {
0% { opacity: 0; }
0.6578947368421052% { opacity: 1; transform: none;}
99.3421052631579% { opacity: 1; transform: none;}
100% { opacity: 0; }
}

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  animation: anim 30400ms;
  animation-fill-mode: both;
}

yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip {
  background-color: transparent !important;
}

Старый CSS из урока

Код: Выделить всё

@import url("https://fonts.googleapis.com/css?family=Ubuntu Condensed");
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
@import url("https://fonts.googleapis.com/css?family=Imprima");

/* Background colors*/
body {
  background-color: rgba(0,0,0,0);
}
yt-live-chat-text-message-renderer {
  background-color: rgba(0,0,0,0.7) !important;
}

yt-live-chat-text-message-renderer[author-type="owner"] {
  background-color: rgba(100,0,0,0.7) !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"] {
  background-color: rgba(0,0,100,0.7) !important;
}

/* Transparent background. */
yt-live-chat-renderer {
  background-color: transparent !important;
}

/* Outlines */
yt-live-chat-renderer * {
  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
  font-family: "Ubuntu";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
  overflow: initial; !important
}

/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
  overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
  overflow: hidden !important;
}

/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
  display: none !important;
}

/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    padding-left: 4px !important;
  padding-right: 4px !important;
  margin: 4px 0 !important;
}

yt-live-chat-paid-message-renderer #header {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
 
  width: 32px !important;
  height: 32px !important;
  border-radius: 32px !important;
  margin-right: 8px !important;
}

/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
 
  vertical-align: text-top !important;
}

/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
 
  color: #999999 !important;
  font-family: "Imprima";
  font-size: 16px !important;
  line-height: 16px !important;
}

/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  color: #ffd600 !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  color: #5e84f1 !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  color: #0f9d58 !important;
}

/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
  color: #cccccc !important;
  font-family: "Ubuntu Condensed";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #author-name::after {
  content: ":";
  margin-left: 2px;
}

/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: #ffffff !important;
  font-family: "Ubuntu";
  font-size: 20px !important;
  line-height: 20px !important;
}


/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
  color: #ffffff !important;
  font-family: "Ubuntu";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
  color: #ffffff !important;
  font-family: "Ubuntu";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
  color: #ffffff !important;
  font-family: "Ubuntu";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-paid-message-renderer {
  margin: 4px 0 !important;
}

yt-live-chat-legacy-paid-message-renderer {
  background-color: #0f9d58 !important;
  margin: 4px 0 !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
  text-decoration: none !important;
}

yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
  display: none !important;
}

yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
  display: none !important;
}


yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
  color: #ffffff !important;
  font-family: "Ubuntu";
}

@keyframes anim {
0% { opacity: 0; }
100% { opacity: 1; transform: none;}
}

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  animation: anim 200ms;
  animation-fill-mode: both;
}

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  animation: anim 30400ms;
  animation-fill-mode: both;
}

@keyframes anim {
0% { opacity: 0; }
0.6578947368421052% { opacity: 1; transform: none;}
99.3421052631579% { opacity: 1; transform: none;}
100% { opacity: 0; }
}

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  animation: anim 30400ms;
  animation-fill-mode: both;
}


---

. .
Полезные ссылки:

• Плейлист YouTube: Создание и настройка стримов, OBS Studio
  https://www.youtube.com/playlist?list=P ... tP9IXwxm9T
• Красивый таймер и счетчик для стрима в OBS Studio
  https://www.youtube.com/watch?v=iHH77vRWFaE
• Open Broadcaster Software - OBS Studio
  https://obsproject.com/
• Chat v2.0 Style Generator
  https://chatv2.septapus.com/
• sheepChat - МУЛЬТИЧАТ ДЛЯ СТРИМЕРОВ
  https://sheep.chat/

[foxss]

В общем я тут наткнулся на Chat v2.0 Style Generator только на русском языке, с русскими шрифтами и окном предпросмотра которое всегда на виду, независимо от прокрутки
http://free12342.narod.ru/youtube-chat.html