Как добавить чат на экран во время трансляции на youtube

Как добавить отображение сообщений зрителей на экран во время трансляции? С таким вопросом рано или поздно сталкивается любой стример на YOUTUBE. Лучше всего для отображения чата на экране использовать специализированную программу, но к такому решению надо подходить постепенно. Однако, не  все программы одинаково полезны, а некоторые из них вообще распространяются на платной основе. Описанный ниже способ позволит избежать возни с дополнительными программами, но потребует некоторой технической подготовки. Впрочем, если многоуважаемый читатель смог настроить трансляцию, то разобраться с парой дополнительных кнопок не составит труда.

Для начала небольшое техническое отступление… в качестве примера будет рассмотрена настройка отображения чата во время трансляции через программу OBS Studio. Программу можно бесплатно скачать с сайта разработчика Open Broadcaster Software / obsproject.com. Настройка XSplit Broadcaster осуществляется по аналогии. Если используете другие аналоги, то убедитесь в возможности добавить отображения окна браузера в сцене (Nvidia ShadowPlay и Action! пока не имеют таких функций).

Итак приступим, перед началом стрима или трансляции в используемую сцену необходимо добавить элемент BrowserSource (CLR Browser). В списке сцен слева необходимо выбрать нужную сцену. В окне “Источники” добавляем новый и выбираем из списка “BrowserSource”. Добавить источник можно кликнув мышью на кнопку с символом “плюс” (1) или нажать правой кнопкой мыши и выбрать нужный источник. В появившемся диалоговом окне будет предложено “создать новый” или “добавить существующий”, выбрав из предложенного списка.

При создании нового источника или редактировании существующего открывается окно изменения свойств элемента BrowserSource. Здесь необходимо указать ссылку на источник URL (3), ширину и высоту области отображения (4), дополнительный CSS стиль (5) а также отметить две галочки (6) “отключать если источник невидим” и “обновлять браузер при переключении сцены”. Значение в поле FPS по умолчанию равно 30, но для меньшей нагрузки на программу это значение можно установить в промежутке от 5 до 15.

Теперь разберем немного подробней. В качестве ссылки на источник URL (3) необходимо использовать ссылку окна, открывающего при нажатии “открыть чат в новом окне” (скопировать адрес в открывшемся окне).

Для удобства использования в качестве ссылки источника можно использовать следующую строку https://www.youtube.com/live_chat?is_popout=1&v=ИДЕНТИФИКАТОР предварительно заменив слово ИДЕНТИФИКАТОР на уникальный идентификатор (ID) трансляции. Скопировать ID можно либо из адресной строки браузера после того, как открыли страницу с трансляцией или в блоке “поделиться” ниже окна с видео. В рассматриваем примере идентификатор трансляции будет выглядеть следующим образом UQpTQBrSg-4. Необходимо отметить, что у вашей трансляции этот идентификатор будет другой. Для каждой новой трансляции необходимо указывать новый идентификатор. Также, обращаю ваше внимание, что это не ключ трансляции, который вы используете в настройках OBS.

Дополнительный стиль CSS можно найти в конце статьи или из текстового файла по ссылке www.otrip.ru/uploads/2017/05/css.txt

После завершения редактирования BrowserSource он появится в окне предварительного просмотра и в списке источников текущей сцены. Далее можно изменить позицию элемента на экране, где он будет отображаться во время трансляции. Для этого элемент можно перетащить мышкой по экрану предварительного просмотра (7) или задать значения вручную используя фильтры и дополнительные настройки (8). Для вызова дополнительных настроек необходимо нажать правой кнопкой мыши на название элемента в сцене.

Дополнительный CSS стиль (5)