Несколько каналов и отдельные оверлеи

Читайте все чаты в одной док-панели и выбирайте, какие платформы показывать в каждом зрительском оверлее.

Разделить чат по платформам за 4 шага

Пример: один оверлей показывает только чат Twitch, другой — только YouTube. Вы по-прежнему читаете всё в одном Dock.

  1. Добавьте все чаты в Social Stream Ninja. Проверьте, что по одному новому сообщению из каждого появилось в Док-панель чата трансляции. Оставьте этот Dock без фильтров. Это ваше собственное представление.
  2. Скопируйте созданную dock.html дважды. Копирование сохраняет сессию, пароль, версию и настройки сервера.
  3. Добавьте фильтр в конец каждой копии, например &onlyfrom=twitch&hidemenu (см. таблицу ниже).
  4. Добавьте каждую ссылку в OBS как отдельный Источник «Браузер». Назовите их понятно, например Чат Twitch и Чат YouTube.
Храните каждое наложение в отдельном исходном браузере OBS.
Каждый оверлей получает отдельный браузерный источник.
  1. Захват Twitch + YouTube
  2. Один сеанс SSN Ваш Dock видит оба
  3. Представления OBS Только Twitch и только YouTube
Один поток данных может питать несколько отфильтрованных представлений.

Параметры фильтрации оверлеев чата

Хочу показать… Добавьте к ссылке Dock
Только Twitch&onlyfrom=twitch&hidemenu
Только YouTube&onlyfrom=youtube&hidemenu
Twitch и YouTube вместе&onlyfrom=twitch,youtube&hidemenu
Всё, кроме Discord&hidefrom=discord&hidemenu

Полный пример:

https://socialstream.ninja/dock.html?session=YOUR_SESSION_ID&onlyfrom=twitch&hidemenu
Используйте onlyfrom и hidefrom здесь. Параметры других оверлеев, например onlytype, могут не работать на этой странице. YouTube Shorts — отдельный тип: добавьте youtubeshorts если захват его передаёт. См. Типы источников.
  1. Скопируйте созданную featured.html дважды.
  2. Добавить &onlyfrom=twitch к одной и &onlyfrom=youtube к другой.
  3. Оставьте Dock открытым для выбора сообщений.
Featured Chat принимает одну платформу на ссылку. Список через запятую (twitch,youtube) работает только в Dock.

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

Два канала одной платформы

onlyfrom=twitch означает весь Twitch, а не один канал. Названия каналов и трансляций нельзя использовать как имена фильтров.

Я хочу…Что сделать
Показывать канал каждого сообщенияДобавить &showchannelname (работает, если источник передаёт название канала).
Вести две полностью отдельные трансляцииИспользуйте отдельные экземпляры захвата или профили, каждый со своей сессией и только своими источниками.
Фильтровать Dock по вкладке браузера&filtertid=123 (расширенная настройка, см. ниже).
Оверлей с другой сессией без соответствующего захвата останется пустым. Параметр оверлея label задаёт имя страницы для маршрутизации; это не фильтр каналов.
Как filtertid работает
  • Принимает числовой ID вкладки браузера, откуда пришло сообщение. Несколько ID разделяйте запятыми.
  • Найдите tid в реальных захваченных данных. См. Справочник событий и Команды и API.
  • Это не ID канала платформы.
  • ID вкладок могут меняться при повторном открытии источника. Источники без совпадающего ID вкладки могут скрываться.
  • Работает только в Dock, а не как фильтр каналов Featured Chat.

Проверьте каждое представление

  1. Отправьте искусственные сообщения Twitch и YouTube в тестовую сессию. Используйте Создавайте тестовые сообщения.
  2. Проверьте, что оба сообщения появились в Dock, а каждый оверлей чата показывает только свою платформу.
  3. Выведите каждое сообщение, затем очистите экран. После смены платформы проверьте каждую страницу выделенных сообщений.
  4. Повторите с настоящим сообщением из каждого источника. У искусственных сообщений нет реальных ID вкладок.
ПроблемаЧто попробовать
Представление пустоеВременно уберите фильтр. Если чат вернётся, проверьте точный тип источника или ID вкладки.
Пусто даже без фильтраСм. устранение неполадок сеанса и маршрутизации.
Источник OBS переименован, но ничего не изменилосьПереименование не меняет сохранённую ссылку. Измените сам URL.

Чат и оповещения в одной вкладке браузера

Объединить оверлеи собирает ссылки оверлеев в одной вкладке или одном браузерном источнике OBS. Удобно для чтения чата на телефоне во время IRL-трансляции.

  1. Вставьте свою Док-панель чата трансляции в нижний слой.
  2. Вставьте свою Блок оповещений нескольких трансляций в верхний слой. Сохраняйте полные ссылки с сессией, паролем и параметрами соединения.
  3. Оставьте Прозрачный фон SSN включённым.
  4. Включите Разрешить нажатия и прокрутку на этом слое для чата. Выключите для оповещений, чтобы они не блокировали чат.
  5. Нажмите Предпросмотр, затем Показать QR-код и отсканируйте телефоном. Или нажмите Скопировать объединённую ссылку для вставки в браузерный источник.

В объединённом представлении нет настроек. Оно только показывает оверлеи.

Параметры слоя

Я хочу…Что сделать
Добавить ещё оверлеиДо восьми ссылок.
Переместить слой вперёд или назадИспользуйте кнопки со стрелками.
Изменить размер или положение слояОткрыть Размер и положение. Задайте ширину, высоту и отступы слева и сверху в пикселях (450) или процентах (100%).
Снова сделать слой полноэкраннымВернуть полноэкранный размер. Пустые ширина и высота заполняют браузер; пустые отступы слева и сверху задают начало в левом верхнем углу.
Создать колонку чата слева (1920×1080)Слой чата: ширина 450, высота 1080, слева 0, сверху 0. Остальные слои остаются полноэкранными.
Изменить объединённую ссылку позжеИспользуйте редактируемую ссылку или добавьте ?edit=1 перед #.
Начать зановоОчистить сохранённую настройку.

