Брендирование конференций TrueConf Server

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

Брендирование подложки приложения

Вы можете брендировать фон, отображаемый в клиентском приложении для ПК во время проведения конференции или звонка. Для этого перейдите в Настройки → Оформление → Фон видеообласти.

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

Брендирование страниц конференций и гостевой

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

Простой способ – смена логотипа компании

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

Сложный способ – полное брендирование веб-страниц

Чтобы не делать изменений сразу в файлах используемого (“боевого”) сервера видеосвязи советуем использовать расширение для вашего браузера, позволяющее встраивать пользовательские стили в веб-страницы, например, User CSS для Google Chrome.

Введение

Как правильно найти нужный элемент:

1. 1. Откройте страницу вашего сервера.
   2. Нажмите ПКМ по элементу, который хотите изменить, и выберите Посмотреть код.
   3. У вас откроются инструменты разработчика с HTML структурой, где сразу будет выбран ваш элемент, и CSS стилями.
   4. Наведите курсором мыши на какой-то HTML тег и вы увидите, что на веб-странице соответствующий блок стал выделяться рамкой и подсвечиваться цветом.
      

Для изменения элемента нужно использовать соответствующие ему CSS-селекторы: названия классов, тегов и пр. Например для тега div, выделенного на изображении выше, название класса равно router-container main-background. Далее мы будем использовать эти значения для кастомизации страницы. Чтобы понять как работать с User CSS, разберем простой пример изменения цвета надписи Добро пожаловать на гостевую страницу сервера видеоконференций:

1. Откройте User CSS.
2. В открывшиеся окно вставьте код:
   
   CSS

   .main-screen__header__desc{ color: yellow; }

   1 2 3

   .main-screen__header__desc{ color: yellow; }

Цвет текста изменился на желтый:

Далее рассмотрим изменение других HTML-тегов.

Замена фона страницы

Чтобы изменить фон страницы, для CSS класса main-background измените значение background-image:

где {img-in-base64} — закодированное изображение в формате base64, например, при помощи онлайн конвертера base64-image.de. Такой подход используется для ускорения загрузки страницы не перегружая её запросами к серверу. После конвертирования изображения в base64-image.de нажмите кнопку copy css:

и вставьте скопированный текст вместо url{img-in-base64}:

Скрытие информации

Скрытие блоков

Для скрытия блока в его CSS селектор нужно добавить правило visibility:hidden;. В этом случае элемент становится полностью прозрачным, но для него продолжает выделяться место на странице. Например, для полного скрытия футера добавьте в User CSS новое правило:

Отключение блоков

Для отключения ненужного блока в CSS селектор укажите правило display:none;. Например, для полного отключения футера добавьте в User CSS новое правило:

В этом случае блок не будет участвовать в построении страницы и под него не будет выделяться место:

Чтобы не скрывать весь футер, вы можете отключить только какой-то блок информации. Т.к. строки в футере имеют одинаковые теги и классы, то для определения нужной применим параметр nth-child(n), где n – порядковый номер блока. Например, чтобы скрыть номер версии сервера, используйте правило:

Применение изменений на сервере

После того, как вы проверили корректность CSS-правил в расширении User CSS, вам нужно добавить их в HTML-файлы, отвечающие за построение веб-страниц TrueConf Server. Мы будем использовать способ с подключением глобальных CSS стилей. Для этого:

1. Создайте файл my-styles.css.
2. Скопируйте правила, которые вы указали в User CSS, и вставьте в файл my-styles.css
3. Откройте любым текстовым редактором, например, Notepad++ или VS Code, файл (в зависимости от ОС, на которой установлен TrueConf Server):
   • Windows:
     C:\Program Files\TrueConf Server\httpconf\site\ui\user-area\dist\index.html
   • Linux:
     /opt/trueconf/server/srv/site/ui/user-area/dist/index.html
