Сцена эфира

До сих пор кадр был один и всегда во весь экран: что отдал телефон, то и уехало на площадки. Сцена делает кадр явным — теперь можно положить камеру ноутбука врезкой поверх телефона, обрезать лишнее по краям и собрать вертикальный кадр для площадок, которым нужна вертикаль.

Сцена живёт во вкладке Stream — рельсом Сцена слева, рядом с кадром.

Студия: кадр в центре, чат сбоку

Вкладка Stream собрана как привычный пульт трансляции:

• слева — Сцена: список сцен, слои этой сцены и одна кнопка «+»;
• в центре — Кадр: большое окно приёма, и одновременно рабочий стол — слои двигаются прямо по картинке, которую увидит зритель;
• под кадром — пульт: «В эфир», «Запись»;
• справа — Чат и Досье фана.

Каждый блок можно открепить (иконка в его шапке) — он поплывёт поверх всего, его можно таскать за шапку и тянуть за угол. Раскладка запоминается. Кнопка «собрать студию» в правом нижнем углу возвращает всё по местам.

Пока идёт раздача, кадр обведён красным, а рамки слоёв гаснут до тонкого контура: смотреть нужно на картинку, а не на разметку.

Настройка слоя занимает правую часть

Клик по строке слоя (или двойной клик по нему на кадре) переводит студию в режим правки: место чата, досье и пульта занимает панель настроек.

• «Сохранить» — применить сцену и выйти;
• «Выйти» — закрыть настройки, правка останется черновиком.

Настройки разложены по двум местам, и это разделение по вопросу:

• справа — что показываем: текст, файл, карточки колоды, подписи кнопки;
• снизу, во всю ширину, — как это выглядит и как себя ведёт: оформление, движение, «как часто появляется», прозрачность, вписка, кадрирование, стиль объекта.

Так сделано не ради красоты. У объектов лендинга настроек столько же, сколько в конструкторе (стиль, градиент, тень, поворот), и в узкую колонку они не помещаются: страница от них вытягивалась и прыгала под курсором. Теперь студия занимает ровно экран, а прокрутка есть у каждого блока своя.

Разделы нижней полосы зависят от вида слоя — показываем только то, что этому слою правда доступно. У камеры, например, нет «оформления»: у видеопотока нет ни цвета букв, ни подложки, и красить в нём нечего.

Слои на кадре

• тяни прямоугольник — переставить;
• тяни за угол или край — размер;
• список слева — порядок: кто выше в списке, тот выше в кадре.

Врезка: камера поверх телефона

Адрес для энкодера (RTMP)

Второй источник — «RTMP»: телефон с Moblin, OBS, Larix, любой энкодер. Выбери его в том же слое «Живой источник», и под кадром откроется адрес с ключом — там, где у других слоёв оформление. Скопировала строку в приложение — и всё.

Адрес постоянный: сменится бокс приёма — строка в телефоне останется прежней. Меняется только ключ, и только когда ты сама его сменишь.

Источник «Кто в кадре» — особый: это тот поток, который прямо сейчас идёт на площадки. Он остаётся правильным, когда ты сегодня вышла с телефона, а завтра с камеры, — ничего перенастраивать не нужно.

Картинка и видео в кадре

В сцену кладётся не только живой источник. Кнопки «Картинка» и «Видео» берут файл из «Галереи медиа» (раздел Дизайн → Галерея медиа) — той же библиотеки, из которой ты выбираешь тизеры для лендинга. Залила один раз — используешь и там, и в эфире.

Что с этим делают чаще всего:

• логотип или рамка — картинка с прозрачным фоном в углу кадра. Прозрачность сохраняется: PNG ложится поверх видео без чёрного прямоугольника;
• заглушка «сейчас вернусь» — картинка или короткое видео во весь кадр. Эфир при этом не прерывается: звук продолжает идти живой, а зритель видит заставку. Убрала слой — вернулась картинка.

Видео в слое всегда без звука и по кругу: звук в эфире — это живой источник, а два звука одновременно означали бы, что зритель не слышит ни одного.

Надпись и таймер

Кнопка «Текст и таймер» — живая строка прямо в кадре: имя, правила, цель, «скоро вернусь». В инспекторе — сама строка, цвет, плашка за текстом и время:

• «Сколько идёт эфир» — счётчик вверх;
• «Обратный отсчёт» — от заданных минут и секунд до нуля (ниже нуля не уходит).

Метка {таймер} задаёт место времени в строке: До шоу {таймер} осталось. Не поставила метку — время допишется в конец.

Надпись видно прямо на схеме кадра — тем же кеглем и цветом, каким она уйдёт в эфир. Подбирать размер вслепую не нужно.

Что можно положить в кадр

Кнопка «+» — единственная точка входа, за ней выпадающий список:

