css чат для стрима

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53801d28fd5d644f • Your IP : 78.85.5.224 • Performance & security by Cloudflare

Множество стримов на Ютуб трудно представить без чата, где пользователи делятся своими мыслями, обмениваются мнениями, высказывают пожелания и критику. При этом организация такого чата может стать существенной проблемой, так как многие из стримеров не в достаточной мере знакомы с соответствующим интерфейсом YouTube (а также интерфейсом релевантной программы для создания стримов «Open Broadcasting Software»). Для того чтобы научиться стримить на Ютубе перейдите на соответствующую статью. А в этом материале я постараюсь помочь пользователям, и подробно расскажу, как организовать чат для стрима на Ютуб, и какие инструменты нам в этом помогут.

Создаём чат для стрима на Ютуб

Что необходимо для создания чата для стрима на Ютубе

Организации чата в стриме на своём канале Ютуб подразумевает, что вы уже имеете настроенный ранее стрим в вашем аккаунте, а также установленную на ПК программу «OBS», которая сопряжена с вашим аккаунтом на Youtube.

Организация чата на Ютуб проходит следующим образом:

  • Активация чата в вашем канале на Ютуб и получение соответствующей ссылки на чат;
  • Добавление в «OBS» источника «BrowseSource», в настройки которого вводится полученная нами ссылка;
  • Переход на внешний ресурс chatv2.septapus.com, где расположен « Chat v2.0 Style Generator », благодаря которому производится настройка чата и копирование данных CSS;
  • Вставка указанных данных СSS в соответствующее окно программы «OBS» (внешний вид чата изменяется нужным нам образом).

При этом замечу, что данный способ более актуален нежели другие аналоги, так как для многих внешних чатов, которые необходимо скачать и установить на ПК, необходим источник в «OBS», называемый «CLR-browser», который в последних версиях OBS отсутствует, будучи заменён на «BrowseSource».

Используем возможности «OBS» и «Youtube» для создания чата

Как создать чат для стрима на YouTube

Итак, чтобы сформировать чат для стрима, рекомендую выполнить следующее:

  • Перейдите на Ютуб, кликните на аватарку вашего канала, выберите «Творческая студия»;
  • Выберите раздел «Прямые трансляции» справа;
  • Справа внизу экрана найдите надпись «Чат», и справа от неё кнопку с изображением трёх точек. Нажмите на данную кнопку, выберите «Открыть чат в новом окне»;

Нажмите на кнопку с тремя точками, а затем выберите опцию «Открыть чат в новом окне»

Откроется окно, сверху которого будет размещена ссылка. Скопируйте её.

Скопируйте полученную вами ссылку из окна «Чат»

Теперь перейдите в программу «OBS», и в главном окне создайте новый источник, нажав на плюсик, выбрав «BrowseSource».

Выберите «BrowserSource» в источниках «OBS»

Откроется окно создания нового источника, назовите его «Чат» и нажмите на «Ок», откроется окно настроек источника. В графу «URL» вставьте ранее полученную на Ютуб ссылку, и нажмите на «Ок».

Вставьте ранее полученную на Ютуб ссылку в строку «URL»

В окне появится окно чата, но оно будет довольно грубоватого внешнего вида, да ещё с белым фоном, асинхронным с чёрным фоном самого экрана. Как же изменить ситуацию? Обратимся к возможностям сайта chatv2.septapus.com.

Как скачать чат для стрима

Возможности сайта chatv2.septapus.com позволяют произвести гибкую настройку вашего чата на Ютуб, а также визуально проверить, как данный чат будет выглядеть на вашем канале. После произведения всех настроек чата (как их сделать я опишу в следующем разделе), необходимо будет перейти в самый низ страницы данного сайта, и скопировать код, располагающийся в поле под названием «CSS».

Скопируйте всё содержимое окна CSS

Затем необходимо будет перейти в «OBS», навести курсор на созданный нами ранее источник под названием «чат», нажать правую клавишу мыши, и выбрать «Свойства». В открывшемся окне необходимо будет найти поле «CSS», удалить его имеющееся содержимое, а затем вставить туда код CSS, который мы ранее скопировали на сайте chatv2.septapus.com.

Вставьте в окно «CSS» скопированный вами CSS-код с сайта chatv2.septapus.com

Настройка чата для стрима

Как я уже писал выше, возможности сайта chatv2.septapus.com позволяют произвести достаточно гибкую настройку окна чата и его содержимого. При этом вы будете наглядно видеть все производимые вами изменения.

В частности, настройки чата делятся на «Fonts» (шрифты), «Avatars» (аватары), «Channel names» (имена каналов), Messages (сообщения), «Timestamps» (отметки о времени отправки сообщений), «Backgrounds» (задний фон), SuperChat/ Fan Funding /Sponsors (Суперчат/Пожертвования, Спонсоры), Animation (Анимация), и, собственно, CSS (язык описания внешнего вида нашего чата).

Соответственно, вы можете менять размеры букв (size), выбирать различные шрифты (fonts) для отображения текста, цвета данных шрифтов и так далее.

После выбора необходимых настроек не забудьте скопировать код CSS, и перенести его в программу «OBS», как я уже упоминал выше.

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

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

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

далее нажимаем «Открыть чат в новом окне»

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

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

Откроется новое окно с настройками.

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

На этом наша настройка завершается. Далее вам только остается выставить это окошко в нужном для вас месте в общей сцене и наслаждаться на здоровье.

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

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

P.S. Знатоки CSS могут меня в чем то поправить если я допустил какие то ошибки в коде, либо могут предложить свои варианты оформления

Оцените статью