• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Узнать больше.
  • Гость. Приятно видеть Вас на нашем форуме!

Гайд Красивый youtube gaming чат в OBS

Нет прав для скачивания
Данный гайд понадобится тем кто занимается, или хочет заняться, стрименгом на youtube. Мы хотим вывести чатик на экран так, что бы он особо не мешался зрителям и при этом сохранился в архиве записи. Что же нам для этого понадобиться?

1. OBS Studio, либо OBS Classic + CLR Browser Source Plugin
2. Ссылка на ваш чат

Настройка.

С первым пунктом думаю ни у кого не возникнет вопросов. Просто скачиваем и устанавливаем как любую программу.

Для получения ссылки на ваш чат нам необходимо пройти в настройки трансляции в самом youtube. В открывшейся странице ищем блок чата и жмякаем на три вертикальные точки
Снимок1.PNG


далее нажимаем "Открыть чат в новом окне"
Снимок2.PNG


Из нового открывшегося окна полностью копируем ссылку.
Снимок3.PNG


далее открываем OBS и в блоке "источники" создаем новую сцену Browser Source, либо CLR Browser (для OBS Classic). Называем на свое усмотрение, например я назвал ее YTG_chat, и нажимаем ОК.

Снимок4.PNG


Откроется новое окно с настройками.
  • В поле URL вставляем ссылку которую копировали на наш чатик.
  • Width (ширина) и Height (высота) настраиваем по своему вкусу, но стоит заметить что выставив слишком маленькие значения и потом растянуть сцену по экрану, то получим размытый чатик который будет плохо читабельным.
  • Графу FPS выставляем такую же в которой вы стримете, если стримете в 30 fps, то выставляете 30, если в 60, то ставите 60.
  • CSS вставляем вот этот текст предварительно опустошив эту графу:

CSS:
body {
    background-color: rgba(0, 0, 0, 0);
    margin: 0px auto;
    overflow: hidden;
}

::-webkit-scrollbar, yt-live-chat-header-renderer, yt-live-chat-message-input-renderer, yt-live-chat-author-badge-renderer[type='moderator'] {
    display: none;
}

yt-live-chat-renderer {
    background-color: rgba(0, 0, 0, 0);
    -webkit-mask-image: -webkit-gradient(linear,left 10%,left top,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
    -webkit-mask-image: -webkit-gradient(linear,left 20%,left top,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}

yt-live-chat-text-message-renderer {
    margin: 5px;
    padding: 5px 10px;
    background: rgba(0,0,0,.25);
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(255,255,255,0.1);
    font-size: 16px;
    text-shadow: 0 0 1px #666,1px 1px 0 #000;

}

yt-live-chat-text-message-renderer[author-type="owner"] {
  background-color: rgba(255,214,0,0.46) !important;
  box-shadow: 0 0 6px rgba(255,255,255,0.1);
}

yt-live-chat-text-message-renderer[author-type="moderator"] {
  background-color: rgba(94,132,241,0.46) !important;
  box-shadow: 0 0 6px rgba(255,255,255,0.1);
}

yt-live-chat-text-message-renderer[author-type="member"] {
  background-color: rgba(15,157,88,0.45) !important;
  box-shadow: 0 0 6px rgba(255,255,255,0.1);
}

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;
}

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

#author-photo.yt-live-chat-text-message-renderer {
    margin-right: 7px;
}

#author-name.yt-live-chat-text-message-renderer {
    color: #56E8AB;
    font-weight: bold;
}

#author-name.yt-live-chat-text-message-renderer::after {
    content: ":";
}

yt-live-chat-text-message-renderer #message {
  display: block !important;
  padding-top: 2px;
}

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

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    -webkit-animation-name: FadeOut;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-duration: 15s;
      -webkit-animation-fill-mode: both;
}

/* 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-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-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 18px !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;
}
На этом наша настройка завершается. Далее вам только остается выставить это окошко в нужном для вас месте в общей сцене и наслаждаться на здоровье.

Для самых ленивых, или просто для тех кто только начал настраивать свою OBS Studio, могут скачать уже готовую от меня сцену просто её импортировав предварительно распаковав архив.

Итог.

Снимок6.PNG


Мы получили довольно красивый чатик который исчезает через некоторое время и в то же время стабильный в работе чат, нежели тот же самый RutonyChat который периодически подвисает и съедает доп ресурсы вашего пк.

P.S. Знатоки CSS могут меня в чем то поправить если я допустил какие то ошибки в коде, либо могут предложить свои варианты оформления ;)
Автор
demon-angel
Скачивания
1
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя demon-angel

↑ Наверх ↑