Documentation
Overstream.Studio is a desktop application for managing widgets that are placed on top of the video stream and add additional information and dynamics to the videostream. The streaming software must support the ability to add a browser window on top of the stream.
Overstream.Studio is primarily designed for sports broadcasts and allows you to manage lists of teamplayers and individual participants.
So, widgets can display information about a team score, a current participant, a list of participants and more. The list of widgets is constantly updated and is available inside the application.
Content
- Application installation
- Application overview
- How to add a widget to a scene
- Lists of individual participants
- List of team players
- How widget's data is applied to a widget
- Specific widget's background
- Team Score: How a timer works
- How to add a widget to a streaming application
- How to connect to the OBS websocket server
- How to use a desk
- How to become a member
Application installation
The application is only available for Windows versions 7 and above. Run the installer and the application will install automatically.
Application overview
The application contains several logical parts
-
Master data management
Includes adding and editing teams, players, individual participants, groups of participants, statistical categories
-
Visual settings of widgets
Controlling the visual details of widgets: colors, fonts, shadows, etc.
-
Managing the data that is displayed on widgets
Each widget has a management console by which you can manage the data that the widget displays. This is a match score, timer, player data and more.
All widgets are divided into 3 groups:
-
Information about teams, players and competitions between teams
- Matchscore- Scoreboard- Starting LineUp- FutsalPlayer
-
Information about individual participants, groups of participants and competitions of individual athletes
- StartingList- Participant
-
General purpose widgets
- Ticker- 3D Cube- 2D Logo- Clock- Full screen logo
How to add a widget to a scene
All widget instances are grouped in scenes. A scene is a group of widgets united by the same logic, which in some cases can also be controlled uniformly. First of all, you need to create a scene. The scene is not tied to the scene of your video stream in any way, in fact, it is just a group of widgets.
After creating the scene, open the scene window and add the desired widget to the scene. Each row in the list of widgets contains a button to open the widget management console and visibility control buttons. In the list of all widgets, you can mark widgets as your favorite. Such widgets will be shown at the top of the list.
A scene page contains buttons to show/hide all widgets on the scene simultaneously and a button to open a console to manage match statistics and timer. The match data is applied to all match related widgets (Scoreboard, MatchScore), added to the scene.
You can give your own custom names to widgets instead of a standart name
Lists of individual participants
Participants are used in individual competitions, such as artistic gymnastics, for example. Participants can be divided into groups. In addition to manual data entry, automatic import from a zip archive is available.
An archive to import contains a text .csv file without a header line, where the participant data is separated by commas or semicolons in the following order:
Name;Surname;Club;Flag_file_name;Country;Attribute_file_name;Avatar_file_name
Images must be placed in the same zip archive. An example zip archive can be downloaded from here.
List of team players
This data is used for team competition widgets, such as football. The players are divided into teams. The team may contain data about the flag or logo, the color of the players' jerseys.
In addition to manual data entry, automatic import from a zip archive is available.
An archive to import contains a text .csv file without a header line, where the participant data is separated by commas or semicolons in the following order:
Player_Number_In_Team;First Name;Surname;Avatar_file_name;Label
Images must be placed in the same zip archive. An example zip archive can be downloaded from here.
How widget's data is applied to a widget
You manage the widget data and styles through a widget's management console. The console of each widget can contain 2 tabs: Content and Styles. By the console, you can change the colors, fonts and other visual elements of the widget, to connect various data from players or enter data manually. When you click the "Apply" button, the data is sent to the widget and the widget is updated.
Specific widget's background
In some cases is useful to use specific color for a widget's background instead of a transparent color. To do it navigate over the Main Menu to the Setting page and activate this option.
Team Score: How a timer works
When you work with a timer on the "MatchScore" widget, and you want to set up initial time and a backward option you should click "Apply" button first to apply these values to a widget. After you can normally use control buttons.
How to add a widget to a streaming application
Let's use OBS Studio as an example.
1. Find the Sources tab and add a Browser.
2. In the widget console, copy the widget's URL and paste it into the OBS Studio. Click OK.
3. The widget will be added on top of the stream and upload its data
How to connect to the OBS websocket server
The OBS Studio gives you the ability to connect and manage it remotely. To do this, you need to enable the web socket server there. Find this option in the Tools/obs-websocket Settings menu and activate the server. Also enable an authentication. By clicking the "Show connect info" button, view the connection parameters and enter them into the application settings on the Settings/OBS WebSocket page as show on pictures below.
How to use a desk
A Desk is a web page with a set of buttons for quick access to various functions of the application, such as
- switching scenes of the OBS Studio
- change visibility of widgets
- change score of a match
- control audio in the OBS Studio
A Desk can be accessed via a web browser from any device on the same network as the computer running the application. When creating a Desk, you need to select its IP address, at which it will be accessible on the network. You will be offered several IP addresses to choose from. Try different options and see if the Desk can be reached at this address from another device on the network. Creating a Desk is very easy. Enter a name and select the IP address where the Desk will be accessible on the private network.
Then go to the button editing page. You can create 5 kinds of buttons, namely
- Buttons that activate various scenes in the OBS Studio. To do this, you must have enabled connection to the OBS Studio websocket server
- Buttons that hide or show various widgets
- Buttons that hide or show a group of widgets at the same time
- Buttons that change score of a match
- Buttons that mute or unmute the audio source
Once the buttons are created, try opening the Desk in your local browser. You should see a page at address http://{IP of the desk you have chosen}:8082/desk/{Desk ID}. If you have selected the localhost as Desk's IP , the Desk will only be accessible on the same computer where the application is running.
In the free version, you can only create one Desk and three buttons.
How to become a member
Why you need to become a member? If you like widgets and, if you constantly use the program, please support us and subscribe on a monthly basis. Some widgets are not free, but you will get full access to all widgets and a priority support.
Currently we use a Patreon service to manage subscriptions. Go to our Patreon page and click 'Join' button there. The service will ask you for sign up and make a purchase. After that you will get from us on your email a secret token. Enter it in the Overstream.Studio application and your full access will be activated.