Adding “Now playing” info to OBS for PlayIt Live

0
241

Updated on 2021-11-17 due to some minor errors and omissions and adding a walk-through video.

This is what we’re building today….

Normally I take a pride in making my code presentable, but this is a bit of a rough example of JavaScript and HTML. So please forgive my slap-dash approach to the problem. The code works fine and has served its purpose well for almost a year. Today I use a selfwritten API and JSON to populate text data.

The intended effect is to get a “Now playing” function in Open broadcaster (OBS) that shows what PlayIt Live is playing, like in the picture above.

What you need

  • PlayIt Live.
  • The “Now playing” plugin.
  • OpenBroadcaster (OBS) or Streamlabs OBS
  • A local IIS (Internet Information Services) webserver.
  • My code
  • All components need to run on the same operating system. (Windows 10 or Windows Server 201x recommended)

Visual learner? – Try the YouTube video, with my walk-through

Hit the full screen on this one, to actually see something. 🙂

Steps

First, you need to install a local IIS. OBS seems to support JavaScript-execution on locally included files in the “Browser source” widget, but this requires lowering the security of OBS, and also, I have not tested it. So that’s an alternate route if you do not wish to have a local IIS on your broadcasting server. But in this guide, we will use a local IIS. It’s very useful for lots of other purposes such as rebroadcasting news. Please be adviced, it will be setup NOT to be reachable outside the server, as this could be insecure.

Open the control panel and click “Programs and features”.

Programs and features.

Then select “Turn Windows features on or off”.

Easy as pie

Check the following boxes:

No FTP, who uses that anyway?

The open the manager.

Now setup the bindings for the site like this:

Bindings can be found on the menu to the right in the console

This ensures that noone outside the server will ever reach the web site. The web site is located on %SystemDrive%\inetpub\wwwroot, which generally means c:\inetpub\wwwroot unless you installed your Windows-installation on some other drive.

Good! All set.

Now download my script here. (If you haven’t already)

Then create a folder called nowplaying under wwwroot.

Ah.. good…

Unpack the zip-archive to your Desktop and move the extracted file (trackloader.htm) to c:\inetpub\www\nowplaying\. The file “trackloader.htm” should now be directly under the folder itself. Don’t store the zip-archive itself under the wwwroot.

Create an empty file on your desktop and call it tracks.htm.

Move that file into c:\inetpub\wwwroot\nowplaying\

It should look like this, now!

This will ask for administrative permissions, which you must accept.

Permissions to write…

All files in the nowplaying folder are readonly, and that’s totally fine. In fact, they must be. We don’t want to be insecure. But tracks.htm must be writable by the same account that PlayIt Live runs as.

Select tracks.htm, right-click it and select properties.

Click the Security

Just as Swenglish as I am…

Add that account in question with write permissions. Don’t add Everyone or authenticated users.

Alla (Swedish) = Everyone. Bad DJ, no cookie! 😉

If you are having an existential crisis, press Windows + R, type in cmd.exe and click OK. Then type whoami into the black command prompt. You must be logged in with the same account that PlayIt Live normally is logged in while running. The command will tell you your identity. That must go inte the dialog above. Don’t forget checking “Write”.

So, onto the “Now playing” plugin

I assume PlayIt Live is installed and properly running.

Open the “Now Playing”-plugin.

Ready to rock!

Set it up like in the picture and save it.

Open a web browser and try:

http://127.0.0.1/nowplaying/trackloader.htm

It’s aaaaaaalive!!!! It’s aaaaaaalive!!!

Almost ready. Now open OBS or SLOBS and setup a new browser source.

… And so do we….

Setup the source the way you want. The settings in picture above may have to be adjusted depending on your ideas as how to display it on the page. But this should now, work. Time for a beer…

Big whoop! Wanna fight about it? ... Or maybe... you know... just leave a nice comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.