Включение окна чата в прямую трансляцию видео удобно по нескольким причинам:
- Если вы загрузите свое видео на YouTube позже, зрители по-прежнему смогут видеть, кому и на какой комментарий вы устно отвечаете.
- Это может помочь зрителям узнать, когда их сообщение чата прибыло на другую сторону для стримера из-за задержек в потоке или чате.
Вы можете вставить окно чата в свой поток через исходный код браузера, либо из собственного всплывающего окна чата Twitch, либо через стороннюю службу. Однако у этого могут быть свои недостатки. Это может противоречить эстетике вашего стрима и не решает проблемы, связанной с тем, насколько сложно читать некоторые цвета псевдонимов чата на Twitch. Зеленый лайм может быть особенно жестким.
Для своей прямой трансляции я использую виджет чата от Streamlabs. Мне нравится, что это не мой личный всплывающий чат Twitch, потому что там люди могут видеть мои сообщения о модификациях, а также там отображаются личные сообщения, которые должен видеть только я. Но самая мощная особенность виджета окна чата Streamlabs заключается в том, что вы можете изменить код самого виджета. У вас есть достаточный контроль над HTML, CSS и JavaScript, управляющими окном чата.
Я использую тему Дракула в своем терминале во время стриминга, и основные цвета моего стримингового макета также очень хорошо сочетаются с Дракулой. Я хотел, чтобы мой виджет окна чата плавно сливался, не выделялся и не выглядел некрасиво.
Мне удалось написать несколько пользовательских CSS и JavaScript, чтобы перенастроить чат в цветах Дракулы. Результаты показаны на картинке ниже. Виджет окна чата находится справа над веб-камерой.
Думаю, выглядит неплохо!
Как это было сделано
Чтобы написать собственный код для окна чата Streamlabs, вам необходимо включить параметр «Включить пользовательский HTML / CSS» на странице настроек окна чата. Затем он покажет вам редактор кода прямо на той же странице.
В конце концов, CSS был всего лишь парой строк, определяющих цвет основного сообщения чата, а также цвет фона окна чата.
JavaScript был немного сложнее - мне нужно было динамически изменять цвет псевдонима в каждом появившемся сообщении чата. Этот цвет должен быть в рамках цветовой темы Дракулы, но при этом намекать на исходный цвет, выбранный болтовней. Сложный! В итоге я использовал классную библиотеку под названием Ближайший цвет, которая мне очень помогла.
Я использовал API MutationObserver для отслеживания поступающих новых сообщений чата. Я передаю цвет псевдонима нового сообщения в метод ближайшего цвета, а затем повторно устанавливаю цветовой стиль элемента DOM псевдонима с ближайшим Матч Дракулы.
Окончательный и полный код JavaScript приведен ниже. Не стесняйтесь копировать и вставлять для своего собственного виджета окна чата!
Новая цветовая схема чата получила несколько комплиментов от моих зрителей, а некоторые даже отметили, что они лучше контрастируют, чем цвета чата Twitch на веб-сайте. Не говоря уже о том, что он выглядит супер красиво 🦄 Определенно хорошо проведенное время.
Надеюсь, этот пост вдохновил вас на то, чтобы поработать над внешним видом макета вашей трансляции, и снабдил вас некоторыми новыми навыками и идеями для этого!
Удачной трансляции 💜 📺
