Guide for Now Playing - OBS
tizhprogerTo work with this widget, you need to do only 3 things:
- Install browser extension and give it permissions (if needed)
- Run server on your PC
- 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:
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