:blobcatnerd: Поиск решений В мою оттяпанную жабаскриптом...

:blobcatnerd: Поиск решений

В мою оттяпанную жабаскриптом голову сразу пришла идея: если все эти веб-приложения, Jitsi Meet и PeerTube, открываются в одном браузере, то тут есть перспектива для пользовательского скрипта, который бы их связал вместе. Скрипт - это такая выполняемая программа, которая в ограниченной среде может сделать вещи без необходимости пересобирать сам браузер. Одна из таких вещей на выполнение: да хотя бы изменить оформление Jitsi (удалить пресловутый водяной знак, увеличить текст, прочий лоск). Но скрипт умеет делать и гораздо больше: мои блуждания по свалкам юзерскриптов не прошли задаром.

В теме от @th3rdsergeevich был озвучен и другой вариант: написать всё подчистую на Godot Engine. Здесь опыт можно перенять у разных других стримеров, которые писали собственные оверлеи и снимали через OBS. У меня далеко не светлый опыт с игровыми движками пост-GameMaker уже как 15 лет после создания своей первой игры, и пока я не планирую вскрывать это.

Like 6 December at 15:45 | Open on mastodon.ml

14 comments

Тр3тий Сергеевич

@vint Раз уж меня упомянули... Следует уточнить несколько деталей касательно Jitsi.

У него есть целое API для iframe, позволяющее вшить интерфейс Jitsi Meet в веб-страницу и добавлять/видоизменять его элементы через JS-команды. А ещё есть низкоуровневый API (lib-jitsi-meet), который позволяет подхватывать данные с конференции без привязки к интерфейсу.

Была идея использовать этот API, чтобы "насытить" оверлей на базе Godot. Проблем здесь две:

1) Для работы с JS (а API работает на нём) нужна веб-версия проекта - со всеми вытекающими
2) В сам проект вшить видеопоток с JS не получится, ибо для этого нужен <video>, а интерфейс Godot представляет собой цельный <frame>, отображающий выхлоп от WebAssembly.

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

Надо бы ещё проверить, как сама страница ляжет в качестве слоя в OBS.

@vint Раз уж меня упомянули... Следует уточнить несколько деталей касательно Jitsi.

Expand text...

6 December at 16:55 | Open on mastodon.ml

Тр3тий Сергеевич

@vint Что касается подхвата чата PeerTube, то, думаю, надо покопаться в исходниках плагина чата и посмотреть, какую информацию/события он обнажает, чтобы это можно было отслеживать и ретранслировать - без оглядки на открытую вкладку.

Самое простое решение (к тому же предусмотренное PeerTube) - это вывод "браузера" в слой OBS, где отсвечиваются последние сообщения в чате. Художественное оформление выполняется через CSS.

6 December at 16:55 | Open on mastodon.ml

Тр3тий Сергеевич

@vint Проблема стриминга Jitsi ещё заключается в том, что я через него параллельно взаимодействую с участниками конференции. И скрыть панель управления отдельно для зрителей не представляется возможным.

Одним из вариантов могла бы стать вторая вкладка Jitsi Meet и запущенный из-под нее малоактивный aux-участник, от лица которого и будет вестить запись. Для этой вкладки можно будет включить отдельный CSS. Но в то же время сеть будет принимать в два раза больше медиапотоков (не забываем про первую вкладку).

6 December at 17:06 | Open on mastodon.ml

Винт Прокс

@th3rdsergeevich Очень верное замечание про двойной трафик - итак интернет не к чёрту, а тут ещё удваивать приёмку ради красивостей? Нет уж.

6 December at 17:09 | Open on mastodon.ml

Винт Прокс

@th3rdsergeevich Кстати да, этот плагин сам предоставляет embed-страницу для чата, которую можно показывать через Browser Source в OBS. То бишь эта штука настраивается через OBS и вообще минует захват окна - но это не критично. В случае реализации через отдельную вкладку браузера появляется больше контроля с JavaScript: больше разборчивости в том, какие сообщения показывать. Боюсь представить, через какие грабли нужно прыгать, чтобы ретранслировать чат в движке без использования embed-а (а с интерпретацией embed-а в Godot - ещё больше граблей, наверное).

Expand text...

6 December at 17:08 | Open on mastodon.ml

Тр3тий Сергеевич

@vint embed/iframe фиг туда вошьешь, для этого функционала. Можно, конечно, манипулировать JS-объектами, но если исследуемый фрагмент сложнее текстовой строки, то тогда прощай, удобство, здравствуй, трахание с битовыми массивами.

А твой прикол с вкладками, скорее всего, не сработает. Scopes у них не пересекаются, они друг друга видеть не будут.

6 December at 17:15 | Open on mastodon.ml

Винт Прокс

@th3rdsergeevich Прикол с вкладками как раз я проверил на каком-то старом юзерскрипте. Архитектура такая: есть контент-скрипты, встраиваемые в страницы, но есть и фоновый скрипт. Даже в обход фоновой программы можно связать две вкладки друг с дружкой, наважно какие сайты.

6 December at 17:21 | Open on mastodon.ml

Тр3тий Сергеевич

@vint Опять же, нужен PoC. Речь сейчас не о фоновых скриптах, а о контексте, который они создают. Надо поток выдрать из исходного контекста и вставить в другой.

