Чат в кадре делается браузер-источником в OBS за пять минут. Ещё десять уходит на то, что обычно пропускают: прозрачный фон, читаемый шрифт и скрытие лишнего. Ниже — всё по порядку, вместе с готовым куском CSS.
Столбец сообщений поверх картинки. Нужен, чтобы человек без второго экрана понимал, о чём речь, и чтобы запись эфира осталась осмысленной: без чата зритель записи слышит только ваши ответы.
Всё, что касается конкретного человека: кто это, когда был в прошлый раз, о чём говорили. Ставится док-панелью в интерфейс OBS и в кадр не попадает никогда.
Дальше — про первое. Про второе есть отдельный разбор.
Без сторонних сервисов, только площадка и OBS.
twitch.tv/popout/ВАШ_КАНАЛ/chat — подставьте своё имя канала.
У YouTube аналогичная страница чата открывается кнопкой «Открыть чат
в новом окне» из студии трансляции.Это содержимое поля «Пользовательский CSS» в свойствах источника. Первое правило убирает белую подложку, остальные делают текст читаемым на любой картинке:
body {
background: transparent !important;
margin: 0;
overflow: hidden;
font-family: "Segoe UI", Roboto, sans-serif;
font-size: 19px;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.9);
}Тень под текстом здесь важнее, чем кажется: без неё белый чат исчезает
на светлой сцене. Размер 19px — отправная точка; дальше
подбирается под ваш макет.
Дописываются к коду выше. Выбирается один — тот, который не мешает вашей картинке.
Сообщения в одну строку, минимум отступов — чат занимает узкую полосу и не лезет в интерфейс игры.
.chat-line__message {
line-height: 1.25;
padding: 1px 0;
}Полупрозрачная плашка под каждым сообщением. Читается на любом фоне, включая светлые и мельтешащие сцены.
.chat-line__message {
background: rgba(0,0,0,.55);
border-radius: 8px;
padding: 5px 9px;
margin: 3px 0;
text-shadow: none;
}Больше половины зрителей смотрят с телефона, и для них ваш «нормальный» шрифт — мелкий. Если аудитория мобильная, размер поднимают заметно, а количество строк сокращают.
body { font-size: 24px; }
.chat-line__message { margin: 6px 0; }Имена классов у площадок меняются, поэтому если правило не сработало — проверьте на самой странице чата, как называется элемент сообщения: откройте её в браузере и посмотрите код страницы.
Механика везде одна: у трансляции есть отдельная страница чата, её адрес вставляется в браузер-источник. Разница только в том, где взять адрес.
| Площадка | Где взять адрес чата |
|---|---|
| Twitch | twitch.tv/popout/ВАШ_КАНАЛ/chat — подставляется имя канала |
| YouTube | В окне чата трансляции — меню с тремя точками и пункт открыть чат в отдельном окне. Адрес из адресной строки и нужен |
| VK Play Live, Trovo и прочие | В панели трансляции есть кнопка открыть чат отдельным окном — дальше так же |
Каждый чат живёт отдельно, и в кадре их получится два столбца. Так делать не стоит: зритель не понимает, почему половина разговора идёт мимо него. Рабочих выхода два — либо выводить чат только основной площадки, либо взять сервис, который сводит чаты в один поток, и выводить уже его.
Сервисы для стримеров дают собственную страницу чата, где прозрачность, шрифт, анимация появления и скрытие команд настраиваются галочками, а не руками в CSS. Выдают они всё тот же адрес для браузер-источника.
Смысл выбирать такой вариант один — не возиться с CSS. По содержанию это тот же чат площадки: те же сообщения, тот же порядок. Ни один виджет чата не знает о зрителях ничего сверх того, что они написали прямо сейчас.
| Что | Как обычно | Как надо |
|---|---|---|
| Размер шрифта | Подбирают, глядя в монитор с полуметра | Открыть свой стрим на телефоне и прочитать. Щуритесь — увеличивайте |
| Высота столбца | Во весь экран | 6–8 последних сообщений: дальше всё равно не читают |
Команды с ! | Висят в кадре | Прятать: это техника, а не разговор |
| Сообщения ботов | Занимают половину столбца | Прятать по имени бота |
| Проверка | Смотрят в предпросмотре OBS | Записать минуту и посмотреть после сжатия |
Что вообще стоит держать в командах, чтобы их было немного, — в разборе команд для Twitch.
В вертикальном кадре места по ширине почти нет, и обычный столбец чата съедает треть экрана. Что работает:
Если вертикальный эфир — это параллельная копия основного, чат лучше оставить только в горизонтальном: в вертикальном он почти всегда мешает.
Соседнее решение той же задачи: сообщения не показываются, а читаются голосом. Смысл в том, что вам не нужно отводить глаза от игры, а зрителю записи всё слышно без столбца текста.
Минусы, о которых стоит знать заранее: синтезированный голос поверх игры утомляет за час, а ещё его используют, чтобы протащить в эфир то, что вы не хотели бы услышать. Поэтому озвучку почти всегда ограничивают — например, читают вслух только сообщения за баллы канала или за донат. Как устроены такие покупки, разобрано в баллах канала.
Вывод чата и озвучка не мешают друг другу: их часто включают вместе, но с разными правилами — видно всё, а озвучивается только оплаченное.
В адрес попал лишний пробел или неверное имя канала. Проверяется за секунду: откройте тот же адрес в обычном браузере. Пусто и там — дело в адресе.
CSS вставлен не в то поле либо без !important. Поле
называется «Пользовательский CSS» и находится в свойствах самого
источника, а не в настройках сцены.
У браузер-источников свой кеш. Правый клик по источнику → «Обновить». Не помогло — удалить и создать заново.
Каждый браузер-источник — отдельный движок браузера внутри OBS. Три-четыре тяжёлых источника заметны на слабой машине: лишние лучше отключить в неиспользуемых сценах.
Анимация появления новых сообщений накладывается на плавающий кадр.
Лечится выключением анимации в настройках виджета либо строкой
* { animation: none !important; } в пользовательском CSS.
Высота источника меньше, чем нужно последнему сообщению. Увеличьте высоту в свойствах источника, а не растягиванием рамки в сцене: растягивание масштабирует картинку, а не добавляет места.
Всплывающая страница чата иногда приносит с собой шапку и кнопки.
Убираются тем же CSS — достаточно скрыть лишний блок через
display: none.
Здесь проходит граница, и она не про эстетику.
Ник и само сообщение — нормально: человек пишет их при всех, зная, что это видят сотни людей и попадает в запись.
А вот всё, что вы знаете о человеке помимо его сообщения, в кадр попадать не должно. Имя, город, о чём говорили в прошлый раз, ваши заметки — это подсказка ведущему. Показать её в эфире значит показать одному зрителю то, что вы знаете о другом.
Поэтому такие вещи выводят док-панелью в интерфейс OBS (Вид → Док-панели → Пользовательские док-панели браузера), а не источником в сцену. Панель живёт в окне программы рядом с микшером, её видите только вы.
Чат в кадре — это запись. Всё, что кто-то напишет, останется в VOD, в клипах и в нарезках, которые сделают другие. Удалённое из чата сообщение из уже записанного видео не исчезает: в чате его нет, а в кадре оно осталось навсегда.
Отсюда набор мер, который стоит включить до того, как понадобится:
И практическое правило: если модератора нет, а чат в кадре есть — не выводите чат на весь экран. Шесть строк внизу в случае чего попадут в запись на шесть строк, а не на половину кадра.
Нужен, если вы много разговариваете с чатом, если эфиры смотрят в записи и если без реплик зрителей половина непонятна.
Не нужен, если игра динамичная и каждый пиксель кадра занят, а чат идёт медленно. В этом случае полезнее проговаривать вопрос вслух перед ответом — и зритель записи всё поймёт без столбца текста.
Чат в кадре решает задачу зрителя: понимать, о чём речь. Вашу задачу — помнить, кто пишет — он не решает: в столбце видно только ник и последнее сообщение.
Для этого и нужна вторая панель, та, что видите только вы: когда человек пишет, рядом появляется, кто это и о чём вы говорили в прошлый раз. Как это устроено — на странице карточек зрителей. Соседние механики: чат-бот отвечает на команды и здоровается по имени, донат-таймер продлевает эфир за донаты, а баллы канала дают чату повод что-то заказывать.
Разбор под другим углом — показывать чат в кадре или нет.
А если нужно не разобраться, а решить задачу — карточки зрителей: кто написал и о чём вы говорили.