Как сделать окно чата

Обновлено: 28.03.2024

Делаем красивый чат на стриме в OBS

Как красиво вывести чат из Ютуба на стрим в OBS? Сегодня я постараюсь вам рассказать, как это сделать максимально просто.

Шаг 1. Создаем обычный виджет чата: источники - браузер

Далее должна открыться такая панель:

Все, что нам нужно сделать - это изменить Адрес URL и СSS стили.

Шаг 2. Копируем адрес чата.

После того, как вы нажали в Ютубе "Начать трансляцию" у вас открылась панель управления трансляцией. Справа вы видите чат. Нужно нажать на три точечки и выбрать открыть чат в новой вкладке.

После того как чат открылся, копируем ссылку сверху и вставляем ее в OBS вместо URL адреса.

Шаг 3. Копируем CSS.

Если вы не поменяете строку CSS, то в OBS он так и будет выглядеть. Скопируйте все стили ОТСЮДА и вставьте в строку CSS.

Как добавить чат на стрим Twitch через OBS бесплатно

Как добавить чат на стрим через OBS

У многих стримеров на площадке Twitch можно заметить чат прямо поверх их трансляции. Это упрощает просмотр стрима в полноэкранном режиме, ведь ты видишь сразу чат поверх картинки. И любой начинающий стример задаётся вопросом: «А как же сделать так, как у них?». Сейчас мы рассмотрим несколько простых и бесплатных вариантов, как добавить чат на стрим.


Перейдя по ссылке, Вам нужно нажать на кнопку Get It и откроется окно настроек:

Как вывести чат на стрим Twitch через OBS

Также Вы можете выбрать тему None, если владеете знаниями СSS, и настроить чат вручную.

Чат для Twitch тема
Чат для Twitch тема
Чат для Twitch тема

После выбора темы нажимаете на Generate и получаете ссылку для встраивания чата в OBS.

Чат для Twitch
Как добавить чат в OBS:

  1. Копируете ссылку и открываете программу. Кстати, Вы можете прочесть про настройку OBS в нашей другой статье.
  2. На нужной Вам сцене добавляете новый источник «Браузер .
  3. В появившемся окне Вы вписываете название для источника, а далее вставляете ссылку с сайта в графу Адрес URL.
  4. Также там можно изменить ширину и высоту отображаемого чата, настроить FPS для него, отключать ли чат, когда сцена неактивна, обновлять ли чат, когда Вы переходите на эту сцену.

Вот и всё! Ваш чат с помощью сайта NightDev готов.

Streamlabs Chat Box


Зайдя на сайт, Вам нужно будет авторизоваться через аккаунт Twitch и перейти в All Widgets , выбрать Chat Box . Там Вам нужны такие настройки:

Добавить чат Twitch в OBS

Через Streamlabs Вы точно также можете настроить всё вручную через код.

Когда всё будет настроено, нажимаете Save Settings и поднимаетесь вверх страницы. Там Вы увидите ссылку чата. Теперь осталось провернуть ту же схему, что и с NightDev:

  1. Копируем ссылку.
  2. Открываем OBS.
  3. Добавляем на сцену новый источник «Браузер» .
  4. Даем название и вставляем скопированную ссылку.

И в заключение хочу сказать, что преимуществом Streamlabs является то, что купив на сайте Prime, Вам откроется доступ к уже настроенным виджетам чата и не только. Так вы сможете кастомизировать свой стрим с наименьшей тратой времени. И в целом настройка чата выглядит приятнее, нежели через NightDev.

Однако NightDev Kapchat позволяет вам создать чат на стрим всего в пару кликов. Поэтому нужно проанализировать, что Вам нужно и под потребности выбрать способ вывода чата.

Как сделать - Всплывающее окно чата

Узнать, как создать всплывающее окно чата с помощью CSS и JavaScript.

Как создать всплывающий чат

Шаг 1) Добавить HTML

Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем PHP учебник.

Пример

Шаг 2) Добавить CSS:

