Руководство для Now Playing — OBS
tizhprogerДля работы с этим виджетом нужно сделать всего 3 вещи:
- Установите расширение браузера и дайте ему разрешения (при необходимости)
- Запустите сервер на вашем ПК
- Добавьте виджет в OBS
Информация для стримеров
Если вы хотите поддержать проект, добавьте ссылку на его страницу в описание канала. Для этого вы можете использовать готовое лого с подписью, которое можно скачать по ссылке:
В качестве ссылки добавьте адрес playingnow.de, который возможно и привел вас к этому руководству.
Установить расширение в браузер
Процесс может отличаться от того, как вы хотите его реализовать, поэтому давайте рассмотрим простой способ.
Если вы разработчик, вы можете загрузить весь репозиторий, запустить серверный скрипт через консоль 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, поэтому вам не нужно ничего делать, кроме нескольких кликов мышкой
Вы можете проверить его своим антивирусом, прежде чем распаковывать все файлы, и принять решение самостоятельно
После загрузки файла вы увидите его вот так
Откройте его и перетащите папку в нем в любое место вашего ПК, где вы хотите сохранить эту программу
Откройте эту папку, прокрутите вниз и найдите в ней следующий файл под названием Now Playing
Нажмите правую кнопку мыши, наведите указатель мыши на Отправить, после этого нажмите Рабочий стол (создать ярлык). На рабочем столе появится значок этого приложения
Этот шаг не является обязательным, вы можете запускать это приложение как вам удобно
Теперь дважды щелкните созданный значок на рабочем столе (если вы создали его ранее), и вы увидите следующий графический интерфейс
Иногда Защитник Windows может предупредить вас о том, что это приложение не опознано. Если вы беспокоитесь о вирусах, вы можете проверить его любым понравившимся антивирусом и решить сами, либо запустить сам серверный скрипт, используя только файлы Python в репозитории
Нажмите «Выполнить в любом случае», вы увидите следующее окно
Когда вы запускаете приложение в первый раз, файл конфигурации будет создан автоматически со значениями по умолчанию, необходимыми для запуска базового сервера
ВАЖНОЕ ПРИМЕЧАНИЕ: Пока не меняйте порт и IP-адрес, поскольку расширение браузера будет пытаться подключиться именно к локальному хосту с портом 8000. В будущем это будет исправлено, а пока оставьте все как есть
Если вы хотите обновить файл конфигурации, например добавить данные бота, заполнить или отредактировать необходимые поля и нажать кнопку «Save», вы увидите изменения в окне логов
Если вы хотите быть уверены, что данные в конфигурации сохранены правильно, вы можете обновить текущую конфигурацию на дисплее, загрузив ее снова из файла, просто нажмите кнопку обновить
Сервер имеет несколько вариантов упрощения: например, если вы хотите запустить сервер автоматически, когда запускаете приложение, выберите «Yes» в раскрывающемся меню в параметре server_autorun и нажмите «Save»
То же самое касается и бота Twitch
Помните, что даже если вы можете редактировать эти поля, приложение не примет в нем никаких значений, кроме «Yes» или «No»
Вы можете вручную включать и выключать сам сервер и твич-бота. Это может быть полезно, когда вам нужно остановить бота или сервер отдельно, без необходимости закрывать все приложение. Для этого просто нажмите кнопку «Run/Stop bot» или «Run/Stop server», вы увидите подсказки в окне логов
Если вы хотите подключить бота Twitch к этому серверу, получите для него токен (копия оригинального руководства для этого ниже, а также часть для установки виджета OBS), сохраните конфигурацию и нажмите кнопку «Run bot»
ВАЖНО: Этот сервер работает только на ОС Windows. Если вы используете другую ОС, дождитесь его дополнения для вашей ОС
Получение токена Twitch для бота
Перейдите по этой ссылке
ВАЖНО: Для большей безопасности данных и защиты, советую создать отдельный профиль для бота и не использовать основной твич профиль здесь
Выберите опцию Bot Chat Token, сайт запросит у вас разрешение на чтение и отправку сообщений в чат от вашего профиля, нажмите Разрешить
Пройдите капчу
На нижней части страницы, вы увидите поля с текстом, одним из них будет Access token скопируйте эту строку и сохраните ее себе
Вернитесь в серверное приложение и вставьте полученный токен в поле profile_token
Так же не забудьте указать имя канала, в котором будет работать бот. Введите его имя в поле channel_name
Если бот не сможет писать в чат, попробуйте подписать его на канал
Так же, бот может столкнуться с анти флудом от твича при частом вызове команд, данную защиту можно обойти выдав боту права модератора
Затем нажмите кнопку «Save»
Если все ок, то после нажатия кнопки «Run bot» вы увидите одно из таких сообщений, это означает, что бот залогинился и готов к работе
Для проверки бота перейдите в чат канала который вы указали и напишите команду !ping бот должен ответить таким сообщением
Теперь вы можете запустить музыку на любом из поддерживаемых ресурсов и написав в чате канала одну из команд !song/!track/!трек/!песня увидеть подобное сообщение
Если вы нажмете кнопку «Run server», вы увидите следующие сообщения, это означает, что сервер работает нормально и готов к использованию
Добавляем виджет в OBS
Откройте OBS и нажмите + на вкладке «Источники»
Из списка выберите «Браузер»
В открывшемся окне назовите этот источник по своему усмотрению и нажмите «ОК». Не забудьте отметить опцию «Сделать источник видимым»
В окнах свойств укажите URL виджета
Widgets urls:
http://localhost:9000/default.html --- Эта ссылка добавит обычный виджет под названием Default.html (NowPlaying.html в репозитории), который все время отображается статически
http://localhost:9000/hiding.html --- Эта ссылка добавит скрывающийся виджет под названием Hiding.html (NowPlaying_hiding.html в репозитории), который будет скрыт через 1 секунду после паузы (пример ниже)
Кроме того, я добавил еще несколько типов виджетов, которые освобождают больше места и могут использоваться на темном или светлом фоне.
Вы можете найти их по этой ссылке: Больше виджетов (новые виджеты статичны)
Чтобы использовать новые виджеты, загрузите их и скопируйте в папку сервера, которую вы видели в части "Запуск сервера с графическим интерфейсом" этого руководства.
nobg_bc.html --- Виджет с прозрачным фоном и текстом черного цвета
nobg_wc.html --- Виджет с прозрачным фоном и текстом белого цвета
nobga_bc.html --- Виджет с прозрачным фоном, без обложки альбома и текстом черного цвета
nobga_wc.html --- Виджет с прозрачным фоном, без обложки альбома и текстом белого цвета
Ссылки на них будут такими: http://localhost:9000/*new_widget_name*.html
Например: http://localhost:9000/nobg_bc.html
Вернитесь в OBS, поместите нужную ссылку в поле URL и нажмите «ОК»
Вы можете настроить размеры источника, рекомендую установить статическую высоту 150, чтобы не было пустого места под виджетом
Если вы видите это в сцене OBS, значит, все готово
Чтобы убедиться, что OBS подключен, вы можете посмотреть приложение сервера, которое показывает, что источник в OBS подключен в виде сообщения
Теперь запустите любое видео или музыку и проверьте OBS: если там отображается название и продолжительность песни, все готово! Наслаждайтесь!
Вы можете открыть несколько источников, и все они будут одновременно показывать одну и ту же информацию о песнях. Вы также можете настроить размер виджета в соответствии с вашими потребностями, просто используйте функцию OBS
Если у вас есть какие-либо вопросы по этому виджету, напишите мне сообщение:
E-Mail: tizhproger.development@gmail.com
Telegram: @Zeus428