Титры без лишней магии.

Эфирные титры и анимированная графика на веб-технологиях. Открытая замена GT от vMix, построенная на NodeCG. Панель ниже работает: щёлкните переключателем, поменяйте имя.

Установить notGT Исходники на GitHub

Живая демонстрация: панель Control и out

В эфире ничего нет

Main

1920×1080

Данные

speaker
match
poll

GT зачёркнут, значит заменён.

notGT делает работу редактора титров и их проигрывателя. Три вещи с собой не взяли.

  • Редактор под Windows

    Редактор — вкладка браузера на любой машине в сети.

  • Покупка лицензии

    MIT, как у NodeCG. Исходники можно читать и менять.

  • Свой формат файлов

    Титр — это веб-страница. Всё, что умеет веб, умеет титр.

Нарисуйте. Или напишите.

Editor
Editor: out как холст, четыре титра в эфире обведены жёлтым, слева список слоёв, справа свойства размещения
Визуальный редактор. Холст — это сам out. Текст, фигуры, картинки, GIF и видео с альфой — слои, которые двигают, масштабируют и обрезают, с магнитами к центру, краям, безопасной зоне и друг к другу.
lower-third.js
// Данные только раскладывают текст, поэтому опечатка,
// исправленная в эфире, не проигрывает появление заново.
onData(() => {
  $("name").textContent = vars("speaker.name", "First Last");
  $("role").textContent = vars("speaker.role", "Role");
});

onShow(() => {
  plate.animate(WIPE_IN, { duration: 520, easing: OUT });
});

// Уход занимает EXIT мс. notGT читает это число здесь и начинает
// уход настолько раньше, чем закончится показ.
const EXIT = 480;

onHide(() => {
  plate.animate(WIPE_OUT, { duration: EXIT, fill: "forwards" });
}, EXIT);
Титры кодом. Анимация может быть написана на HTML, CSS и JavaScript с небольшим рантаймом (vars, onData, onShow, onHide) и живым превью рядом с кодом. Или лежать файлом в каталоге, если удобнее писать в своём редакторе.
Видео с альфой
Бросьте в редактор ролик ProRes или HEVC с прозрачностью — он конвертируется через ffmpeg в то, что умеет проигрывать браузер.
Одиннадцать титров для старта
Плашки с именем, счёт матча, гость из списка, тема выпуска, логотип, опрос, бегущая строка, обратный отсчёт, часы и карточка погоды — в одном стиле.
Или попросите модель
В репозитории лежит промпт, который уже знает контракт рантайма. Опишите титр — получите html, css и js анимации на коде.

Меняйте значение, а не титр.

Имена, счёт и подписи живут в одном хранилище данных. Меняете значение — оно меняется в эфире, не проигрывая появление заново. Выбираете строку списка — в эфир идёт этот гость.

guests список
Excel как данные
Бросьте книгу на панель Data или следите за книгой на сервере. Каждый лист становится списком, файл перечитывается при сохранении, а правка в дашборде записывается обратно в него.
По времени или до выключения
Титр проигрывается один раз и уходит сам либо стоит, пока его не выключат. Таймеры идут на сервере, поэтому все out'ы и все дашборды согласованы.
Сколько угодно out'ов
Каждый out — одна прозрачная страница своего размера и один Browser Source. Что и на каком out'е сейчас в эфире, всегда видно — жёлтым Lemon.

В одном запросе от эфира.

Всё, что делает дашборд, может сделать скрипт: показать, убрать, переключить и проиграть титр, записать переменные, управлять out'ами и библиотекой.

# показать титр
curl -X POST http://localhost:9090/api/titles/lower-third/show

# поменять текст, пока он в эфире
curl -X POST 'http://localhost:9090/api/data?mode=merge' \
     -H 'content-type: application/json' \
     -d '{"speaker": {"name": "Anna Reed", "role": "Expert"}}'

# проиграть один раз: уйдёт сам
curl -X POST http://localhost:9090/api/titles/lower-third/trigger

# убрать
curl -X POST http://localhost:9090/api/titles/hide
ДашбордControl, Titles & Outs, Editor
репликанты
Companion, скрипты, curlкнопки и автоматика
HTTP, WebSocket
Расширение notGTсостояние, таймеры, API
репликанты
Страница outout.html?out=main
Browser Source
OBS, vMixили что угодно, что показывает веб-страницу
Расширение держит состояние, ведёт таймеры и отвечает на API. Страница out только рисует то, что ей сказано, — поэтому Editor показывает эфир, просто встраивая эту же страницу.

Настоящий дашборд за 22 секунды.

Вход по паролю
Панель спрашивает имя и пароль, и API не открыт всей сети. Для закрытой сети площадки вход можно выключить.
Команда
Администратор добавляет пользователей и распределяет их по группам: VJ, стример 1, стример 2. У группы свои out'ы и свои ключи WebSocket, а у каждого out'а одна ссылка для OBS, которая открывает только его.
Читается как удобно
Интерфейс на английском и русском, в тёмной и светлой теме.

В эфир за три шага.

  1. Запустите сервер

    git clone https://github.com/fursyt12/notGT.git
cd notGT
docker compose up --build -d

    Откройте http://localhost:9090/dashboard/ и войдите как admin / admin. Сразу смените пароль во вкладке «Команда». Ни обратный прокси, ни .env не нужны.

  2. Добавьте out в OBS или vMix

    Browser Source в OBS или вход Web Browser в vMix, по размеру out'а.

    http://<host>:9090/bundles/notGT/graphics/out.html?out=main

  3. Покажите титр

    Из панели Control, с кнопки Companion или откуда угодно ещё.

    curl -X POST http://localhost:9090/api/titles/lower-third/show