Титры в OBS: один браузерный источник — вся графика
OBS Studio умеет показывать живую HTML5-графику штатно — без плагинов, карты захвата и второй машины. Вот точная настройка титров в OBS, табло и бегущих строк через один прозрачный браузерный источник, а также типичные проблемы и их решения.
Почему браузерный источник, а не медиаисточник
Медиаисточник проигрывает файл. Браузерный источник выполняет живую веб-страницу, накладывает её на сцену с полной прозрачностью и обновляет в реальном времени. Для живой графики это решает всё: страница может менять содержимое прямо в эфире, поэтому счёт или имя обновляются, не трогая OBS.
К тому же один источник несёт всю графику. Плашка, табло и строка — элементы одной прозрачной страницы, они никогда не разъезжаются, и вам не приходится строить стопку из двенадцати источников.
Добавляем источник — по шагам
- Запустите LowerThird Software. Пульт и страница выхода отдаются с вашей же машины.
- В OBS выберите сцену, где уже есть камера или захват игры. Нажмите + в «Источниках» и выберите Браузер.
- Назовите источник Графика и подтвердите.
- В поле URL укажите
http://localhost:5275/output. - Ширина 1920, высота 1080 — как у холста; не меняйте размер источника в сцене.
- Галочку «Отключать источник, когда он не виден» не ставьте, а «Обновлять браузер при активации сцены» включайте только если хотите сбрасывать графику при каждой смене сцены.
- Подтвердите и перетащите источник в самый верх списка, чтобы он лежал поверх камеры.
Прозрачность: настраивать нечего
Многие ищут настройку прозрачности. Её нет, и она не нужна: браузерный источник OBS уже учитывает альфа-канал страницы. Если страница не закрашивает фон, OBS накладывает только нарисованные пиксели.
Если вы видите чёрный или белый прямоугольник — это страница красит фон, а не OBS. Пользовательский CSS в свойствах источника спасёт стороннюю страницу (body { background: transparent !important; }), но страница, сделанная для эфира, должна быть прозрачной изначально.
Размер, масштаб и безопасная зона
Всегда создавайте источник в разрешении вашего холста — обычно 1920×1080 — и располагайте графику внутри страницы, а не масштабируйте источник в OBS. Масштабирование пересчитывает текст и размывает все кромки; это причина номер один «мыльных» титров в эфире.
Если вы вещаете в 1280×720, оставьте источник 1920×1080 и дайте OBS уменьшить весь холст один раз в конце. Одно чистое уменьшение лучше двух проходов масштабирования.
Пять проблем и их решения
- Источник пустой. Приложение не запущено или порт другой. Откройте адрес в обычном браузере: если и там пусто — дело не в OBS.
- Графика не обновляется. Страница в кеше или разорвалось соединение. Правый клик по источнику → Взаимодействовать или «Обновить». Страница на WebSocket должна переподключаться сама.
- Титры выглядят мягкими. Источник масштабируется. Сбросьте трансформацию (Ctrl+R при выделенном источнике) и задайте размер в свойствах.
- Всё подтормаживает. В OBS выключено аппаратное ускорение либо анимация слишком дорогая. Предпочитайте transform и opacity, которые тянет GPU, вместо width, height и теней.
- Оверлей исчезает при смене сцены. Включено «Отключать источник, когда он не виден». Снимите галочку или добавляйте тот же источник в каждую сцену ссылкой, а не копией.
Работа во время эфира
Держите пульт на втором мониторе или на планшете на столе — это веб-страница, поэтому управлять ею может любое устройство с браузером в вашей сети. Набирайте имя следующего гостя, пока в кадре ещё предыдущий, и жмите TAKE при смене плана.
Так как команды идут по WebSocket, нет ни задержки опроса, ни перезагрузки: вы кликаете — и анимация стартует в том же кадре.
Готовы попробовать в своей сцене? Возьмите сборку раннего доступа, добавьте один браузерный источник и выдайте плашку в эфир примерно за пять минут.
Запросить ранний доступ