Sometimes Scrubbing Demos is Useful

byMitch

Background

CounterStrat began as a tool for our team to help us prepare better for matches. This means that we're still active, avid users of CounterStrat when prepping for our officials. As we use CounterStrat, we always find things that can be changed, improved, or added.

While we think that Snapshot is a fantastic way to get a high-level overview of how a team tends to play a map, we found that when using it we were still missing some nuance in some cases. Due to this, we looked towards using other services which offered demo viewers to fill that gap.

The Demo Viewer

Because we want CounterStrat to be an all-in-one place for match prep, we figured that we should incorporate a demo viewer directly into the app to cover that missing piece.

The demo viewer is now available, and free to use! You can give it a try by logging in and clicking on the Demo Viewer option in the sidebar. Currently, you are able to load a demo file for viewing in the browser. We are not supporting stored demo uploads at the moment, but that may be made possible in the future.

Note: The score in this GIF is incorrect because the demo was split into 2 parts

The demo viewer allows you to watch a demo played back in 2D. You can select rounds, scrub the timeline, seek to specific events, and view the killfeed. It also shows the current state of each player in the server: what they are currently using, their scope/blind state, their inventory, health, armor, etc.

Technical Details

Making this work fully in-browser took more than the demo viewer UI itself. We developed a custom binary format to be able to compress the data we need from a demo into a much smaller size than the original demo. We may put out a more technical blog post about this in the future, as we find it to be pretty interesting.

That same format will also let us improve Snapshot efficiency, and eventually let you open any demo we've already processed without loading a file manually. That's not ready yet, but it's next.

Give it a Try!

Please give the new demo viewer a try! This is a first iteration so expect some rough edges. We're always open to feedback, so let us know what you think!