Эфирная графика / отработала турнир

Fight Broadcast

Графика для трансляции турнира по единоборствам: номер боя, выход бойцов и плашки с именами поверх живой картинки. Оператор ведёт эфир с пульта, экран рисует сцену для LED, телевизора или OBS.

Что это
Пульт оператора и экран 1920×1080
Эфир
3 ковра, больше 20 часов трансляции
Клиент
React / TypeScript / Framer Motion
Сервер
Node.js / Socket.IO / SQLite
01

Четыре сцены одного боя

Оператор нажимает «Запустить бой», и экран идёт по сценам: заставка с номером, выход бойцов, плашки на время схватки. Между боями — пауза с логотипом турнира. Сцена меняет только раскладку, пара на экране остаётся та же.

  • Бой №: номер, весовая категория и пара
  • Интро: фото, имена, города и VS
  • Бой: две плашки поверх живой картинки
  • Заставка: пауза на пересменку
Сцена «Бой №01»: номер боя, весовая категория до 70 кг и пара бойцов
Заставка между боями: логотип, название турнира, дата и город
02

Весь эфир на одной странице

Слева пульт, справа окно предпросмотра, под ним кард турнира. Бои перетаскиваются, статусы «текущий» и «следующий» переносятся сами. Клик по карточке только выбирает бой, в эфир выводят кнопки, поэтому случайно сменить картинку нельзя.

Экран и пульт связаны через WebSocket и работают независимо: экран открывается на другом компьютере, телевизоре или в OBS. На самом экране работают горячие клавиши, если пульт недоступен.

Страница «Эфир»: пульт, предпросмотр сцены и кард турнира
03

Плашки поверх живой картинки

Сцена «Бой» рассчитана на то, что за ней идёт видео с камеры. Фон у неё по-настоящему прозрачный, поэтому OBS накладывает плашки без хромакея и зелёных краёв.

Имя всегда в одну строку: длинная фамилия уменьшается, а не переносится. На кадре — запись эфира турнира.

04

Фото кадрируются прямо на сцене

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

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

Редактор бойца: сцена выхода с фото в обоих углах и ползунками масштаба
05

В цифрах

21 ч
прямого эфира на трёх коврах за один день турнира
4
сцены на холсте 1920×1080, который масштабируется под любой экран
2
фото у каждого бойца, для красного и синего угла, с кадрированием
0
хромакея: плашки идут в OBS с настоящим альфа-каналом
Все проекты t.me/kroooot

Нужна игра, бот или сервис? Опишите задачу, отвечу в течение дня.

© 2026 kroooot