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

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

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

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

Способ 1: Использование встроенного браузерного источника с прямыми ссылками

Самый простой способ добавить чат в OBS — использовать встроенную функцию источника браузера, чтобы подключить чат любой платформы прямо через веб-интерфейс. Этот метод работает с большинством стриминговых сервисов, таких как Twitch, YouTube и VK Видео, и не требует установки дополнительных программ. Единственное, что требуется, чтобы отображать чат поверх игры, — это правильно настроить источник и знать специальные ссылки для подключения.

1. В OBS нажмите кнопку с плюсом в блоке «Источники» и выберите «Браузер» из выпадающего списка.
2. 
3. Задайте источнику понятное название, например «Чат Twitch» или «Чат YouTube», и подтвердите создание нажатием «ОК».
4. 
5. Для чата Twitch в поле «Ссылка» введите ссылку в формате https://www.twitch.tv/popout/НИКСТРИМЕРА/chat, заменив «НИКСТРИМЕРА» на ваш реальный ник. Если такой метод работает не совсем корректно, жмите по шестеренке возле чата, открывайте его в отдельном окне и копируйте ссылку.
6. 
7. При подключении чата YouTube сначала запустите трансляцию в YouTube Studio, затем в панели чата справа нажмите на три точки и выберите «Открыть чат в новом окне».
8. 
9. Скопируйте адрес открывшейся вкладки и вставьте его в поле «ссылка» браузерного источника в OBS.
10. 
11. Установите ширину источника 400-500 пикселей, а высоту 600-800 пикселей в зависимости от желаемого размера чата на экране.
12. 
13. Отрегулируйте положение и размер чата в окне предпросмотра OBS, перетаскивая углы рамки источника.
14. 
15. Для улучшения внешнего вида добавьте CSS-стили в соответствующее поле браузерного источника, например, для прозрачного фона используйте код body { background-color: rgba(0,0,0,0) !important; }.
16. 
17. Если вы видите вместо чата окно с требованием принять куки или еще какие-нибудь окна, требующие клика мыши, понадобится использовать функцию «Взаимодействовать», вызвав ее через контекстное меню источника. Вы сможете принять все разрешения, которые требуются, а затем получить корректное отображение чата.
18. 

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

В Интернете есть множество уже готовых CSS-кодов для различных настроек источника браузера с чатом. Мы предлагаем один универсальный метод, который гарантирует корректное отображение элементов чата Twitch. Вы просто должны скопировать материал, поместить его в свойства источника и обновить.

Блокировка заголовков и панели подписок[data-test-selector="chat-room-header"]Используйте div[data-test-selector="prime-offers-bar"]. { visibility: none!important; }

.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 автоматически адаптируются под размеры окна и имеют ряд дополнительных возможностей, таких как фильтрация контента и модерация сообщений.

Перейдите на сайт Streamlabs.

1. Перейдите на официальный сайт и авторизуйтесь через аккаунт Twitch, YouTube или другой поддерживаемый сервис.
2. 
3. В главном меню выберите раздел «Widgets» или «Все виджеты», затем найдите и кликните на «Окно чата».
4. 
5. Настройте внешний вид чата, выбрав подходящую тему из предложенных вариантов или создав собственную через редактор CSS.
6. 
7. Отрегулируйте параметры отображения: размер шрифта, цветовую схему, прозрачность фона и максимальное количество видимых сообщений.
8. 
9. Скопируйте ссылку виджета, нажав на кнопку в блоке «URL-адрес виджета» или используя аналогичную функцию в интерфейсе.
10. 
11. В OBS создайте новый источник «Браузер» и вставьте скопированную ссылку в поле «Ссылка».
12. 
13. Установите размеры источника согласно настройкам виджета, обычно 350×600 пикселей для стандартного чата.
14. 
15. При необходимости изменения оформления вернитесь на сайт Streamlabs, внесите правки в настройки виджета и обновите браузерный источник в OBS через контекстное меню.
16. 

Темы оформления чата доступны от Streamlabs как бесплатно, так и за дополнительную плату. Платная подписка дает доступ к дополнительным функциям модерации и эксклюзивным темам, в то время как бесплатная версия предлагает лишь базовый набор стилей. Все зависит от того, насколько вы профессиональный стример, хотите ли вы серьезно настроить свою трансляцию или просто тестируете этот вид деятельности.

Способ 3: Restream Chat

Restream Chat незаменим для мультистриминга на Twitch, YouTube и других платформах одновременно, поскольку он объединяет сообщения с нескольких платформ стриминга в один интерфейс. Программа значительно упрощает взаимодействие с аудиторией, синхронизируя чаты в реальном времени и позволяя отвечать на сообщения со всех подключенных платформ из одного окна.

Перейдите на официальный веб-сайт. Перекачать

1. Зарегистрируйтесь на сайте и авторизуйтесь через аккаунты нужных стриминговых платформ. В разделе «Channels» подключите все платформы, с которых хотите получать сообщения чата.
2. 
3. После создания трансляции перейдите в раздел «Chat» и настройте внешний вид объединенного чата: цветовую схему, размер шрифта и отображение эмодзи.
4. 
5. В разделе с настройками «Embed in stream» вам необходимо скопировать ссылку на чат или запустить его. Тут можете выбрать, получить ссылку на чат конкретной платформы или сразу общий, который будет объединять все сообщения.
6. 
7. Соответственно, полученную ссылку необходимо будет вставить в поле «Ссылка» источника «Браузер» при его стандартной настройке.
8. 
9. После этого можете протестировать отправку сообщений и проследить, как они отображаются в самой OBS, или сразу запускать трансляцию и приступать к проведению эфира.
10. 

