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

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

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

Если данная статья не удовлетворяет ваших потребностей, то вы можете:

1. Обратиться в наш центр технической поддержки за помощью.
2. Обратиться к вашему менеджеру с запросом покупки брендирования под ключ от наших разработчиков.

Простой способ брендирования

Изменение подложки видеообласти в клиентском приложении

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

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

Смена логотипа компании на страницах сервера

Вы можете изменить логотип компании, отображаемый на веб-страницах. Для этого в панели управления в разделе Веб → Настройки → Логотип компании загрузите картинку в формате PNG с максимальным разрешением 270×80 и размером до 1 МБ. Сперва выберите файл на вашем устройстве (1), а потом нажмите кнопку Загрузить (2).

Оформление конференции: фон и водяной знак

Для оформления конференций (WebRTC, SIP/H.323), а также для брендирования серверной записи и трансляции, в панели управления сервером перейдите в раздел Транскодирование. Здесь вы можете загрузить:

• фон конференции – изображение в формате PNG/JPEG с оптимальным разрешением 1920×1080 и размером не более 400 КБ;
• водяной знак – изображение в формате PNG с максимальным разрешением 400×100 и размером не более 100 КБ.

После загрузки файлов не забудьте нажать кнопку Применить.

Конференция в веб-приложении будет иметь примерный вид:

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

Чтобы не делать изменений сразу в файлах используемого (“боевого”) сервера видеосвязи советуем использовать браузерное расширение, позволяющее на лету встраивать пользовательские стили в веб-страницы, например, 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>

   Обратите внимание! Очень важным является подключение стилей в конце тега head, т.к. браузер считывает HTML файл сверху вниз и у нижних тегов приоритетность выше.
5. Перезапустите службу:
   • Windows:
     
     PowerShell

     Restart-Service -Name "TrueConf Server Manager"

     1	Restart-Service -Name "TrueConf Server Manager"

   • Linux:
     
     sudo systemctl restart trueconf-manager

     1	sudo systemctl restart trueconf-manager

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

До:

После:

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