Размеры в пикселях не меняются при изменении окна браузера. Проценты подстраиваются. Каждый оверлей сохраняет свои содержимое и настройки.

Сохранение, телефоны и конфиденциальность
  • Ссылки и параметры слоёв автоматически сохраняются в этом браузере, даже незавершённые. Приватный режим может их не сохранить.
  • Объединённая ссылка и QR-код содержат всю компоновку. Настройте на компьютере, отсканируйте один раз и добавьте в закладки на телефоне. При открытии конфигурация также сохраняется в браузере телефона.
  • Изменения на компьютере не обновляют старую ссылку. После редактирования скопируйте или отсканируйте новую. Через ID сессии ничего не синхронизируется.
  • Храните объединённые ссылки и QR-коды в тайне, как и ссылки оверлеев.
  • Захват SSN должен продолжать работать, а телефон должен иметь доступ к тем же серверам, что и исходные ссылки. localhost или 127.0.0.1 означает сам телефон.
  • Очень длинные ссылки могут не поместиться в QR-код. Ссылку всё равно можно скопировать.

Рецепт OBS: колонка чата слева с полноэкранными эффектами

CSS не нужен. У каждого слоя своя область. Задайте браузерному источнику OBS размер 1920×1080. Добавляйте слои снизу вверх и вводите только числа (без запятых и «px») в разделе каждого слоя: Размер и положение.

СлойШиринаВысотаСлеваСверху
1. Чат прямого эфира / док-панель4501000080
2. Счётчик Hype4508000
3. Стена эмодзи и эмотов1920108000
4. Выбранные сообщения147010804500
5. NinjaBacker (необязательно)1920108000

Верхние 80 пикселей занимает Hype, ниже — колонка чата. Нужен чат на всю высоту за Hype? Задайте высоту Live Chat 1080 , а верхний отступ — 0. Для других размеров сцены нужны другие числа.

  1. Вставьте полные ссылки оверлеев. Скопируйте их из существующих браузерных источников, чтобы сохранить сессию, пароль, стили и настройки соединения. Оставьте Прозрачный фон SSN включённым. Обрезка, трансформации, фильтры и собственный CSS в OBS не входят в ссылку и не переносятся.
  2. Разместите Hype по центру колонки. В hype.html используйте &align=center. Замените любые align=left или align=right и удалите alignright. Для компактного вида попробуйте &combineall&hidetitle&style=compact&scale=0.75 (замените имеющиеся значения). Увеличьте высоту слоя Hype, если стилю нужно больше места.
  3. Расположите Featured Chat рядом с колонкой чата. Установите Слева = 450 и Ширина = 1470 вместе (450 + 1470 = 1920). Сдвиг слоя шириной 1920 вправо обрежет его край. Добавьте &center на featured.html чтобы центрировать короткие сообщения в этой области. Для центрирования по всей сцене используйте отступ слева 0, ширину 1920 и &center.
  4. Добавьте NinjaBacker последним (необязательно). Вставьте ссылку оверлея для зрителей верхним слоем с анимацией входа справа. Объединитель задаёт область и порядок, а NinjaBacker — свою анимацию. Фон должен быть прозрачным, сайт должен разрешать встраивание. Этот слой не входил в проверенный пример.
  5. Предпросмотр в 1920×1080. Отправьте сообщение с эмодзи, выведите сообщение из Dock и включите данные Hype в SSN. Обычный чат сам не выбирает выделенное сообщение.
  6. Скопируйте новую объединённую ссылку в OBS. Задайте браузерному источнику ширину 1920 и высоту 1080. Размер предпросмотра этого не задаёт. Впишите его в сцену без обрезки. После каждого изменения компоновки копируйте ссылку заново: старая сохраняет старую компоновку.
Проверенный объединённый результат: Hype по центру над узкой левой колонкой чата, эмодзи по всей сцене и выбранное сообщение внизу справа от чата.
Реальная проверка в Chromium с четырьмя оверлеями SSN и тестовым потоком. Изображение прозрачное; тёмный фон добавлен здесь для читаемости. Нажмите для полного размера. Шрифты и цвета берутся из ваших настроек оверлеев.
Производительность: Один браузерный источник всё равно запускает каждый оверлей внутри. Меньше источников OBS не гарантирует меньшую нагрузку на процессор или память. Закройте предпросмотр браузера и сравните OBS с отключёнными старыми источниками. Производительность на Mac M1 и ваша ссылка NinjaBacker не проверены. Можно оставить Live Chat отдельно и объединить остальное.

Если слой пуст или закрывает чат

ПроблемаЧто попробовать
Слой пустойСначала откройте исходную ссылку отдельно. Оповещения пусты до поступления события. Объединение не захватывает ничего нового.
У слоя непрозрачный фонАвтоматическая прозрачность работает для dock.html, featured.html, multi-alerts.html, и minecraft.html. Другим страницам нужна собственная настройка прозрачности. Некоторые внешние сайты блокируют встраивание.
Не удаётся нажать или прокрутить чатДаже прозрачный слой может блокировать нажатия. Выключите Разрешить нажатия и прокрутку на слоях над чатом, которым это не нужно.
На телефоне нет звукаТелефону может потребоваться нажатие для воспроизведения звука. Разрешите нажатия для этого слоя и нажмите на него. Проверьте на реальном телефоне, прежде чем полагаться на это.