HTML5-оверлеи: как браузерная графика попадает в эфир
Почти все современные системы живой графики сегодня рисуют в браузерном движке. Эта страница объясняет, что такое HTML5-оверлей, как прозрачность доживает до вашего кодировщика, как графика остаётся синхронной с пультом и где у метода заканчиваются возможности.
Что такое HTML5-оверлей
Это обычная веб-страница, фон которой никогда не закрашивается. Каждая графика — плашка, уголок, строка — это DOM-элемент, размещённый на холсте 1920×1080. Поскольку за ними страница ничего не рисует, все остальные пиксели прозрачны.
Ваш кодировщик открывает эту страницу во встроенном браузере (OBS использует CEF, Chromium Embedded Framework) и накладывает результат на сцену, учитывая альфа-канал. Для кодировщика это просто ещё один источник с прозрачностью — как движущийся PNG.
Как графика меняется прямо в эфире
Страница открывается один раз и остаётся открытой. Когда оператор нажимает TAKE, команда идёт по WebSocket на страницу, та добавляет класс или обновляет значение, а CSS выводит элемент на экран. Ничего не перезагружается и никакие файлы не пишутся.
Именно это делает возможными живые данные: счёт может расти, секундомер идти, а имя меняться, пока графика ещё в эфире, — потому что страница является работающим приложением, а не отрендеренным файлом.
Правила производительности, которые важны
- Анимируйте только transform и opacity. Их сводит GPU. Анимация width, height, top или left заставляет пересчитывать раскладку каждый кадр.
- Избегайте анимированных box-shadow и filter. Они перерисовывают большие области и чаще всего виноваты в дёргающемся оверлее.
- Держите DOM небольшим. Несколько десятков элементов — норма. Несколько тысяч — это эфир с потерей кадров.
- Не опрашивайте по таймеру. Перерисовка каждые 100 мс стоит одинаково, изменилось что-то или нет; шлите обновления через сокет.
- Совпадайте с холстом. Стройте в разрешении кодировщика, чтобы браузерный источник никогда не масштабировался и кромки текста не размывались.
Где HTML5 недостаточно
Браузерный источник сводит ваш кодировщик, поэтому графика существует только внутри него. Если нужно питать видеомикшер, аппаратный кеинг или второй объект — нужен видеосигнал: SDI key и fill либо NDI с альфа-каналом. NDI-графика →
Второе ограничение — покадровая точность. Браузер рисует тогда, когда рисует; в стриминге это незаметно, но тракту, который считает кадры, понадобится настоящий сервер выдачи.
Почему мы строим именно так
Страница выхода в LowerThird Software — намеренно скучный HTML5: прозрачный фон, CSS-анимации, состояние через SignalR. Это значит, что кодировщик сводит на железе, которое уже использует, а дизайнер, знающий CSS, меняет внешний вид без пересборки. Посмотреть в работе в OBS →
Готовая HTML5-графика Шаблоны, пульт и прозрачный выход в одной установке — без проекта шаблонов с нуля.
Запросить ранний доступ