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

Описания роликов со второго канала, который никак не связан с созданием видео и After Effects
Аватара пользователя

Автор темы
aeplug
Санта
Санта
Сообщения: 2802
Зарегистрирован: 18 мар 2016, 23:20
Откуда: С Ютуба
Благодарил (а): 18 раз
Поблагодарили: 274 раза
Контактная информация:

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


Теги:

Сообщение #1 aeplug » 18 мар 2017, 19:37

Искал способ сделать чат с 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
Чат на стриме пример.jpg (46.04 КБ) 250140 просмотров
Чат на стриме пример.jpg
Чат на стриме пример.jpg (46.04 КБ) 250140 просмотров

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

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

И радуемся нормально выглядящему чату!
Ну и еще мне понравился программа 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
SheepChat на стриме.jpg (50.47 КБ) 250140 просмотров
SheepChat на стриме.jpg
SheepChat на стриме.jpg (50.47 КБ) 250140 просмотров

В общем, мне пока хватает этих двух способов, надеюсь и вам пригодится. Мой стиль CSS для ютуба, который я использую, вы можете скопировать чуть ниже. А если у вас есть еще какие-нибудь интересные методы, не поленитесь и поделитесь со мной в комментариях. Удачных стримов!
V :enjoying_mah_playlist: 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;
}


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



Видео уроки для After Effects http://www.youtube.com/AEPlug
Платные консультации по работе в программах

Теги:



foxss
Нуб
Нуб
Сообщения: 1
Зарегистрирован: 06 июл 2020, 22:26
Поблагодарили: 1 раз

Сообщение #2 foxss » 06 июл 2020, 22:34

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


Вернуться в «LIVE канал»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей