lumpics.ruСодержание:
Способ 1: Использование встроенного браузерного источника с прямыми ссылками
Самый простой метод добавления чата в OBS использует встроенную функцию браузерного источника для подключения чата любой платформы напрямую через веб-интерфейс. Данный подход не требует установки дополнительных программ и работает с большинством стриминговых сервисов, включая Twitch, YouTube и VK Видео. Для корректного отображения чата поверх игры требуется только правильная настройка источника и знание специальных ссылок для подключения.
- В OBS нажмите кнопку с плюсом в блоке «Источники» и выберите «Браузер» из выпадающего списка.
- Задайте источнику понятное название, например «Чат Twitch» или «Чат YouTube», и подтвердите создание нажатием «ОК».
- Для чата Twitch в поле «Ссылка» введите ссылку в формате
https://www.twitch.tv/popout/НИКСТРИМЕРА/chat, заменив «НИКСТРИМЕРА» на ваш реальный ник. Если такой метод работает не совсем корректно, жмите по шестеренке возле чата, открывайте его в отдельном окне и копируйте ссылку. - При подключении чата YouTube сначала запустите трансляцию в YouTube Studio, затем в панели чата справа нажмите на три точки и выберите «Открыть чат в новом окне».
- Скопируйте адрес открывшейся вкладки и вставьте его в поле «ссылка» браузерного источника в OBS.
- Установите ширину источника 400-500 пикселей, а высоту 600-800 пикселей в зависимости от желаемого размера чата на экране.
- Отрегулируйте положение и размер чата в окне предпросмотра OBS, перетаскивая углы рамки источника.
- Для улучшения внешнего вида добавьте CSS-стили в соответствующее поле браузерного источника, например, для прозрачного фона используйте код
body { background-color: rgba(0,0,0,0) !important; }. - Если вы видите вместо чата окно с требованием принять куки или еще какие-нибудь окна, требующие клика мыши, понадобится использовать функцию «Взаимодействовать», вызвав ее через контекстное меню источника. Вы сможете принять все разрешения, которые требуются, а затем получить корректное отображение чата.
Прямое подключение через браузерный источник обеспечивает синхронизацию в реальном времени и не создает дополнительной нагрузки на систему. При возникновении проблем с отображением используйте функцию обновления браузера в свойствах источника или перезагрузите кеш страницы.
В интернете вы можете найти огромное количество уже готовых CSS-кодов для разной настройки источника браузера с чатом. Мы рекомендуем один универсальный вариант, который обеспечит корректное отображение элементов чата из Twitch. Вам нужно только скопировать содержимое, вставить его в свойства источника и обновить.
/* Скрыть заголовок и панель подписок */
div[data-test-selector="chat-room-header"],
div[data-test-selector="prime-offers-bar"] {
display: none !important;
}
/* Скрыть уведомление об анимированных эмодзи */
div[class*="chat-room_notifications"] {
display: none !important;
}
/* Скрыть поле ввода сообщения */
div[class*="chat-input"] {
display: none !important;
}
/* Убрать нижнюю панель с иконками */
div[class*="chat-input"] + div {
display: none !important;
}
.Layout-sc-1xcs6mc-0.hsXgFK {
display: none !important;
}
.stream-chat-header {
display: none !important;
}
div {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
tml, body, #root, .chat-scrollable-area, .scrollable-area, .simplebar-content {
background: transparent !important;
}
{
background: none !important;
background-color: rgba(0, 0, 0, 0) !important;
backdrop-filter: none !important;
filter: none !important;
box-shadow: none !important;
border: none !important;
outline: none !important;
}
.text-fragment {
color: #ffffff !important;
font-weight: 700 !important;
font-size: 16px !important;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
}
.chat-author__display-name {
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
font-weight: 700 !important;
}
Способ 2: Streamlabs
Streamlabs предоставляет готовые виджеты чата с расширенными возможностями кастомизации и профессиональным оформлением. Сервис поддерживает множество стриминговых платформ и позволяет создавать уникальные темы оформления под стиль канала. Виджеты Streamlabs автоматически адаптируются под размеры окна и предлагают дополнительные функции, такие как модерация сообщений и фильтрация контента.
- Перейдите на официальный сайт и авторизуйтесь через аккаунт Twitch, YouTube или другой поддерживаемый сервис.
- В главном меню выберите раздел «Widgets» или «Все виджеты», затем найдите и кликните на «Окно чата».
- Настройте внешний вид чата, выбрав подходящую тему из предложенных вариантов или создав собственную через редактор CSS.
- Отрегулируйте параметры отображения: размер шрифта, цветовую схему, прозрачность фона и максимальное количество видимых сообщений.
- Скопируйте ссылку виджета, нажав на кнопку в блоке «URL-адрес виджета» или используя аналогичную функцию в интерфейсе.
- В OBS создайте новый источник «Браузер» и вставьте скопированную ссылку в поле «Ссылка».
- Установите размеры источника согласно настройкам виджета, обычно 350×600 пикселей для стандартного чата.
- При необходимости изменения оформления вернитесь на сайт Streamlabs, внесите правки в настройки виджета и обновите браузерный источник в OBS через контекстное меню.
Streamlabs предлагает как бесплатные, так и премиальные темы оформления чата. Бесплатная версия содержит базовый набор стилей, в то время как платная подписка открывает доступ к эксклюзивным темам и расширенным функциям модерации. Тут уже все зависит от того, насколько вы профессиональный стример, хотите ли заняться серьезной настройкой трансляции или пока только тестируете данное направление деятельности.
Способ 3: Restream Chat
Restream Chat объединяет сообщения с нескольких стриминговых платформ в единый интерфейс, что незаменимо при мультистриминге на Twitch, YouTube и других сервисах одновременно. Программа синхронизирует чаты в реальном времени и позволяет отвечать на сообщения со всех подключенных платформ из одного окна, значительно упрощая взаимодействие с аудиторией.
- Зарегистрируйтесь на сайте и авторизуйтесь через аккаунты нужных стриминговых платформ. В разделе «Channels» подключите все платформы, с которых хотите получать сообщения чата.
- После создания трансляции перейдите в раздел «Chat» и настройте внешний вид объединенного чата: цветовую схему, размер шрифта и отображение эмодзи.
- В разделе с настройками «Embed in stream» вам необходимо скопировать ссылку на чат или запустить его. Тут можете выбрать, получить ссылку на чат конкретной платформы или сразу общий, который будет объединять все сообщения.
- Соответственно, полученную ссылку необходимо будет вставить в поле «Ссылка» источника «Браузер» при его стандартной настройке.
- После этого можете протестировать отправку сообщений и проследить, как они отображаются в самой OBS, или сразу запускать трансляцию и приступать к проведению эфира.
Restream Chat поддерживает кроссплатформенные ответы, позволяя отправлять сообщения в чат YouTube через интерфейс Twitch и наоборот. Функция автоматической модерации фильтрует спам и нежелательный контент на всех подключенных платформах.
Способ 4: SheepChat
SheepChat представляет собой продвинутое решение для стримеров, обеспечивающее поддержку множества платформ, включая Twitch, YouTube, VK, и многие другие сервисы. Программа предлагает уникальные возможности кастомизации, встроенную систему уведомлений и продвинутые инструменты взаимодействия с аудиторией, включая голосования и розыгрыши прямо из интерфейса чата. Одна из особенностей — вы можете вывести чат прямо к себе на экран поверх всех окон и видеть его постоянно, что позволяет удобно стримить всего с одного монитора без использования дополнительных девайсов.
- Посетите официальный сайт программы и скачайте ее актуальную версию для вашей операционной системы.
- Установите SheepChat, зарегистрируйтесь или войдите как гость, и при первом запуске выберите русский язык интерфейса в настройках программы.
- Вызовите настройки через контекстное меню программы на панели задач. В разделе «Подключение» добавьте нужные стриминговые платформы, указав логины каналов или авторизовавшись через OAuth.
- Перейдите в «Внешний вид» и выберите подходящую тему оформления из встроенной библиотеки или создайте собственную.
- В разделе «Общие» активируйте опцию «Окно чата поверх всех окон» для отображения поверх игры. Точно так же можете сделать сквозные клики через чат и закрепить окно на конкретной позиции.
- Настройте игровой режим, выбрав минималистичную тему и отключив лишние элементы интерфейса для экономии места на экране.
- Для трансляции чата зрителям, если не собираетесь держать чат всегда поверх всех окон, перейдите в «Вывод в стрим» — «Виджеты» и скопируйте ссылку HTTP-виджета.
- В OBS добавьте браузерный источник с скопированной ссылкой и настройте размер виджета согласно требованиям сцены.
- При необходимости активируйте синтез речи для озвучивания сообщений и настройте фильтры по ключевым словам.
Мы настоятельно рекомендуем SheepChat для тех случаев, когда не очень удобно читать чат с телефона или же нет возможности вывести его на второй монитор. Вы можете сделать его прозрачным, расположить в удобном месте на основном дисплее и читать прямо во время игры. При этом зрители тоже будут видеть этот чат, поскольку он закреплен поверх всех окон и гармонично интегрирован в сцену.
Способ 5: Использование док-панелей OBS для персонального просмотра
Док-панели OBS позволяют встроить чат непосредственно в интерфейс программы для личного просмотра стримера без отображения его зрителям. Данный метод удобен для мониторинга сообщений во время настройки сцен или при работе с несколькими источниками контента, когда полноэкранное окно чата может мешать рабочему процессу.
- Получите ссылку на виджет чата из любого вышеупомянутого сервиса (Streamlabs, Restream или прямую ссылку платформы).
- В OBS откройте меню «Док-панели» через панель инструментов сверху. Нажмите на «Пользовательские док-панели браузера» для создания новой панели.
- В открывшемся окне введите название панели, например «Чат мониторинг», и вставьте ссылку на виджет в поле «URL».
- Нажмите «Применить» для создания док-панели, которая появится в интерфейсе OBS как отдельное окно.
- Перетащите созданную панель в удобное место интерфейса программы или оставьте ее как плавающее окно. Отрегулируйте размер панели, потянув за ее границы, чтобы оптимизировать видимость сообщений. При необходимости создайте несколько док-панелей для одновременного мониторинга чатов разных платформ.
Док-панели сохраняют свои настройки между сессиями OBS и автоматически подключаются при запуске программы. Данный способ не влияет на производительность системы и позволяет скрыть панель в любой момент через то же самое меню, откуда она добавлялась.
Способ 6: Специализированные программы для чата поверх игр
Существует несколько специализированных приложений, предназначенных исключительно для отображения чата поверх любых окон и игр. Эти программы работают независимо от OBS и предоставляют максимальную гибкость в настройке отображения, включая продвинутые функции прозрачности, позиционирования и автоматического скрытия.
- Для простого закрепления любого окна поверх игры скачайте программу DeskPins с официального сайта.
- Установите DeskPins и запустите программу, после чего откройте чат в браузере в отдельном окне.
- Нажмите на значок булавки в трее Windows и кликните по окну чата для его закрепления поверх всех окон.
- Для более продвинутого управления установите программу Chatty — специализированный клиент для чата Twitch с расширенными возможностями. Скачайте Chatty с официального сайта
chatty.github.ioи авторизуйтесь через аккаунт Twitch. - В настройках Chatty активируйте функцию «Always on top» и настройте прозрачность окна для комфортного отображения поверх игры.
- Отрегулируйте размер шрифта и цветовую схему для лучшей читаемости на фоне игрового контента.
Специализированные программы обычно потребляют меньше системных ресурсов по сравнению с браузерными решениями и предлагают более стабильную работу при длительных игровых сессиях. Многие из них поддерживают горячие клавиши для быстрого скрытия и отображения чата.
Настройка отображения поверх полноэкранных игр
Для корректного отображения чата поверх игр требуется правильная настройка режима запуска игрового приложения и параметров операционной системы. Полноэкранные игры часто блокируют отображение сторонних окон, поэтому необходимо использовать специальные режимы запуска или изменить настройки совместимости.
- В настройках игры измените режим отображения с «Полный экран» на «Полный экран в окне» или «Borderless Windowed». Данный режим визуально не отличается от полноэкранного, но позволяет операционной системе отображать другие окна поверх игры.
- Если игра не поддерживает оконный режим, попробуйте изменить совместимость исполняемого файла через свойства ярлыка. Щелкните правой кнопкой по ярлыку игры, выберите «Свойства» и перейдите на вкладку «Совместимость». Активируйте опцию «Отключить оптимизацию на весь экран» для улучшения совместимости с оверлейными приложениями.
- В программе отображения чата обязательно включите функцию «Поверх всех окон» или «Always on top».
- Настройте прозрачность окна чата на уровне 60-80% для сохранения видимости игрового интерфейса.
- При использовании Windows 10/11 отключите игровой режим в настройках системы, если он вызывает конфликты с оверлейными приложениями.
Некоторые античит-системы могут блокировать работу оверлейных приложений в онлайн-играх. В таких случаях рекомендуется использовать второй монитор для отображения чата или выбрать менее навязчивые методы мониторинга сообщений.