Объекты лендинга в кадре

У тизера, колоды и уведомления — вся стилевая шапка конструктора: заливка и градиент, прозрачность, скругление, рамка, тень, поворот, размытие подложки. Правит их тот же инспектор, что на канве лендинга.

Колода в кадре листается сама. Прокрутки у зрителя нет, поэтому вместо «прилипания» и «корешков» у неё одна ручка — секунд на карточку.

Уведомление вылезает слева, держится и уходит, и так по кругу. Звука и перехода в кадре нет: наложение не кликается.

Как это попадает в видео. Объекты выпекаются в прозрачную картинку и ложатся поверх кадра. Поэтому:

• правки видны в панели сразу, а в эфире — после «Применить»;
• времени в объектах нет: тикающий таймер — это отдельный слой «Текст и таймер», он живой;
• движение (колода, уведомление) собирается лупом: сначала в эфир идёт неподвижный кадр, а через минуту-другую его сменяет движущийся — сборка лупа занимает десятки секунд и идёт фоном;
• видео-объекта нет: выпеченный ролик был бы стоп-кадром. Для живого видео есть слой «Видео».

Кадрирование

В нижней полосе, раздел «Кадр слоя» — «Кадрировать источник»: четыре поля в процентах от исходной картинки. Так убираются лишние края и так же делается «поближе». Там же — прозрачность слоя и вписка.

Проценты, а не пиксели, намеренно: телефон может отдать 720p вместо 1080p, и кадрирование в процентах от этого не поедет.

Свои слои на каждую площадку

Вверху рельса — список сцен: «Общая» и по одной на каждую вооружённую площадку. На кам-сайте нельзя то, что можно у себя, поэтому это разные наборы слоёв, а не один с оговорками.

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

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

В списке сцен видны и выключенные площадки — с пометкой «выкл». Иначе их слои были бы недосягаемы: ни посмотреть, ни очистить, — а при включении площадки они въехали бы в кадр как есть.

Цена честная: пустая площадочная сцена ничего не меняет (площадка получает побайтовую копию), а непустая включает пережатие только у неё — плашка так и говорит: «Площадка пережимается».

Вертикальный кадр под площадку

Раскладку задают в настройках самой площадки (карточка «Куда вещаем»), и только там, где вертикаль родная: TikTok, Instagram Live, Telegram. У кам-сайтов и подписочных площадок комната горизонтальная — 9:16 дал бы им чёрные поля по бокам за отдельное кодирование, поэтому сервер такой выбор отклоняет.

Как только вертикаль появилась хотя бы у одной площадки, в списке сцен добавится «Общая 9:16» — отдельная сцена, а не обрезок широкой. Две вертикальные площадки делят её на двоих.

Кто в кадре, когда живы оба источника

Пилюли «В кадре: Решай сам · Приложение · Камера» появляются в пульте ровно тогда, когда одновременно вещают и приложение, и камера браузера. Один источник — выбирать нечего, и пилюль нет.

• Решай сам (по умолчанию) — кто публикует, тот и в кадре.
• Приложение / Камера — жёсткий выбор: этот источник идёт на площадки, даже если рядом вещает второй.

Выбор один на эфир, а не на площадку: два источника одновременно означали бы два разных эфира. И он же решает, чей ЗВУК уйдёт зрителю — поэтому «почему меня не слышно» лечится здесь, а не выключением одного из источников наугад.

Онлайн: сколько смотрят прямо сейчас

Слой «Онлайн» — обычная строка с меткой {онлайн}, число подставляет сервер на каждой сверке. Метку можно дописать в любой текст: Смотрят {онлайн}.

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

Число складывается честно:

• где площадка сама отдаёт количество зрителей — берём её число (сегодня так умеет Chaturbate);
• где нет — считаем уникальных, кого видели в чате за последние пять минут. Это заведомо меньше настоящего онлайна: молчащих в чате не видно.

В карточке «Эфир сейчас» видно разбивку по площадкам и откуда взято каждое число. Своих реплик в счёт не берём — иначе можно было бы накрутить себе онлайн, просто печатая в чат.

Оформление и движение слоёв

Под кадром, во всю ширину студии, лежит полоса «Оформление · Движение» — она появляется, когда открыта настройка слоя.

Оформление — четыре готовых вида: Стекло, Неон, Плотный, Без подложки. Клик перекрашивает выбранный слой; галочка «ко всем слоям сцены» разносит вид по всей сцене — чтобы кадр читался как одно целое. Пресет не «запоминается»: он просто выставляет те же поля, которые дальше можно править руками.

Движение — как слой живёт в кадре:

Ползунок «Цикл» задаёт длительность полного круга (1–20 секунд).

Оформление букв: объём, неон, блик

