Вывод чата YouTube Gaming в OBS

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

С недавнего времени со стримами я перебрался на YouTube Gaming. И волновал вопрос, как выводить на экран чат так, чтобы он не мешал зрителям и сохранялся в архиве записи. На Twitch я пользовался этим способом, поэтому было несколько требований: простой, читаемый текст и автоматическое пропадание с экрана. Приятно, когда люди все сделали за тебя, но, в случае молодого сервиса, на разнообразие стороннего инструментария надеяться не приходится. Поэтому, пилим сами. Возможно, данный способ перестанет работать через некоторое время, так как Google все еще вносит постоянные правки в дизайн сервиса, но поживем - увидим.


Отправной точкой послужила эта тема на Reddit, прочитайте ее, прежде чем двигаться дальше. Конкретно, за основу я взял CSS из этого сообщения, и немного подпилил для себя.

Вам нужно:

1. OBS
2. CLR Browser Source Plugin
3. Ссылка на ваш чат YouTube Gaming

Получить ссылку можно очень просто:

Обратите внимание, что из полученной ссылки необходимо убрать переменную "dark_theme=1", иначе прозрачность не будет работать.

Теперь в сцену OBS надо добавить CLR Browser, подогнать размеры под себя, и исправить CSS. У меня окно настроек выглядит так:

В результате после получаса экспериментов получился вот такой CSS, над которым еще можно поработать (как мне так и вам), но отправную точку он дает хорошую:

---

 ::-webkit-scrollbar {
  display: none;
}

body {
    background-color: rgba(0,0,0,0);
    margin: 0 auto;
    overflow: hidden;
    color: #fff !important;
    width: 100%;
}

.live-chat-page {
    background: rgba(0,0,0,0);
}

.live-chat-widget #comments-scroller {
    border: none;
    -webkit-mask-image: -webkit-gradient(linear, left 20%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

#live-comments-controls {
    display: none;
}

@-webkit-keyframes FadeOut {
  0%, 100% {
    opacity: 0;
  }
  5%, 95% {
    opacity: 1;
  }
}

.live-chat-widget .comment {
  width: 90%;
  background: rgba(0,0,0,0.3) !important;
  margin-bottom: 1px;
  -webkit-animation-name: FadeOut;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 60s;
  -webkit-animation-fill-mode: both;
}

.live-chat-widget .accent-bar {
  display: none;
}

.live-chat-widget .comment .author a {
  font-size: 18px;
  color: #56E8AB !important;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.live-chat-widget .comment-text {
  font-size: 18px;
  color: #fff;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

---

И выглядит это безобразие так, со значением пропадания текста с экрана через 10 секунд (в CSS выше указано 60 секунд):

На этом все. Пишите свои вопросы в комментариях, постараюсь ответить. Удачного стриминга на YouTube Gaming! :)