Руководство для Now Playing - OBS
tizhprogerДля работы с этим виджетом нужно сделать всего 3 вещи:
- Установите расширение браузера и дайте ему разрешения (при необходимости)
- Запустите сервер на вашем ПК
- Добавьте виджет в OBS
Информация для стримеров
Если вы хотите поддержать проект, добавьте ссылку на его страницу в описание канала. Для этого вы можете использовать готовое лого с подписью, которое можно скачать по ссылке:
В качестве ссылки добавьте адрес playingnow.de, который возможно и привел вас к этому руководству.
Теперь доступна версия 2.0!
Обновленная информация будет ниже.
Установить расширение в браузер
Процесс может отличаться от того, как вы хотите его реализовать, поэтому давайте рассмотрим простой способ.
Если вы разработчик, вы можете загрузить весь репозиторий, запустить серверный скрипт через консоль cmd или powershell и установить расширение в браузерах, используя меню разработчика.
ДАННЫЙ БЛОК ТОЛЬКО ДЛЯ FIREFOX, ОПИСАНИЕ ДЛЯ CHROME НИЖЕ НЕГО
Важно отметить, что Firefox требует от вас подтверждения того, что это расширение может получить доступ к определенным веб-сайтам, поэтому перейдите к настройкам расширения
Нажмите на Управление расширением (или подобное)
Перейдите к Разрешениям
Разрешите расширению работать на Youtube, Soundcloud и Spotify, отметив переключатели
После этого расширение будет работать как положено, это нужно сделать только один раз
КОНЕЦ БЛОКА ДЛЯ FIREFOX
В зависимости от вашего браузера выберите расширение:
Chrome - Webstore
Firefox - Mozilla add-ons
Opera - Opera addons
Например, давайте выберем Chrome и нажмем «Webstore», вы увидите кнопку «Установить», нажмите на нее
Расширение может запросить у вас разрешения, а именно доступ к веб-сайтам YouTube, Spotify и Soundcloud и их под-доменам. Нажмите «Установить»
После установки это расширение должно появиться на панели расширений и отобразить уведомление:
После этого перейдите на страницу YouTube, Soundcloud или Spotify (и перезагрузите ее, если она уже была открыта)
Запуск сервера с графическим интерфейсом
После браузерного расширения вам необходимо запустить сервер, для трансляции сообщений для всех источников OBS, которые вы добавите
Эта версия сервера имеет графический интерфейс пользователя и несколько функций, значительно упрощающих работу с виджетами и самим сервером. На этом сервере также есть возможность дополнительно запустить Twitch-бота, который по команде отправит ссылку и имя трека в чат
Чтобы использовать этот сервер, скачайте zip-архив тут со всеми необходимыми файлами
Он уже скомпилирован в exe, поэтому вам не нужно ничего делать, кроме нескольких кликов мышкой
Вы можете проверить его своим антивирусом, прежде чем распаковывать все файлы, и принять решение самостоятельно
После загрузки файла вы увидите его вот так
Откройте его и перетащите папку в нем в любое место вашего ПК, где вы хотите сохранить эту программу
Откройте эту папку, прокрутите вниз и найдите в ней следующий файл под названием NowPlaying-OBS.exe
Нажмите правую кнопку мыши, наведите указатель мыши на Отправить, после этого нажмите Рабочий стол (создать ярлык). На рабочем столе появится значок этого приложения
Этот шаг не является обязательным, вы можете запускать это приложение как вам удобно
Теперь дважды щелкните созданный значок на рабочем столе (если вы создали его ранее), и вы увидите следующий графический интерфейс
Иногда Защитник Windows может предупредить вас о том, что это приложение не опознано. Если вы беспокоитесь о вирусах, вы можете проверить его любым понравившимся антивирусом и решить сами, либо запустить сам серверный скрипт, используя только файлы Python в репозитории
А так же запрос на доступ к сети, т.к. приложение обращается к твичу для работы бота:
Нажмите «Выполнить в любом случае» и «Разрешить», вы увидите следующее окно
Когда вы запускаете приложение в первый раз, файл конфигурации будет создан автоматически со значениями по умолчанию, необходимыми для запуска базового сервера.
Если вы хотите обновить файл конфигурации, например добавить данные бота, заполнить или отредактировать необходимые поля и нажать кнопку «Save», вы увидите изменения в окне логов:
Если вы хотите быть уверены, что данные в конфигурации сохранены правильно, вы можете обновить текущую конфигурацию на дисплее, загрузив ее снова из файла, просто нажмите кнопку обновить:
Сервер имеет несколько вариантов упрощения: например, если вы хотите запустить сервер автоматически, когда запускаете приложение, выберите «Yes» в раскрывающемся меню в параметре server_autorun и нажмите «Save»
То же самое касается и бота Twitch
Помните, что даже если вы можете редактировать эти поля, приложение не примет в нем никаких значений, кроме «Yes» или «No»
Вы можете вручную включать и выключать сам сервер и твич-бота. Это может быть полезно, когда вам нужно остановить бота или сервер отдельно, без необходимости закрывать все приложение. Для этого просто нажмите кнопку «Run/Stop bot» или «Run/Stop server», вы увидите подсказки в окне логов
Если вы хотите подключить бота Twitch к этому серверу, получите для него токен (копия оригинального руководства для этого ниже, а также часть для установки виджета OBS), сохраните конфигурацию и нажмите кнопку «Run bot»
Нововведением версии 2.0 стала возможность менять значения портов, названия команд, а так же текста сообщений в чате.
Изменяйте значение портов только если понимаете что делаете!
Что бы изменить команду введите необходимое слово в это поле через запятую или пробел. Для удобства так же есть текстовая подсказка.
После внесения изменений - не забывайте сохранять их!
Если вы хотите изменить текст сообщения в чате твича, то введите его в поля обведенные на картинке. Так же в тексте доступны вставки, для более гибкой настройки, а именно:
{user} - никнейм юзера который отправил команду бота
{title} - полное название трека
{artists} - имена исполнителей
{link} - ссылка на трек/видео
Они позволяют создавать понятный и гибкий текст, например:
@{user} Now playing: {artists} - {title} {link}
Существуют отдельные сообщения для разных случаев:
twitch_reply_playing - сообщение которое отправляется во время проигрывания
twitch_reply_other - сообщение которое отправляется во время паузы
twitch_reply_empty - сообщение которое отправляется когда еще нет данных
twitch_reply_error - сообщение которое отправляется на случай ошибок
ВАЖНО: Этот сервер работает только на ОС Windows. Если вы используете другую ОС, дождитесь его дополнения для вашей ОС
Получение токена Twitch для бота
Перейдите по этой ссылке
ВАЖНО: Для большей безопасности данных и защиты, советую создать отдельный профиль для бота и не использовать основной твич профиль здесь
Выберите опцию Bot Chat Token, сайт запросит у вас разрешение на чтение и отправку сообщений в чат от вашего профиля, нажмите Разрешить
Пройдите капчу
На нижней части страницы, вы увидите поля с текстом, одним из них будет Access token скопируйте эту строку и сохраните ее себе
Вернитесь в серверное приложение и вставьте полученный токен в поле profile_token
Так же не забудьте указать имя канала, в котором будет работать бот. Введите его имя в поле channel_name
Если бот не сможет писать в чат, попробуйте подписать его на канал
Так же, бот может столкнуться с анти флудом от твича при частом вызове команд, данную защиту можно обойти выдав боту права модератора
Затем нажмите кнопку «Save»
Если все ок, то после нажатия кнопки «Run bot» вы увидите одно из таких сообщений, это означает, что бот залогинился и готов к работе
Для проверки бота перейдите в чат канала который вы указали и напишите команду !ping бот должен ответить таким сообщением
Теперь вы можете запустить музыку на любом из поддерживаемых ресурсов и написав в чате канала команду которую вы могли установить сами выше, или не меняя стандартные значения, ввести !track/song что бы увидеть подобное сообщение
Если вы нажмете кнопку «Run server», вы увидите следующие сообщения, это означает, что сервер работает нормально и готов к использованию
Добавляем виджет в OBS
Откройте OBS и нажмите + на вкладке «Источники»
Из списка выберите «Браузер»
В открывшемся окне назовите этот источник по своему усмотрению и нажмите «ОК». Не забудьте отметить опцию «Сделать источник видимым»
В окнах свойств укажите URL виджета
Вот здесь и раскрывается основа обновления V2
Теперь вы можете гибко настраивать параметры виджета OBS благодаря конструктору виджетов:
Рассмотрим подробнее его интерфейс и основные функции. Начнем с левой панели, где находятся основные параметры настройки:
В пункте Widget type можно выбрать между стандартным (Standart) и скрывающимся (Auto-hide on idle) виджетами.
Пункт WebSocket URL отвечает за параметры подключения к серверу, интерфейс которого вы видели ранее. Это сделано на случай, если вам понадобится изменить эти данные.
Пункт Font preset отвечает за шрифт, который будет использоваться в тексте. На выбор есть стандартный системный набор:
Опция Custom дает возможность указать наборы шрифтов в Font stack который не представлен в списке. Preset задает общий набор, stack позволяет указать точнее необходимые шрифты, которые есть в системе.
Google Font preset и Google Font управляются так же, но отличаются они тем, что загружаются по сети. Это сделано на случай, если в вашей системе нет того набора шрифтов что описан на опции выше или же они отображаются не корректно. Данная опция должна помочь с этим.
Title size регулирует размер названия трека и ограничен верхним и нижним лимитом. Таким образом минимальный размер ограничен до 10px, а максимальный до 72px.
Artist size имеет схожую функцию, но на этот раз регулирует размер имени исполнителя. В свою очередь он может регулироваться от 8px до 60px.
Bar height отвечает размер полосы прогресса. Регулируется от 2px до 24px, однако я рекомендую использовать размер 6px как оптимальный.
Widget height и Widget width отвечают за ширину и высоту виджета. Они регулируются от 44px до 420px (для высоты) и от 240px до 1400px (для ширины). Элементы виджета, такие как обложка и полоса прогресса будут подстраиваться под размеры.
Cover size регулирует размер обложки трека. Его можно регулировать от 0px до 240px. Если выставить 0, то обложка будет адаптировать размер соответственно ширине и высоте виджета. Однако стоит учесть, что обложка не будет выходить за границы виджета, если его размеры меньше чем размеры (выставленные) обложки.
Radius позволяет настроить закругление углов. Его можно регулировать от 0px до 40px.
Shadow регулирует тень, которая отображается возле краев виджета. Ее можно отрегулировать от 0px (т.е. отсутствие) до 24px.
Теперь перейдем к другому виду настроек:
Тут можно настроить цвета, а так же отдельные элементы виджета.
Background отвечает за цвет фона. Если нажать на темный прямоугольник, то появится цветовая палитра, на которой можно выбрать цвет мышкой в разных форматах (для этого нужно нажать на стрелочки возле RGB):
На случай если у вас есть точный цветовой код, вы можете ввести его в поле рядом. Подсказка по настройке дана ниже, в области Hint.
Accent отвечает за цвет строки прогресса и имеет (как и прочие цветовые опции) селектор выбора цвета, однако в этом случае выбор цвета доступен только через селектор.
Text отвечает за цвет всех текстов виджета (время, название трека и имя автора). Выбор цвета так же осуществляется исключительно через селектор.
Preview cover URL используется для временной обложки, когда данных о треке еще нет. Вы можете использовать стандартный:
Или же установить свой, главное указывайте прямые ссылки на изображения.
Остановимся на следующих опциях поподробнее:
Compact layout позволяет распределить элементы немного ближе к друг другу, а так же уменьшить расстояние от края, если это понадобится.
Show cover позволяет показать или скрыть изображение трека. Если отключить его отображение, остальные элементы сместятся на его место заняв пустое пространство:
Accent: Auto (from cover) позволяет настроить цвет шкалы прогресса по вашему предпочтению (через выбор конкретного цвета) или же адаптировать его под цвета обложки (если включить опцию), т.е. подобрать градиент:
Marquee long titles позволяет создать эффект "прокрутки", когда текст перемещается с права на лево:
Show timeline позволяет включить или отключить время и шкалу прогресса,. Это полезно когда вы хотите сфокусироваться только на тексте:
Show artist отвечает за имя исполнителя. Его можно скрыть или показать, включив или отключив эту опцию:
Transparent background позволяет сделать фон виджета прозрачным, что может быть очень удобно если вы не хотите закрывать им какой-либо контент или хотите поместить его поверх чего-то (скриншот из окна OBS):
Таким образом, благодаря этим гибким настройкам, можно например получить вот такой:
Те же настройки применимы и к виджету с авто исчезновением
В нижней части конструктора находятся кнопки быстрых действий, а именно:
Reset - сброс всех параметров до заводских
Refresh - обновляет превью виджета, на случай если он завис или не обновился сам
Copy URL - копирование готового URL с параметрами настройки
Так же важно упомянуть и верхнюю часть конструктора:
В верхней части находится строка с URL адресом, при нажатии на которую она выделится и будет доступна для копирования
Справа от нее находится кнопка Open. Она открывает полученный виджет в вашем браузере.
Ниже находится превью виджета, которое обновляется само при применении каких-либо настроек. Именно так виджет будет выглядеть в OBS.
Вернитесь в OBS, поместите нужную ссылку в поле URL и нажмите «ОК»
Вы можете настроить размеры источника, рекомендую устанавливать размер области по размеру вашего виджета +30px к высоте и к ширине. Таким образом виджет будет отображаться полностью без артефактов
Если вы видите это в сцене OBS, значит, все готово
Чтобы убедиться, что OBS подключен, вы можете посмотреть приложение сервера, которое показывает, что источник в OBS подключен в виде сообщения
Теперь запустите любое видео или музыку и проверьте OBS: если там отображается название и продолжительность песни, все готово! Наслаждайтесь!
Вы можете открыть несколько источников, и все они будут одновременно показывать одну и ту же информацию о песнях. Вы также можете настроить размер виджета в соответствии с вашими потребностями, просто используйте функцию OBS и страницу конструктора
Если у вас есть какие-либо вопросы по этому виджету, напишите мне сообщение:
E-Mail: tizhproger.development@gmail.com
Telegram: @Zeus428