4. В конец тега head добавьте <link rel="stylesheet" href="/user-area/my-styles.css">:
   
   <head> <title>TrueConf Server Guest Page</title> <meta charset="utf-8"> <meta name="viewport" <link rel="manifest" href="/user-area/manifest.json" /> ... Некоторое количество тегов ... <link rel="stylesheet" href="/user-area/my-styles.css" /> </head>

   1 2 3 4 5 6 7 8 9 10

   <head> <title>TrueConf Server Guest Page</title> <meta charset="utf-8"> <meta name="viewport" <link rel="manifest" href="/user-area/manifest.json" /> ... Некоторое количество тегов ... <link rel="stylesheet" href="/user-area/my-styles.css" /> </head>

Таким образом можно полностью брендировать гостевую страницу и страницу подключения к конференции:

До:

После:

Брендирование окна конференции WebRTC

Настоятельно вам рекомендуем ознакомиться с вводным разделом, если вдруг вы его пропустили.

Фон веб-страницы

Для замены фона:

1. Подготовьте подходящее изображение в формате: .png, 5292*2982 и глубиной цвета равной 2. Это нужно, чтобы изображение корректно открывалось на различных экранах и имело небольшой объем.
2. Скопируйте изображение в папку по пути:
   • Windows:
     
     C:\Program Files\TrueConf Server\httpconf\site\ui\webrtc\dist\images

     1	C:\Program Files\TrueConf Server\httpconf\site\ui\webrtc\dist\images

   • Linux:
     
     /opt/trueconf/server/srv/site/ui/webrtc/dist/images

     1	/opt/trueconf/server/srv/site/ui/webrtc/dist/images

3. Сделайте бэкап оригинального изображения.
4. Переименуйте ваше изображение так, чтобы его имя совпадало с именем оригинального файла.
5. Если фон не обновился, то дополнительно перезагрузите службу TrueConf Web Manager.

Конечно, чтобы брендирование было законченным, вам потребуется изменить цвета всех окон, например, фон окна для ввода PIN-кода конференции.

Также вы можете изменить фон страницы используя CSS правило как было описано выше, но с добавлением !important:

Фон раскладки

Фон под видео (подложка) отображается только при наличии выступающих на трибуне. Для брендирования подложки скопируйте изображение background.png (1920*1080) в каталог stub в рабочей папке сервера (по умолчанию для Windows – C:\TrueConf, для Linux – /opt/trueconf/server/var/lib). После этого перезагрузите сервер.

Элементы раскладки

Вы можете изменить заглушки (изображения по умолчанию при отключенной камере), отображаемые в видеоокнах при подключении к конференции через браузер (по WebRTC).

По умолчанию при выключенной у участника камере в его видеоокне отображается аватар на стандартном фоне:

Для брендирования заглушки:

1. Перейдите в каталог stub, расположенный в рабочей папке сервера (по умолчанию для Windows – C:\TrueConf, для Linux – /opt/trueconf/server/var/lib).
2. В зависимости от типа подключения участника замените файл:
   • no_video_alpha.png для подключений из клиентских приложений TrueConf и WebRTC;
   • no_video.png для подключений SIP/H.323 и RTSP.
3. После этого перезагрузите TrueConf Server из его панели управления.

По-умолчанию в качестве заглушки отображается круглый аватар. Но вы может переопределить это.

Сплошной фон без аватара

Круглый аватар на фоне

Квадратный аватар на фоне

Подключение стилей в отдельном файле CSS

Как и в случае с гостевой страницей, вы можете брендировать окно участников, подключенных через браузер, используя CSS правила. Для этого выполните указанные ранее шаги, добавив строку <link rel="stylesheet" href="/webrtc/my-styles.css"> в следующий файл в зависимости от используемой на сервера с TrueConf Server ОС:

• Windows:
  
  C:\Program Files\TrueConf Server\httpconf\site\ui\webrtc\dist\index.html

  1	C:\Program Files\TrueConf Server\httpconf\site\ui\webrtc\dist\index.html

• Linux:
  
  /opt/trueconf/server/srv/site/ui/webrtc/dist/index.html

  1	/opt/trueconf/server/srv/site/ui/webrtc/dist/index.html

Желаем удачных конференций!