6 December at 17:44 | Open on mastodon.ml

Винт Прокс

@th3rdsergeevich Ещё сейчас думаю, откуда у меня скепсис с задумкой делать фронт на отдельном движке... Дело в том, что ты обозначил двойными медиапотоками. Нужен медиум на стороне браузера, где открыт Jitsi Meet, чтобы отдавать информацию во фронт (новую вкладку или оверлей на Godot). То есть опять нужен юзерскрипт или веб-расширение, чтобы не повторять затратные сетевые запросы во фронте.

6 December at 17:22 | Open on mastodon.ml

Тр3тий Сергеевич

@vint Грубо говоря, как перенести видеопоток из одного инстанса в другой.

6 December at 17:41 | Open on mastodon.ml

Винт Прокс

:blobcatpiano: Концепт стриминговой доски

Стримеру нужен инструмент, который поможет ретранслировать состояние конференции и чата без проседания трафика, в отдельно отведённую область. Назовём эту область Доской.

Доска выступает неким дашбордом, сводным представлением всей нужной для зрителя информации. Далее Доска ставится на запись через OBS или другую программу прямой трансляции. Зрителю стрима нужно видеть:

- кто участвует в конференции (комнате Jitsi),
- когда и кто говорит,
- демонстрацию 1-2 экранов крупным планом,
- реакции или их эквивалент,
- сообщения из чата.

Такая Доска не отражает манипуляций с интерфейсом Jitsi Meet и PeerTube, что даёт стримеру спокойствие за видео-ряд и не уводит зрителей в зону технических "шоколадок". Открывается полная свобода художественного исполнения, особенно если Доска полностью выносная и у стримера/ассистента есть знания в написании стилей.

:blobcatpiano: Концепт стриминговой доски

Expand text...

6 December at 22:45 | Open on mastodon.ml

Винт Прокс

🏄️ Представляю: #Jetuboard

Чтобы иметь полную картину, оговорюсь сразу, что стриминговая доска может быть нужна не только #РегВыр, но и другим стримерам, которые используют в своём арсенале различные онлайн-сервисы. Это могут быть PeerTube, Jitsi Meet и пр. И вовсе необязательно использовать их вместе, здесь есть потенциал для ремикса: PeerTube чат + статья в режиме чтения ИЛИ вообще Jitsi Meet + Gartic Phone. Это вопрос интеграции и плагинов, если таковые будут.

Но самое, наверное, интересное: было бы хорошо реализовать выше описанный концепт стриминговой доски и добавить полезные для демонстрации вещи. Обычно зрители не могут в параллелизм: надо понимать, что переход по ссылке - это добровольный акт, который может просто и не произойти в 90% случаев. Здесь стример может использовать полный потенциал своего видео-ряда, чтобы раскрыть материал на обозрение. Делать это с большой частотой в OBS может быть накладным...

🏄️ Представляю: #Jetuboard

Expand text...

6 December at 23:04 | Open on mastodon.ml

Винт Прокс

🏄️ #Jetuboard: Губа не дура

После реализации основных функций с интеграцией Jitsi Meet и чата на PeerTube есть такие планы как:

1) Демонстрация изображения по URL или с диска.
2) Демонстрация любого выделенного текста по сигналу стримера.
3) Демонстрация OpenGraph любой ссылки, которую стример кидает в поле, с возможностью менять название и описание под свои нужды.
4) Демонстрация QR-кода ссылки на исходный материал.
5) Демонстрация постов Mastodon и других федивёрс платформ.
6) Демонстрация цитируемых сообщений чата PeerTube или произвольного источника.
7) Сочные реакции.
8) Шаблоны внутренних мемов.
9) Визуализация голосования.

⭐ Исходный код и тикеты будут доступны позже на Codeberg:
https://codeberg.org/vintprox/jetuboard

🏄️ #Jetuboard: Губа не дура

После реализации основных функций с интеграцией Jitsi Meet и чата на PeerTube есть такие планы как:

Expand text...

6 December at 23:22 | Open on mastodon.ml

Винт Прокс

🏄️ #Jetuboard: Много досок

Название Jetuboard происходит от англ. "jetboard"- джетборда, доски для сёрфинга с мотором. Изначально просто хотел соединить: Jitsi + PeerTube + board.

Однако доска, которая отображается зрителю - это никакой вам не джетборд. Это Доска - и всё на этом! Не надо усложнять.

Вот что действительно есть Jetuboard (заметьте: с буквой "u") - это не доска, а прибор для самого стримера, который будет сопровождать его в браузере, куда бы он ни зашёл. Это всё вместе: его мотор, его пульт управления, его собственная доска для выполнения трюков. Реализация Jetuboard - в виде панели, которая витает над просматриваемыми страницами, за исключением Доски зрителя. В отдельных случаях Джетуборд можно скрыть и пользоваться функциями через контекстное меню или всплывающее окошко вверху справа. Джетуборд будет предоставлять стримеру сподручные кнопки и поля для полного набора демонстрации: редактор отображаемого материала, вставка ссылок, прочие демо-сигналы.

🏄️ #Jetuboard: Много досок

Expand text...

6 December at 23:37 | Open on mastodon.ml