Guide for Now Playing - OBS

Guide for Now Playing - OBS

tizhproger

To work with this widget, you need to do only 3 things:

  1. Install browser extension and give it permissions (if needed)
  2. Run server on your PC
  3. Add widget browser source to OBS

Information for streamers

If you want to support the project, add a link to its page in the channel description. To do this, you can use a ready-made logo with a signature, which can be downloaded from the link:

RU text

EN text

As a link, add the address playingnow.de, which may have led you to this guide.

Install extension to browser

Process can differ from how you want to do it, so let's cover a simple way.

If you are a developer, you can download the whole repository, run server script via cmd or powershell console and install extension in browsers using Developer menu.


THIS BLOCK IS ONLY FOR FIREFOX, CHROME DESCRIPTION IS BELOW THIS ONE

Imortant to mention, that Firefox requires you to confirm that this extension can access certain websites, so go to extension settings

Click on Manage extension

Go to Permissions

Allow extension to work on Youtube, Soundcloud and Spotify ticktng the radio buttons

After that, extension will work as expected, this should be done only once.

END OF FIREFOX BLOCK


Depending on your browser, choose the the web extension:

Chrome Webstore

Firefox - Mozilla add-ons

Opera - Opera addons


For example, let's choose Chrome and click on Webstore, you will see the Install button, click on it

Extension can ask you about permissions, namely that it can access youtube, spotify and soundcloud websites and their subdomains, click Add extension

After installation, this extension should appear on extensions panel and show a message:

After that, go to youtube, soundcloud or spotify page (and reload it if it was already opened)

Run GUI server on PC

After browser extension you need to run a server, to broadcast messages for all OBS sources you will add


This version of the server has Graphical User Intreface and a few function, to make work with widgets and server itself much easier. This server also comes with the ability to additionally launch a twitch bot that will send the link and track name to the chat on command

To use this server, download zip archive here with all necessary files

It is already compiled to exe, so you don't need to do anything just a few clicks of a mouse
You can check it with your antivirus before unpacking all the stuff and decide by your own

After downloading the file, you will see it appearing like this

Open it and drag the folder in it to any place on your PC, where you want to store this program

Open this folder, scroll down and find th following file in it, called Now Playing

Click right mouse button on, hover mouse on Send, after that click on Desktop (create shortcut). This will create an icon on your Desktop for this app.

This step is optional, you can open this app as you like

Now double click on created icon on Desktop (if you created it before) and you will see the following GUI

Sometimes Windows Defender may warn you that this application is unrecognized. If you're worried about viruses, you can check it with any antivirus you like and decide for yourself, or you can run the server script itself using only the Python files in the repository

Click Run Anyway/Execute anyway, you will see the following window

When you start an app for the first time, configuration file will be created automatically with default values, required to run the basic server

IMPORTANT NOTE: Do not change the port and ip for now, because browser extension will try to connect exactly to localhost with port 8000. It will be fixed in the furture, for now leave it like this

If you want to update a config file, for example to add a bot data, fill or edit the neccessary fields and click Save button, you will see the changes in log window

If you want to be sure, that data in config are stored correctly you can update the current config on display, by loading it again from file, just click on reload button

Server has a few options for simplification, for wxample if you want to start server automatically then you run the app, choose Yes from dropdown menu in server_autorun option and click Save

The same thing goes for the twitch bot.

Remember, that even if you can edit this fields, app will not accept any value except Yes or No in it

You can manually turn on and off the server itself and a twitch bot. It could be useful, when you need to stop a bot or server separately, without a need to close the whole app. Just click on Run/Stop bot or Run/Stop server buttons for this, you will see prompts in logs window

If you want connect a twitch bot to this server, obtain a token for it, save the config and click on Run bot button

IMPORTANT: This server only works on Windows OS, if you are using other OS wait for it's omplementation for your OS


Getting twitch token for bot

Go to this link

IMPORTANT: For greater data security and protection, I advise you to create a separate profile for the bot and not use the main twitch profile here

Select the Bot Chat Token option, the site will ask you for permission to read and send chat messages from your profile, click Allow

Pass the captcha

At the bottom of the page, you will see fields with text, one of them will be Access token, copy this line and save it

Go back to the server application and paste the received token in the profile_token field

Also, do not forget to set the name of the twitch channel in which bot will work. Enter its name in the channel_name field

If the bot cannot write in the chat, try subscribing it to the channel
Also, the bot may encounter anti-flooding from Twitch when calling commands frequently; this protection can be bypassed by giving the bot moderator rights

Then click the Save button

If everything is ok, after clicking on Run bot button, you will see on of this messages, if you do - that means that bot logged in and ready to work

To check the bot, go to the chat of the channel you specified and write the command !ping, the bot should reply with this message (I am alive)

Now you can play music on any of the supported resources and by writing one of the commands !song/!track/!track/!song in the channel chat you will see a similar message

If you click on Run server button, you will se the following messages, that means server works normally and ready for use


Adding widget to OBS

Open OBS and click on + in Sources tab

From the list choose Browser

On the opened window, name this source as you like and click OK

Don't forget to tick option Make source visible

In properties windows put the url of widget

Widgets urls:

http://localhost:9000/default.html --- This link will add usual widget called Default.html (NowPlaying.html in repo), which is displayed statically all the time

http://localhost:9000/hiding.html --- This link will add hiding widget called Hiding.html (NowPlaying_hiding.html in repo), which will be hidden in 1 second after pausing (example below)

Additionally I have added a few more types of widgets, which will free more space and can be used in dark or light backgrounds.
You can find them on this link: More widgets (new widgets are static)

To use new widgets, download them and copy to server folder, which you saw in "Run GUI server on PC" part of this guide.

nobg_bc.html --- Widget with transparent background and black color text

nobg_wc.html --- Widget with transparent background and white color text

nobga_bc.html --- Widget with transparent background, without album cover and black color text

nobga_wc.html --- Widget with transparent background, without album cover and white color text


Urls for them will be as follows: http://localhost:9000/*new_widget_name*.html

For example: http://localhost:9000/nobg_bc.html


Return to OBS, put the desired link in a URL field and click OK

You can adjust the sizes of a source, I recommend to set static height to 150, to avoid having empty space under the widget

If you see this in OBS scene that you are ready to go

To confirm that OBS is connected, you can look at the server app, which show that source in OBS is connected

Now run any video or music and check OBS, if it shows song title and duration, you are done! Enjoy!

You can open multiple sources, and all of them will show the same information about songs simultaniously. You can also adjust widget size to fit your needs, just use OBS functionality


If you have any questions about this widget, fill free to write me a message:

E-Mail: tizhproger.development@gmail.com

Telegram: @Zeus428

Report Page