Stream Control and OBS – Lower Thirds / Scoreboards / animated Team Info / and more

Today I have an interesting guide for a few different types of streams. Either you are a professional player and want to add some infos or a scoreboard to your stream or you are a shoutcaster and want to show what teams are playing, use Lower Thirds to tell the viewers who is commentating or just do some nice animations with dynamic text you can change in an external program and while the scene is not running, or is running.
So whats up with all this sorcery you might say, but its actually pretty simple, thanks to the work of a guy you can follow under @farpenoodle on twitter. First of all, a little example of how it can look. Be aware, those rectangles fly in, show the text and fly out after a specified time!


You will need the following things:

On the StreamControl page you can already find example files, but I created a little package for you guys to get you rolling. The main credit also goes to farpnut, I just used his examples to create some more different options.

  • Grab the package here and
  • the needed layout file for Stream Control here.
  • or the newer AiO-package with updated html files, here.

You can watch this older Video for Stream Control as well as this newer Video for the Browser Plugin or read on to find out how to use it.

First of all, extract all files you downloaded:

  • Stream Control
    • either in its own folder or into the OBS folder, does not matter
  • OBS / CLR Browser Plugin
    • of course install the Plugin into the OBS\plugins folder, location of OBS does not matter
  • Browser Files
    • if you downloaded my browser files you can extract them to your stream control folder or any location you like, its just necessary that you select this location in the next step
  • browserfiles_layout.xml
    • location does not matter, it will be selected in the next step
Because now we are going to setup Stream Control. When you first load it, you should see a interface like this:
We need to click that gear icon and go into the configuration. Now we have to select the folder in which you extracted the browser files instead of selecting an XSplit Path, and for the layout file we select our browserfileslayout.xml.
In this example I put everything into my Dropbox\Stream folder and the html files into a sub-folder called browserfiles.  This is in our case the “Xsplit Path”. And the layout file I located directly in the Streamcontrol folder. After you setup both paths, you can click ok and should see a picture like this:
You can now already enter and use the fields to your liking, click the little Floppy icon to save everything and “push” it live. Of course, before we can see something on our Stream, we have to add some necessary sources into OBS. In OBS you have to add a CLR Browser source. For my example html files you can just click on the little question mark at the end of the url field and select the html file you want to add.
The correct size for each of the examples can be below, be aware some of them will work with different sizes and you can of course scale the added source to fit your scene:
  • Commentator
    • width 500 | height 1080
  • Lower Third 1 and 2 Line
    • width 1920 | height 1080
  • ScoreBoard 1 / 2 / 3
    • width 1280 | height 100-200
  • Slide left/right
    • width 500 | height 1080
  • Versus
    • width 1920 | height 1080

Now it actually does not matter when you update your settings in Stream Control, the program saves your settings to a streamcontrol.xml file inside the browserfiles folder. So whenever one of the html files get loaded you will see the updated text on screen.

You can also edit pretty much everything to your liking. Change the animations, add more text fields to Stream Control, or use Tabs to sort the different options inside Stream Control (see farpnut’s original layout.xml). Just take a look at the html files and especially the java script part. Using jstween you can do a lot of things.

For the browser Plugin I want to mention one last thing. When using swf files instead of html files or URL’s, select the “Intercept request and apply template” checkbox. If you only see a gray box, first double check, you activated the mentioned checkbox, then check that you have “Flash for other Browsers” installed, the one you need for FireFox etc., and it should work.

For the StreamControl swf files to work, you have to place the swf file in the OBS main folder and set StreamControl to use this as its “XSplit Path”. That way the swf file should be able to find the streamcontrol.xml and read updates.

As always, comment with your Ideas, suggestions and everything else you want to share that fits this topic!

You may also like...