Are you streaming a live competitive event using OBS (Open Broadcaster Software) or similar software? If you want to add live rankings to your stream then this post will go through how you can achieve this goal.
OBS is fast becoming the de facto standard software for streaming. It is free, available for all major platforms, and user-friendly. You can download it here. A quickstart document is also available here.
With Keepthescore.com, it's pretty straightforward to add a leaderboard overlay for OBS. The overlay looks professional, is easy to set up, updates in real-time and the basic version is completely free!
You can even manage the rankings from a phone, without the need for any additional apps. This means that the person controlling the leaderboard can be someone else to the person using OBS. They can even be somewhere else entirely, as long as they have an internet connection.
How does it work?
There are 3 steps to getting it set up. Each step is explained in more detail below but here is the overview:
- Create a leaderboard on Keepthescore.com and customize it to fit your event.
- Obtain the overlay URL.
- Insert the overlay URL into your streaming software.
Step 1: Create a leaderboard
In this step, we create and customize the live leaderboard overlay.
To begin, click the button above go through the steps. This will take less than 1-2 minutes.
You will then see the following. This is your "control panel".
You will use this control panel to change the rankings, once you have integrated the overlay into your stream. You can also share the URL of the control panel to give someone else the ability to adjust the scores and rankings.
Click on the participant names to edit them. Many properties of your leaderboard are configurable, including colors and the background image.
The control panel also works great on a mobile device or tablet, without requiring any extra apps.
Step 2: Get hold of the overlay URL
Next, we will obtain the overlay URL — which is another way of saying a "link". It will look something like this:
https://keepthescore.com/board/vzrxdnpiedr/. This is all you need to insert the overlay into your stream.
Click on the "SHARE" button at the top of the control panel. You will then see a screen like this:
Click the panel "Share the public link" that the arrow is pointing to in the image above. Now you will see this:
Click on the "COPY TO CLIPBOARD" button. The required link should now be copied to your clipboard.
Onto the final step!
Step 3: Insert the overlay URL into OBS
The image below shows the main OBS window with a placeholder image instead of the live stream. Some docks have been disabled to keep things simple. We are now going to go through the steps to add our leaderboard overlay.
First we are going to add a new "source". Go to the source window at the bottom and click on the "+" button. Then click on "browser".
Accept the defaults in the modal dialog by clicking on "OK".
In the next screen you paste the URL you created in step 2 into the "URL" field. You should also adjust the width
field to 1200 and the height field to 1000. See below:
Click on OK, and your new browser source should be added and visible as below:
You can use the red frame to adjust the size of the overlay and position it as you require. You are now ready to start streaming! 🎉
To change anything about your leaderboard (including the scores!) go back to Keepthescore.com and make your changes there.
Anything you do will automatically be reflected in the overlay you just added. It's a little bit like magic 🪄
Advantages of our solution
Here's a quick recap of why Keepthescore.com is a goof solution for adding a leaderboard to your stream:
- No software installation is required to create or use the leaderboard overlay. All you need is a device that can access the internet and has a browser.
- The person who is doing the scorekeeping can be somewhere else, as long as they have internet access.
- It's free for basic use, with some paid extra features.
- We will be adding features and new competition modes based on what YOU request.