Restream Chat позволяет отправлять сообщения в чат YouTube через интерфейс Twitch и наоборот благодаря поддержке кроссплатформенных ответов. На всех подключенных платформах функция автоматической модерации удаляет спам и нежелательный контент.

Чтобы чат был виден поверх игры в стриме, его нужно добавить в сцену OBS как отдельный источник. Это можно сделать просто с помощью браузера. Выбираете нужную сцену в настройках OBS, добавляете источник Браузера, вставляете ссылку на чат (например, с Twitch или YouTube), регулируете размер и размещаете его там, где удобно, обычно в углу экрана. Главное, чтобы чат был заметен зрителям, не мешая игре. Всё будет работать гладко, если вы немного поиграете с положением и прозрачностью.

Способ 4: SheepChat

SheepChat — это мощное решение для стримеров, которое работает с множеством платформ, таких как Twitch, YouTube, VK и многие другие. Программа предоставляет эксклюзивные возможности кастомизации, встроенную систему уведомлений и продвинутые инструменты для взаимодействия с аудиторией, такие как розыгрыши и голосование прямо в чате. Одной из функций является возможность вывести чат прямо к себе на экран поверх всех окон, что позволяет удобно стримить с одного монитора без использования дополнительных устройств.

Скачать SheepChat

1. Посетите официальный сайт программы и скачайте ее актуальную версию для вашей операционной системы.
2. 
3. Установите SheepChat, зарегистрируйтесь или войдите как гость, и при первом запуске выберите русский язык интерфейса в настройках программы.
4. 
5. Вызовите настройки через контекстное меню программы на панели задач. В разделе «Подключение» добавьте нужные стриминговые платформы, указав логины каналов или авторизовавшись через OAuth.
6. 
7. Перейдите в «Внешний вид» и выберите подходящую тему оформления из встроенной библиотеки или создайте собственную.
8. 
9. В разделе «Общие» активируйте опцию «Окно чата поверх всех окон» для отображения поверх игры. Точно так же можете сделать сквозные клики через чат и закрепить окно на конкретной позиции.
10. 
11. Настройте игровой режим, выбрав минималистичную тему и отключив лишние элементы интерфейса для экономии места на экране.
12. 
13. Для трансляции чата зрителям, если не собираетесь держать чат всегда поверх всех окон, перейдите в «Вывод в стрим» — «Виджеты» и скопируйте ссылку HTTP-виджета.
14. 
15. В OBS добавьте браузерный источник с скопированной ссылкой и настройте размер виджета согласно требованиям сцены.
16. 
17. При необходимости активируйте синтез речи для озвучивания сообщений и настройте фильтры по ключевым словам.
18. 

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

Способ 5: Использование док-панелей OBS для персонального просмотра

Благодаря док-панели OBS можно встроить чат непосредственно в интерфейс приложения, что позволяет стримеру видеть сообщения без отображения зрителей. Этот метод полезен для мониторинга сообщений во время настройки сцен или при работе с несколькими источниками контента, потому что полноэкранное окно чата может мешать работе.

1. Получите ссылку на виджет чата из любого вышеупомянутого сервиса (Streamlabs, Restream или прямую ссылку платформы).
2. 
3. В OBS откройте меню «Док-панели» через панель инструментов сверху. Нажмите на «Пользовательские док-панели браузера» для создания новой панели.
4. 
5. В открывшемся окне введите название панели, например «Чат мониторинг», и вставьте ссылку на виджет в поле «URL».
6. 
7. Нажмите «Применить» для создания док-панели, которая появится в интерфейсе OBS как отдельное окно.
8. 
9. Перетащите созданную панель в удобное место интерфейса программы или оставьте ее как плавающее окно. Отрегулируйте размер панели, потянув за ее границы, чтобы оптимизировать видимость сообщений. При необходимости создайте несколько док-панелей для одновременного мониторинга чатов разных платформ.
10. 

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

Способ 6: Специализированные программы для чата поверх игр

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

1. Для простого закрепления любого окна поверх игры скачайте программу DeskPins с официального сайта.
2. 
3. Установите DeskPins и запустите программу, после чего откройте чат в браузере в отдельном окне.
4. 
5. Нажмите на значок булавки в трее Windows и кликните по окну чата для его закрепления поверх всех окон.
6. 
7. Для более продвинутого управления установите программу Chatty — специализированный клиент для чата Twitch с расширенными возможностями. Скачайте Chatty с официального сайта chatty.github.io и авторизуйтесь через аккаунт Twitch.
8. 
9. В настройках Chatty активируйте функцию «Always on top» и настройте прозрачность окна для комфортного отображения поверх игры.
10. 
11. Отрегулируйте размер шрифта и цветовую схему для лучшей читаемости на фоне игрового контента.
12. 

По сравнению с браузерными приложениями, специальные программы обычно потребляют меньше системных ресурсов и обеспечивают более стабильную работу при длительных игровых сессиях. Многие из них также поддерживают горячие клавиши для быстрого скрытия и отображения чата.

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

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

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