04.06.2017

Добавляем чат в трансляцию Youtube программы OBS

  Впринципе этот вариант чатика Вы видете, только в самой трансляции (и он остается в записи сервера), но не в игре, попозже рассмотрим, как играть и просматривать чатик не имея второго монитора, наверно как у многих начинающих стримеров. Итак начнем...
     Первым делом запускаем нашу програмку OBS, сворачиваем её.
Открываем свой канал Youtube в браузере, переходим по ссылке менеджер видео (при написании этой стать она находилась вверху, над шапкой канала)

     Далее переходим в раздел прямые трансляции (на данный момент ссылка расположена слева)
     Справа в окне видим сам чатик, кликаем не по шестеренке настроек а по точкам, и выбираем строчку открыть чат в новом окне.
В новом окне открывшегося чата копируем адресную строку (как угодно и удобней, хоть комбинацией клавиш, у меня скрин просто как пример, главно понять смысл)
     Окошко пока не закрываем оно нам пригодится в будущем, можно просто свернуть, чтоб не мешало. Разворачиваем програмку OBS. В окне источники кликаем плюсик (добавляем источник, либо своим способом если проще)
Выбираем верхнюю строчку BrwserSource
В новом появившемся окошке вводим название какое хотим (я так и обозвал чат Ютуба, чтоб не путать с другими источниками, их будет скорее всего много)
Кстати нижняя строчка с выделенной галочкой (Сделать источник видимым) должна быть отмечена по умолчанию, если нет то добавляем и жмем OK.
     В появившемся окошке выделяем верхнюю строчку (так как по умолчанию там стоит не нужный нам URL) вставляем скопированный нами адрес нашего чата (если он пропал из буфера, как у меня, то копирум заного урл чатика и вставляем) Примерно так то должно выглядеть, пока ничего другого не трогаем жмем OK.
     Вот такое примерно должно получится в самом OBS(не обращаем внимания на бегущую строку, я ее забыл убрать, а щас долго перескринить):
 Теперь кликаем по строчке чат Ютуба в источниках, в открывшемся окне переходим на строчку 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;
}
копируем полностью и вставляем в CSS
Вот так это примерно выглядит (пока изменений не видим)
жмем ОК...
   Вглавном окне программы видим пару сек мигающий наш чат и окно вроде пропадает, не пугаемся проверяем располагаем окошко чатика, чтобы оно не совпадало с программой для проверки...
Если надо увеличиваем картинку, чтоб рассмотреть что получилось на примере (кстати он действует с задержкой сек 5-10 точно, а может больше или меньше, в зависимости от работоспособности вашей системы и провайдера) Настраиваем нужную величину и перемещаем куда надо чтоб не закрывать основной фон игры...
Теперь рассмотрим как расположить игру и чат, имея в нналичии только один монитор, у меня он крупненьки, поэтому приглядываться не приходится.
     Заходим в игру и в настройках переводим её в оконный режим и чуть сжимаем под  полноэкранное отображение в обс и подгоняем под окошко чата, его кстати тоже сжимаем как надо вот так это примерно выглядит на рабочем столе
     А вот так в OBS (тоесть, как полный экран)
    Удачи при тансляции, кстати не забываем поглядывать саму трансляцию в браузере, мало ли какие еще косяки всплывут.....