Текущие версии программ: After Effects CC 2017 v14.2.1  Premiere Pro CC 2017 v11.1.2

не стесняйтесь создавать новые темы для новых вопросов

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

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
Описания роликов со второго канала, который никак не связан с созданием видео и After Effects
Canonical Link
Аватара пользователя

Автор темы
aeplug
Санта
Санта
Сообщения: 1319
Зарегистрирован: 18 мар 2016 23:20
Откуда: С Ютуба
Благодарил (а): 3 раза
Поблагодарили: 150 раз

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


Теги:

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

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

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


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

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

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

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

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

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

@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
Платные консультации по работе в программах

Теги:


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

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

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