Jack0r
The Helping Squad
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 you grab this AiO package which include updated html files and animations that can be used more dynamically (re-appearing slide-ins).
You can watch this Video or read on to find out how to use it.
First of all, extract all files you downloaded:
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. After that 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:
Now it actually does not matter when you update your settings in Stream Control, the program saves your settings to a streamcontrol.xml inside the browserfiles folder (on my setup example). 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 and most Shockwave Flash Files should work. You have to set StreamControl to write its xml file to the \**\OBS\ folder instead of the folder of your html files. If you get a gray message you need "Flash for other Browsers" from the Adobe page. And if you get just a black box you have to activate Single Process mode under Settings -> Browser -> Runtime. Set "SingleProcess" to True, save and restart OBS, then check the step mentioned before if you get a gray message.
As always, comment with your Ideas, suggestions and everything else you want to share that fits this topic!
PS: If someone is able to write an animation-wise functional version of the script that starts the animation again as soon as you change the text. I had problems getting this to work without visible flaws in the animation. This would be very useful for the Lower Thirds to do news-like fly-ins.
This has been fixed in the AiO package!
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:
- Stream Control http://farpnut.net/streamcontrol/
- OBS https://obsproject.com/index
- CLR Browser Plugin https://obsproject.com/forum/viewtopic.php?f=11&t=6714&p
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 you grab this AiO package which include updated html files and animations that can be used more dynamically (re-appearing slide-ins).
You can watch this Video 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. After that 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 inside the browserfiles folder (on my setup example). 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 and most Shockwave Flash Files should work. You have to set StreamControl to write its xml file to the \**\OBS\ folder instead of the folder of your html files. If you get a gray message you need "Flash for other Browsers" from the Adobe page. And if you get just a black box you have to activate Single Process mode under Settings -> Browser -> Runtime. Set "SingleProcess" to True, save and restart OBS, then check the step mentioned before if you get a gray message.
As always, comment with your Ideas, suggestions and everything else you want to share that fits this topic!
This has been fixed in the AiO package!