У слоя «Текст и таймер» в той же нижней полосе есть раздел «Оформление букв» — пять видов и отдельная галочка блика:

Галочка «блик пробегает по буквам» добавляет светлую полосу, которая раз в три секунды проходит по надписи. Она комбинируется с любым видом: «объём + блик» — самое частое сочетание.

Тень объёма берётся от цвета самих букв, а не чёрная: под цветной надписью чёрная тень выглядит грязью. Всё это работает вместе с движением и расписанием — блик гаснет вместе с надписью.

Как часто слой появляется

Раздел «Появление» в той же нижней полосе. По умолчанию слой висит в кадре весь эфир; галочка «появляется по расписанию» включает два ползунка:

• «Каждые …» — период, от 5 секунд до 10 минут;
• «Держится …» — сколько слой виден внутри периода.

Так делается «уведомление вылезает раз в минуту», «баннер со ссылкой показывается на 10 секунд каждые три минуты» и вообще любая реклама, которая не должна висеть всё время. В списке слоёв у такого слоя появляется подпись вида «6 с каждые 30 с» — иначе он выглядел бы пропавшим из кадра.

Свой кадр видно ДО эфира

Камеру браузера видно в большом кадре сразу, как только она включена, — ещё до того, как что-то куда-то поехало. Кадр подписан жёлтым чипом «локально»: это видит только модель, на бокс поток пока не уходит. Раздачу по-прежнему включает пульт.

Когда приём начался, локальный кадр уходит и играет то, что реально пришло на бокс, — иначе на экране было бы два кадра с секундой разницы.

Если кадра нет вовсе, подсказка зависит от сцены: камера в сцене — «включи камеру в настройке слоя», RTMP — «запусти трансляцию в приложении», пусто — «добавь живой источник».

Сохранённой камеры на этой машине может не быть — вебку отключили, села за другой ноутбук. Тогда мы берём то устройство, которое есть, стираем мёртвый выбор и говорим об этом жёлтой строкой. Рядом есть «забыть устройство»: вернуться к «как решит браузер» можно и без этого случая.

Удалили слой камеры — камера выключается. Лампочка на ноутбуке гаснет вместе со слоем, отдельной кнопки для этого не нужно. В эфире — иначе: пока правка не применена, живая врезка не гаснет (случайный клик не должен обрывать эфир), и камера отпускается по «Применить». Переключение вкладок сцены (площадка, вертикальный кадр) камеру не трогает вовсе.

Окно превью: задержка меньше секунды

Кадр в центре студии играет по WebRTC — так же, как работает видеозвонок: задержка доли секунды, поправила свет и сразу видишь результат.

Если у сети не получается прямое соединение (бывает в корпоративных и части мобильных сетей), окно само переключается на запасной путь и пишет об этом чипом «запасной путь». Там задержка уже в несколько секунд — это не поломка, а плата за обходную дорогу.

В пульте под кадром об этом написано прямо: «до площадки <1 с · зритель +5–30 с». Первое число — наше, замеренное на боксе; второе — буфер площадки.

Шесть площадок стоят столько же, сколько одна. Кадр собирается один раз, а дальше раздаётся побайтовой копией — замер на шести целях дал ту же задержку, что и на одной.

Что происходит при «Применить»

Кадр собирается один раз и раздаётся всем площадкам этой раскладки. Поэтому пять площадок стоят не дороже одной, а вот пересборка кадра видна зрителю как короткий рывок.

Из-за этого правки не сохраняются сами: собери сцену целиком и нажми «Применить» один раз. Пока не нажала — эфир идёт по прежней сцене, а рядом с кнопкой честно написано «не применено».

Если в момент сохранения сигнала нет, панель скажет «Применится, когда пойдёт сигнал». Сцена уже сохранена — она поедет с ближайшей публикацией.

Плашка «Кадр пересобирается» / «Без пережатия»

Вверху панели — честный ответ на вопрос «а картинка не испортится?»:

• Без пережатия (зелёная) — сцена ничего не меняет, эфир копируется байт в байт;
• Кадр пересобирается (жёлтая) — мы декодируем и кодируем кадр на сервере. Так работают врезка, кадрирование и вертикаль — иначе их не собрать вовсе.

Чего сцена пока не умеет

• страниц-виджетов по ссылке (алерт о типсе, счётчик цели, бегущая строка) — это следующий шаг;
• звука из врезки и из видео-слоя — звук всегда идёт из того источника, который «в кадре»;
• собственных анимаций конструктора: «пульс» кнопки лендинга в эфир не переезжает — движение слоя задаётся полосой «Оформление · Движение», и набор там свой;
• длинных видео: слой берёт первые 12 секунд и крутит их по кругу.

Надписи и виджеты чата пока живут в своём редакторе — оверлеи. Они кладутся поверх собранного кадра, так что сцена их не ломает.