How I Built a Counter-Strike Global Offensive Statistics Visualization for National TV Using React

I created statistics visualizations for the Finnish Broadcasting Company to be used in the Assembly Summer 2018 LAN and demoparty. Yle has been broadcasting esports tournaments from Assembly and other tournaments such as ESL One and Dreamhack for four years now, and I have been working with them sporadically since the beginning. I’ve built multiple iterations of different kinds of statistics tools, and this blog post explains how the latest iteration was developed.

This time Yle wanted me to provide them with a map introduction tool, visually pleasing real-time statistics visualizations, and a bomb countdown timer to be used in the Assembly stream and TV broadcast. The statistics visualizations were designed by Ossi Pesonen, who has previous experience in designing visualization for CS:GO. I was tasked with the implementation, which included getting the game data from the Counter-Strike game, rendering the visualizations on the TV screen, and providing a user interface where the visualizations could be turned on and off.

With the cooperation of people in Yle and Assembly, we found out that we can use the CS:GO Game State Integration to fetch live data from the game. The first thing i wrote was a simple Node.js server which receives the data that is being sent to it by a game client and saves it into memory. This simple server was used almost as is during the whole project. I only added some logic to retain the game state data even after the game is over.

After that I dug deeper into how to get the data to show up on the TV screen in real-time. We had decided to use CasparCG; software designed to play graphics, video and audio in a broadcasting environment. CasparCG is able to play “HTML Templates”, which basically means that the system is running a browser with transparent background on top of the video feed.

Being able to run a full-fledged browser tickled my curiosity, and I immediately had to try out if you could run React on it. Turns out you can and it works great. After that I proceeded to set up a proper Parcel-based development environment with watch and autoreload functionalities to make the development as fast and easy as possible. I also open-sourced the development environment setup, and you can find it in GitHub. The great thing about this development environment is that it is written with JavaScript, HTML and CSS, and it is accessible to a much greater number of developers compared to many of the proprietary TV visualization tools used in TV productions.

With the development environment up and running, I was able to finally start developing the templates. The templates themselves are pretty straightforward; there is one react app that includes a React component for each of the visualizations, and they include smaller sub-components to display recurring elements such as icons, team names, player names etc. I used styled-components to style the application, and CSS animations to display and hide the visualizations. This was an improvement compared to letting CasparCG start and stop the browser, because having the browser open all the time resulted in a much shorter fade in and fade out time.

The application includes a backend server and two frontend servers: one to display the visualizations and one to provide the broadcaster an interface to toggle the visualizations on and off. The server communicates with the user interfaces by using socket.io. I also utilized redux-socket.io for client-to-server (by dispatching actions) and server-to-client (by emitting messages) messaging. I found out that socket.io and Redux work very well together, and you can completely avoid creating REST APIs and API calls by simply dispatching events from the server just like you do from the client.

This combination of CasparCG, React and Node.js worked great at Assembly and the visualizations were shown on the main stage, in the Yle Areena streaming platform, and on the television channel TV2. However due to the complexity of this system, the time and knowledge needed to set everything up is quite demanding, and I had to spend a day before the event to configure and test everything.

Today I’m working on a new piece of software that offers similar functionality but packaged in an easy to use executable file compatible with Windows, Linux and macOS. The new system is designed to support other video mixer software as well such as vMix. We at 8-bit-sheep are planning to release this as a free software that any tournament organizer can use to easily show CS:GO statistics on their event streams.