Пример

/* Добавить стили для контейнера формы */
.form-container max-width: 300px;
padding: 10px;
background-color: white;
>

/* Добавить красный цвет фона для кнопки "Отмена" */
.form-container .cancel background-color: red;
>

/* Добавить некоторые эффекты наведения на кнопки */
.form-container .btn:hover, .open-button:hover opacity: 1;
>

Шаг 3) Добавить JavaScript:

Пример

function openForm() <
document.getElementById("myForm").style.display = "block";
>

function closeForm() document.getElementById("myForm").style.display = "none";
>

Совет: Зайдите на наш учебник HTML Форм чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSS Форм чтобы узнать больше о том, как стилизовать элементы формы.

Аватар

Но, я не знаю. Играть в футбол.. или узнать больше кодирования, возможно?

Шаг 1) Добавить HTML:

Пример

<div > <img src="/w3images/bandmember.jpg" alt="Аватар">
<p>Привет. Как ты себя чувствуешь сегодня?</p>
<span ></div>

<div darker">
<img src="/w3images/avatar_g2.jpg" alt="Аватар" > <p>Эй! Я в порядке. Спасибо, что спросили!</p>
<span ></div>

<div > <img src="/w3images/bandmember.jpg" alt="Аватар">
<p>Мило! Итак, что ты хочешь сделать сегодня?</p>
<span > </div>

<div darker">
<img src="/w3images/avatar_g2.jpg" alt="Аватар" > <p>Но, я не знаю. Играть в футбол.. или узнать больше кодирования, возможно?</p>
<span > </div>

Шаг 2) Добавить CSS:

Пример

/* Снимите поплавки */
.container::after content: "";
clear: both;
display: table;
>

/* Стиль изображения */
.container img
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
>

/* Стиль правильного изображения */
.container img.right float: right;
margin-left: 20px;
margin-right:0;
>

Как вывести чат на экран стрима в OBS Studio

Чат от StreamLabs

Как вывести чат на стрим в OBS Studio, как выводить чат на стриме Твич и Ютуб

Установка и настройка виджета чата StreamLabs простая, но, к сожалению, мало бесплатных тем оформления.

Чат StreamLabs

Чат от Restream Chat

Установка и настройка Restream Chat также проходит быстро. Подробнее об этой программе вы сможете узнать из нашего ранее опубликованного поста

Ссылка для установки чата в OBS Studio находится в настройках Вставка в стрим.

Чат на экран стрима Restream Chat

В отличии от виджета StreamLabs, здесь есть много различных тем оформления чата. Вы легко сможете подобрать стиль под тематику своего канала.

Установка чата в ОБС

Чтобы встроить ваш чат стрима на экран, необходимо скопировать URL виджета и вставить его в OBS Studio

OBS Studio источники

Добавьте к вашей сцене источник Браузер. И вставьте ранее скопированный URL в поле Адрес URL.

OBS Studio источник браузер

Ширину и высоту вы можете не менять, а все настройки по размеру и оформлению чата делать только в самих виджетах StreamLabs и Restream Chat.

Вы также можете оригинально разместить чат на экране стрима, добавив на источник Браузер в OBS Studio фильтр 3D Transform от плагина StreamFX

Как вывести чат стрима поверх игры?

Вы можете ознакомится о том как скачать, установить и настроить Restrem Chat из нашего прошлого гайда

При помощи данной программы вы легко сможете не только установить чат на экран своего стрима, но следить за ним прямо поверх игры или приложения.

Чтобы вывести чат стрим поверх игры необходимо зайти в Настройки программы Restrem Chat и перейти в раздел Внешний вид. Выставите галочку Поверх окон и выставите Прозрачность фона на 0%.

Как вывести чат стрима поверх игры

Галочка Click through mode — при зажатой клавиши (по умолчанию левый Ctrl) окно чата можно закрыть, переместить и изменить размер, сворачиваю игру или приложение.

