Кілька каналів і окремі оверлеї

Розділити чат за платформами за 4 кроки

Приклад: один оверлей показує лише чат Twitch, інший — лише YouTube. Ви й далі читаєте все в одному Dock.

Додайте всі чати до Social Stream Ninja. Перевірте, що по одному новому повідомленню з кожного з'явилося в Док чату трансляції. Залиште цей Dock без фільтрів. Це ваш власний перегляд.
Скопіюйте створене dock.html двічі. Копіювання зберігає сесію, пароль, версію та налаштування сервера.
Додайте фільтр у кінець кожної копії, наприклад &onlyfrom=twitch&hidemenu (див. таблицю нижче).
Додайте кожне посилання до OBS як окреме Джерело браузера (Browser Source). Назвіть їх зрозуміло, наприклад Чат Twitch і Чат YouTube.

Зберігайте кожне накладання у власному вихідному коді браузера OBS. — Кожен оверлей отримує окреме браузерне джерело.

Захоплення Twitch + YouTube
Одна сесія SSN Ваш Dock бачить обидва
Вигляди 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 якщо захоплення його передає. Див. Типи джерел.

Розділити Featured Chat (вибрані повідомлення)

Скопіюйте створене featured.html двічі.
Додайте &onlyfrom=twitch до одного й &onlyfrom=youtube до іншого.
Залиште 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.

Перевірте кожен перегляд

Надішліть штучні повідомлення Twitch і YouTube в тестову сесію. Використовуйте Створюйте тестові повідомлення.
Перевірте, що обидва повідомлення з'явилися в Dock, а кожен оверлей чату показує лише свою платформу.
Виведіть кожне повідомлення, потім очистіть екран. Після зміни платформи перевірте кожну сторінку виділених повідомлень.
Повторіть зі справжнім повідомленням із кожного джерела. Штучні повідомлення не мають справжніх ID вкладок.

Проблема	Що спробувати
Перегляд порожній	Тимчасово приберіть фільтр. Якщо чат повернеться, перевірте точний тип джерела або ID вкладки.
Порожньо навіть без фільтра	Дивіться усунення несправностей сесії та маршрутизації.
Джерело OBS перейменоване, але нічого не змінилося	Перейменування не змінює збережене посилання. Змініть сам URL.

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

Об’єднати оверлеї збирає посилання оверлеїв в одній вкладці чи одному браузерному джерелі OBS. Зручно для читання чату на телефоні під час IRL-трансляції.

Вставте своє Док чату трансляції до нижнього шару.
Вставте своє Блок сповіщень кількох трансляцій до верхнього шару. Зберігайте повні посилання із сесією, паролем і параметрами з'єднання.
Залиште Прозорий фон SSN увімкнено.
Увімкніть Дозволити натискання та прокручування на цьому шарі для чату. Вимкніть для сповіщень, щоб вони не блокували чат.
Преса Попередній перегляд, потім Показати 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. Чат наживо / док	450	1000	0	80
2. Лічильник Hype	450	80	0	0
3. Стіна емодзі / емотів	1920	1080	0	0
4. Featured Chat	1470	1080	450	0
5. NinjaBacker (необов’язково)	1920	1080	0	0

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

Вставте повні посилання оверлеїв. Скопіюйте їх із наявних браузерних джерел, щоб зберегти сесію, пароль, стилі та налаштування з'єднання. Залиште Прозорий фон SSN увімкненим. Обрізання, трансформації, фільтри та власний CSS в OBS не входять у посилання й не переносяться.
Розмістіть Hype по центру колонки. У hype.html використовуйте &align=center. Замініть будь-які align=left або align=right і приберіть alignright. Для компактного вигляду спробуйте &combineall&hidetitle&style=compact&scale=0.75 (замініть наявні значення). Збільште висоту шару Hype, якщо стилю потрібно більше місця.
Розмістіть Featured Chat поруч із колонкою чату. Установіть Зліва = 450 і Ширина = 1470 разом (450 + 1470 = 1920). Зсув шару шириною 1920 праворуч обріже його край. Додайте &center до featured.html щоб центрувати короткі повідомлення в цій області. Для центрування по всій сцені використовуйте відступ зліва 0, ширину 1920 і &center.
Додайте NinjaBacker останнім (необов'язково). Вставте посилання оверлею для глядачів верхнім шаром з анімацією входу справа. Об'єднувач задає область і порядок, а NinjaBacker — власну анімацію. Тло має бути прозорим, сайт має дозволяти вбудовування. Цей шар не входив до перевіреного прикладу.
Попередній перегляд у 1920×1080. Надішліть повідомлення з емодзі, виведіть повідомлення з Dock та ввімкніть дані Hype в SSN. Звичайний чат сам не вибирає виділене повідомлення.
Скопіюйте нове об’єднане посилання в OBS. Задайте браузерному джерелу ширину 1920 і висоту 1080. Розмір попереднього перегляду цього не задає. Упишіть його в сцену без обрізання. Після кожної зміни компонування копіюйте посилання заново: старе зберігає старе компонування.

Перевірений об’єднаний результат: Hype по центру над вузьким лівим стовпцем чату, емодзі по всій сцені й вибране повідомлення внизу праворуч від чату. — Справжня перевірка в Chromium із чотирма оверлеями SSN і тестовим потоком. Зображення прозоре; темне тло додано тут для читабельності. Натисніть для повного розміру. Шрифти й кольори беруться з ваших налаштувань оверлеїв.

Продуктивність: Одне браузерне джерело однаково запускає кожен оверлей усередині. Менше джерел OBS не гарантує меншого навантаження на процесор чи пам'ять. Закрийте попередній перегляд браузера й порівняйте OBS з вимкненими старими джерелами. Продуктивність на Mac M1 і ваше посилання NinjaBacker не перевірені. Можна залишити Live Chat окремо й об'єднати решту.

Якщо шар порожній або закриває чат

Проблема	Що спробувати
Шар порожній	Спочатку відкрийте початкове посилання окремо. Сповіщення порожні до надходження події. Об'єднання не захоплює нічого нового.
У шару непрозоре тло	Автоматична прозорість працює для `dock.html`, `featured.html`, `multi-alerts.html`, і `minecraft.html`. Іншим сторінкам потрібне власне налаштування прозорості. Деякі зовнішні сайти блокують вбудовування.
Не вдається натиснути чи прокрутити чат	Навіть прозорий шар може блокувати натискання. Вимкніть Дозволити натискання та прокручування на шарах над чатом, яким це не потрібно.
На телефоні немає звуку	Телефону може знадобитися натискання для відтворення звуку. Дозвольте натискання для цього шару й натисніть на нього. Перевірте на справжньому телефоні, перш ніж покладатися на це.