the twenty minute version

This little OBS timer is one of a pile of small apps I have been building lately by starting a brand-new chat in the GitHub Copilot app, describing the annoying thing in front of me, and seeing how fast I can get to something useful. In this case, the path from idea to “I was recording with it in OBS” was about twenty minutes. That is not a benchmark. It is just what happened, which is why it stuck with me.

The app is not trying to be a product. It is a tiny Node app that solved a tiny recording problem at the exact moment I had it. I needed a count-up timer burned into raw OBS footage, so I built one, used it, pushed it to GitHub, and moved on with the thing I was actually trying to record. There is something freeing about that. When the cost of making the little tool drops that far, you stop treating every gap as a shopping trip.

the problem

I record a lot of demos where the interesting part is not instant. Deploys take time. Builds take time. Provisioning cloud resources takes time. When I review raw footage in Premiere, I do not want to scrub around, compare timestamps, and do math just to know how long a take ran. I want to look at the frame and see the answer.

That was the whole requirement. Put a readable HH:MM:SS timer in the recording while I am capturing it. Do not make the audience see the controls. Do not make post-production do work that the recording could have handled. I am sure existing overlay tools can do some version of this, but by the time I found one and wired it into my scene, I could probably just build the thing. So I did.

the fix

The repo is here: github.com/bradygaster/video-count-up-timer. It is MIT licensed, because if this saves you the same little annoyance, please take it and make it better. The app is Node, Express, Socket.io, and a single browser page. It serves a timer on a green background at http://localhost:3000, with off-screen controls lower on the page. OBS sees the timer, my regular browser sees the controls, and Socket.io keeps them in sync.

To run it locally:

npm install
npm start

Then open http://localhost:3000. The default display is a big count-up timer, formatted as HH:MM:SS, sitting on a chroma-key green background. I open the same URL in a normal browser window, scroll down to the controls, and keep that window off-screen. When I press start there, the OBS overlay updates immediately over WebSocket.

OBS count-up timer showing 00:00:05 in white digits on a green chroma-key background
The timer running on its chroma-key green background. Space starts and stops it, R resets it, and the controls live below the strip OBS captures.

the OBS part

If you have not used Browser Sources in OBS before, the short version is that OBS embeds a real Chromium engine as a source in your scene. You point it at a URL, set the width and height, and OBS composites that web page over your video. That is how a lot of stream alerts, chat overlays, lower-thirds, scoreboards, and timers work. It is just a web page, but OBS treats it like a video layer.

For this timer, add a Browser Source in OBS and point it at http://localhost:3000. Set the width to 1920 and the height to 200. That gives OBS the top strip of the page, where the timer lives, without showing the controls below it. Then add OBS’s built-in Chroma Key filter to the source and key out the green background. Position the timer wherever you want it in the scene. Start recording, start the timer from your separate browser window, and the elapsed time is now part of the raw recording.

The green background is intentional. Browser Sources can be transparent, but chroma keying the timer area gives me predictable edges. Green is boring, visible, and easy to remove. Boring is often the right answer for production helpers (ask me how many exciting helpers I have regretted).

why I like this pattern

The useful thing here is not the timer, exactly. The useful thing is the shape of the work. I had a small problem sitting between me and the demo I wanted to record. I opened a new GitHub Copilot chat, described the workflow, let it scaffold the app, made a few adjustments, and had OBS recording with the overlay about twenty minutes later. This is one of many small apps I have built that way lately, and most of them do not need to become anything more than that.

That changes my bias. I used to spend more time hunting for the right utility because writing the utility felt like a whole separate project. Now, for certain problems, the little tool is the fastest path back to the real work. It can be disposable without being sloppy, specific without being precious, and useful without pretending it wants a roadmap.

If you record long-running demos in OBS, clone the repo and try it. If it needs a theme, a shortcut, a countdown mode, or a better control layout for your setup, open an issue or send a PR. I read everything. For me, the win was simple: the next time I opened raw footage in Premiere, the video already told me how long the thing took. That was enough.