Как сделать чат на стриме OBS на Твич: настройка и команды

Как вывести чат на стрим OBS на Твиче? Этим вопросом задаются как профессиональные, так и новоиспеченные игроки. Непонимание начинается в тот момент, когда требуется обнародовать чат в трансляции ОБС Студио на площадке Ютуб или Твич. Мы составили пошаговую инструкцию с объяснениями по этому вопросу.

как добавить чат в обс твич

Как добавить чат на стрим OBS Twitch

Здесь есть два канала — TwoRatChat и OBS Studio. Практичнее всего для чата на экране использовать специализированную программу, однако, не все они одинаково полезны. Кроме того, бесплатных и эффективных осталось мало. Почти все требуют плату за использование. Описанные ниже варианты позволяют избежать трудностей с дополнительными софтами.

чат во время стрима

TwoRatChat

Такие действия позволят отображать окно текстового взаимодействия поверх ячейки игры. Внимание! Беседа отображается при том условии, если игра запущена в оконном режиме. Если же она не владеет таким свойством, то потребуется второй монитор.

тестирование чата во время стрима через obs

OBS Studio

Через софт ОБС Студио также возможно вывести вверх иконку чата. Для этого:

Существует еще один способ, как сделать чат на стриме OBS на Твич.

Как настроить чат в ОБС для Твича

Чтобы вывести чат для Твича на экран эфира, существует много программ и разрешений, но наибольшей популярностью пользуется TwoRatChat. Как уже упоминалось, следует перейти в параметры и вывести в активное положение опции «Поверх всех окон» и «Сохранять чат как картинку».

настройка чата в обс для твича

Внимание! Включите функцию локального сервера в TwoRatChat, чтобы он работал в режиме онлайн. Для синхронизации с OBS Studio добавьте источник в подгруппе «Браузер».

Команды чата на Твиче

Общение в беседе между зрителями и стримером во время видео — очень важно для рейтинга, продвижения и удобного использования. Чтобы облегчить этот процесс, разработчики создали немалое количество команд. Вот самые популярные из них:

Как отвечать в чате Twitch

как отвечать в чате на твиче

Кликните правой кнопкой мыши по окну и выберите из контекстного меню соответствующую позицию.

Как сделать чат на Твиче только для фолловеров

Выставляя параметры беседы, сделайте ее закрытой для всех пользователей, но доступной для подписчиков.

Делаем прозрачный чат

Редактировать тему диалога возможно в настройках графики.

Как объединить чат Твича и Ютуба

Нажмите правой кнопкой мыши по окну и выберите из контекстного меню соответствующую позицию. Также синхронизацию возможно настроить в параметрах эфира на Youtube.

Что делать, если пропал чат Twitch

Первое, что нужно сделать — перезапустить окна. Выйдите с браузера или приложения, и повторно выполните вход. В таком случае диалоговое окно потребуется настроить заново.

Как сделать - чат

Avatar

Nah, I dunno. Play soccer.. or learn more coding perhaps?

Создание чата

Шаг 1) добавить HTML:

Пример

<div darker">
<img src="/w3images/avatar_g2.jpg" alt="Avatar" > <p>Hey! I'm fine. Thanks for asking!</p>
<span ></div>

<div > <img src="/w3images/bandmember.jpg" alt="Avatar">
<p>Sweet! So, what do you wanna do today?</p>
<span > </div>

<div darker">
<img src="/w3images/avatar_g2.jpg" alt="Avatar" > <p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
<span > </div>

Шаг 2) добавить CSS:

Пример

/* Clear floats */
.container::after content: "";
clear: both;
display: table;
>

/* Style images */
.container img
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
>

/* Style the right image */
.container img.right float: right;
margin-left: 20px;
margin-right:0;
>

Как добавить чат в обс (OBS Studio) для стрима

Как добавить чат в обс (OBS Studio) для стрима

Советы и хитрости

OBS — невероятно полезное программное обеспечение для потоковой передачи, и вот небольшой совет, который сделает его еще более полезным.

