Create a Stream Countdown Timer for Twitch with JavaScript
March 24, 2020
Nic Raboy
Web Development
As you’ve probably seen, I’ve been ramping up The Polyglot Developer on Twitch, when it comes to live streaming developer content. What might not be obvious to the viewer of the live streams is the technical effort that’s involved in making the stream possible. For example, how do you position all the stream elements on the screen, or for that matter, broadcast a stream at all?
One of the things that took me a while to figure out was in regards to a countdown timer. I was broadcasting streams with a “Starting Soon” screen, but viewers didn’t actually know when the stream would start. Does “Starting Soon” imply a minute from now or ten minutes from now? Since I’m using Open Broadcast Studio (OBS), a countdown timer didn’t exist, so I had to go out and create one.
In this tutorial, we’re going to see how to create a countdown timer that can be used in your OBS project, or any project for that matter. We’re going to do this with simple JavaScript and HTML.
To get an idea of what I’m talking about, take a look at the following animated image:
What comes next can be broken into two parts, the creation of the timer with JavaScript, and then adding it to Open Broadcast Studio (OBS) so it can be used for streaming on Twitch and similar platforms.
Building a Countdown Timer with JavaScript and HTML
The countdown timer doesn’t need to be complicated. Where I’m going with this is that we don’t need to use any frameworks, or even multiple files. We can accomplish everything that we want with just a few lines of code.
The logic will essentially be, take the current date and time, then subtract it from a goal date and time, and display the difference on the screen. This process will happen every one second to simulate a fluid looking timer.
Create a widget directory on your computer and inside of that directory add a countdown.html file.
Within the countdown.html file, add the following code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="countdown"></div>
<script src="https://momentjs.com/downloads/moment.js"></script>
<script>
// Logic here ...
</script>
</body>
</html>
The above code is just boilerplate. If you’ve ever worked with dates and times in JavaScript, you’ll know how much of a miserable experience it is. For this reason we’re going to use moment, a popular JavaScript library to do the job.
Any changes to the timer will render inside of the <div> tags with the countdown id.
So let’s start with the heavy lifting.
Inside the <script> tag from the above example, include the following:
<script>
const goLive = moment("2020-03-20 07:00:00 PM", "YYYY-MM-DD hh:mm:ss A");
setInterval(() => {}, 1000);
</script>
The goLive constant will represent when we want to take our stream live. Using a JavaScript setInterval, we can continually take the difference of the current time with the goLive time every one second.
So let’s expand upon this idea a bit.
<script>
const goLive = moment("2020-03-20 07:00:00 PM", "YYYY-MM-DD hh:mm:ss A");
setInterval(() => {
let timeLeft = goLive.diff(moment());
if(timeLeft > 0) {
document.getElementById("countdown").innerHTML = moment.utc(timeLeft).format("mm:ss");
} else {
document.getElementById("countdown").innerHTML = "00:00";
}
}, 1000);
</script>
Every time the setInterval function runs, we take the difference with the current time. The resulting date and time will be formatted to only display minutes and seconds. Rather than counting down into the negative, we stop the timer at a certain point.
As it stands, opening the countdown.html file in a web browser will show a countdown timer. However, it probably won’t look too impressive. We can fix this by adding some CSS to format the text.
Within the <head> tag of the file, add the following:
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
#countdown {
font-family: "Roboto", sans-serif;
font-size: 4rem;
font-weight: bold;
color: #FFFFFF;
margin: auto;
width: 300px;
text-align: center;
}
</style>
</head>
We’re not doing anything too impressive, but we are downloading a font to use and adjusting the size, color, and position. For your project, you can add more CSS to better fit the theme of your stream.
Adding the Stream Timer to Open Broadcast Studio as a Browser Source
Now that we have a countdown timer, we need to get it into our stream for broadcasting to Twitch, Mixer, or something else. For this example I’ll be using Open Broadcast Studio (OBS), but with a few adjustments, you should be able to apply it towards Wirecast, XSplit, or another popular tool.
Within OBS, choose to add a Browser as a source within your scene.
The Browser source can add pretty much any HTML file to a scheme, whether that be a remotely hosted website or some local HTML file like the one that we had just created.
Make sure to select the Local File checkbox and then choose the countdown.html file that we had just created.
If the timer doesn’t show in your scene, or you make changes to the HTML file and want the scene to reflect the changes, you may need to refresh the cache using the dialog where you selected the HTML file.
Conclusion
You just saw how to add a countdown timer to your streams using simple JavaScript and HTML with Open Broadcast Studio (OBS). As of right now, OBS doesn’t provide a timer, so if we want to let viewers know when we’re starting, we need to create something on our own.
If you’re using another streaming software, as long as it can consume HTML, the same code should work.
A video version of this tutorial can be seen below.
Nic Raboy
Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.
Follow Us
Support This Site
If you found this developer resource helpful, please consider supporting it through the following options:
