Для однонаправленного обновления сцен достаточно обычного HTTP: проще эксплуатация и стабильнее browser-source.
Кейс / 05 · MatchCue
Реалтайм-графика для спортивных трансляций
Оператор ведёт матч в панели управления, а счёт, статистика и турнирные сцены обновляются в OBS/vMix через browser-source.
- РольСобственный продукт
- СтекNext.js / SSE
- ТипSaaS
Задача
Небольшим спортивным трансляциям нужна телевизионная графика без студийного бюджета: один оператор управляет матчем, несколько сцен получают состояние синхронно.
Что сделал
SaaS-продукт целиком: операторский пульт с горячими клавишами, Центр вывода с живым монитором сцены, восемь сцен графики, турнирные сетки, ссылка-табло и ротация спонсорских блоков.
Что получилось
Работающий сервис: 8 сцен синхронно в реалтайме, один оператор ведёт весь матч. Открыты публичный лендинг и регистрация.
01 / Контекст и задача
Телеграфика без студийного бюджета
Небольшим спортивным трансляциям нужна телевизионная графика без дорогой студийной инфраструктуры. Один оператор должен управлять матчем, а несколько сцен — синхронно получать состояние.
02 / Интерфейс: почему так
UIПульт, собранный как табло
- D1
Крупные цифры вместо полей ввода
Пульт построен как спортивный дашборд: счёт набран большими цифрами, кнопки ±1/+2/+3 стоят прямо под ним, игровое время — отдельным блоком со «Старт/Стоп». Оператор меняет счёт одним нажатием, не всматриваясь в интерфейс.
- D2
Горячие клавиши видны на экране
Строка «Space — старт/стоп, Q — +1 VORTEX, W — +1 VOLT, S — старт, P — пауза» висит над управлением. Раскладка всегда перед глазами: во время атаки не нужно искать кнопку мышью или вспоминать сочетания.
- D3
Живой монитор в Центре вывода
Раскладка сцен двигается прямо поверх живого предпросмотра: оператор видит ровно то, что уйдёт в эфир, ещё до «Применить». Правка «по факту эфира» из процесса исчезает.
- D4
Табло с прозрачным фоном
Сцена-табло собрана под browser-source OBS/vMix: прозрачный фон, настраиваемые цвета и логотипы команд, спонсорский блок отдельным слоем. Графика ложится поверх видео без хромакея и лишней настройки.
- D5
Турнирная сетка — отдельная сцена
Сетка живёт своей сценой вывода и заполняется по ходу игр: на паузах её можно показать одним переключением, без пересборки композиции в OBS.
03 / Технические решения
Что под капотом
Правки сцены сразу видны в живом мониторе, но уходят в эфир только по «Применить» — рамки можно двигать, не рискуя трансляцией.
Оператору можно выдать ссылку с ограниченными правами без передачи полного аккаунта.
Архитектура работы
Интерфейс
→
Логика
→
Интеграции
04 / Результат
Что работает
Работают операторский пульт с горячими клавишами, Центр вывода с живым монитором сцены, восемь сцен графики, турнирные сетки, постоянная ссылка табло турнира, ротация спонсорских блоков и доступ по ссылкам-приглашениям. Открыты публичный лендинг и регистрация.