Как добавить чат в обс (OBS Studio) для стрима

OBS, пожалуй, самое популярное приложение для потоковой передачи на планете. Он не только совершенно бесплатный (хотя вам действительно стоит выложить им несколько долларов, если он вам понравится), но и невероятно мощный. Есть множество встроенных функций и здоровое сообщество разработчиков плагинов, которые помогут вам действительно ускорить ваш опыт.

Одна из изящных вещей, о которой вы, возможно, не знали, — это закрепить свой потоковый чат в окне OBS. Это действительно просто, когда вы знаете, как это сделать, поэтому вам не нужно беспокоиться об открытии браузера.

Как добавить чат в OBS Studio

Как добавить чат в OBS Studio

Этот метод работает для любого потокового сервиса с функцией всплывающего чата. Это есть у Twitch и YouTube, а также у некоторых небольших платформ, таких как Trovo и DLive. В Facebook Gaming пока нет, но мы поговорим об этой платформе позже.

Чтобы добавить потоковый чат в окно OBS Studio, выполните следующие действия. Для целей этого руководства мы использовали Twitch.

В окне чата на вашем канале выберите всплывающий чат

1. Перейдите на свой канал на выбранной вами потоковой платформе.
2. В окне чата на вашем канале выберите всплывающий чат. На некоторых платформах это также можно назвать всплывающим чатом.

В появившемся окне скопируйте URL-адрес из адресной строки.

8. В соответствующем поле под URL-адресом вставьте URL-адрес из всплывающего окна чата, скопированного на шаге 3.
9. Щелкните Применить.

Теперь у вас будет закрепляемое окно для потокового чата в OBS Studio

Теперь у вас будет закрепляемое окно для потокового чата в OBS Studio, которое вы можете перемещать. Когда вы перетаскиваете его через окно, когда доступно пространство, к которому вы можете прикрепить его, он будет выделяться синим цветом, как на изображении выше. Когда вы пристыкованы, вы можете изменить размер окна по своему усмотрению.

Теперь у вас будет потоковый чат в реальном времени прямо в командном центре OBS без необходимости в окнах браузера или дополнительных дисплеях.

Если вы хотите отключить потоковый чат по какой-либо причине, выполните описанные выше действия, чтобы снова открыть меню Docks, и просто щелкните свой собственный потоковый чат, чтобы выключить его. В OBS Studio в любое время будут видны только доки, рядом с которыми стоит галочка.

Как получить игровой чат Facebook в OBS Studio

Как получить игровой чат Facebook в OBS Studio

Итак, тогда Facebook Gaming. Казалось бы, странный. Но, несмотря на отсутствие функции всплывающего чата на веб-сайте, все еще есть простой способ получить игровой чат Facebook внутри OBS Studio.

Ответ — плагин OBS.Live от StreamElements

Ответ — плагин OBS.Live от StreamElements. Если вы уже используете StreamElements для своих предупреждений и наложений, это не проблема. Но даже если вы этого не сделаете, его можно использовать бесплатно, и у вас будет окно чата Facebook Gaming (оно также поддерживает Twitch и YouTube) внутри OBS Studio.

Просто загрузите плагин и аутентифицируйте свою учетную запись Facebook, и все готово. У OBS.Live есть и другие полезные функции, включая ленту активности и даже управление музыкой. Но даже если вам нужен только игровой чат Facebook, его стоит приобрести.

StreamElements OBS.Live также поддерживает другие сервисы, такие как Twitch, и работает таким же образом, предлагая те же функции. Он автоматически подключится к вашему чату, когда плагин будет установлен и включен, устраняя необходимость добавления вручную, как указано выше. Особенно стоит попробовать, если вы используете StreamElements для управления своими предупреждениями и пожертвованиями Twitch.

Это все, что нужно сделать. Это очень эффективный способ держать ваш потоковый чат под рукой без необходимости открывать отдельное окно.ое окно.

Читайте также: