Case Study

Desktop frontier: Video app optimization for Lowkey

If you’re interested in translating or adapting this post, please.

Today, many brand-new desktop applications are built either entirely on web technologies to run in the modern browsers, or based on Electron, a framework for merging web and desktop tech stacks. These apps inherit both “web benefits”—like a short development time and “web downsides”—like huge resource consumption and slower interfaces. For gaming applications, such performance bottlenecks are vital: gamers have zero tolerance for any lags.

Our performance optimization case with Lowkey was a fighting chance to explore a whole new professional area for Martians and to find instruments to link and accelerate an Electron app. With a good pay-off: Martians brought Lowkey’s app CPU usage from over 30% to less than 5%.

CPU consumption

The current CPU consumption

More on Electron to build cross-platform desktop apps with JavaScript, HTML, and CSS: electronjs.org.

Ten years ago, we couldn’t imagine the stardom of letsplay videos, gaming streams, and everything esports. Founded by a Harvard Computer Science graduate, Jesse Zhang, and backed by Y Combinator and Soma, Lowkey caught up with the esports trend. The startup recently designed a desktop application to automatically capture and upload game recordings while playing—to share with friends and teammates. The entertaining game video now has educational and training qualities: esports teams can learn from their mistakes, take their skills to the next level, and study competitors’ strategies to let them bite the dust.

The indispensable aspect and the key success factor of every single video project is its ongoing performance optimization. Lowkey experienced some technical hiccups holding the team back. Since Martians had performance optimization projects for gaming startups before, the Lowkey team reached out to us to get things done.

Martians against hyperconsumption

The fundamental goal was to make one of the main application features—game screen recording—radically more high-performing and less resource-consuming: a 30 FPS video record required over 30% of CPU on a gamer’s PC. As users played a game with many competitors while recording, excessive CPU consumption that affected the game performance could cost a game. The Lowkey team estimated that not more than 5% of CPU usage for recording a Full HD video with 60 FPS would let a user to get the most out of the game and to record a high-quality video simultaneously.

Exploring Electron capabilities

The Lowkey Windows application used Electron’s open source desktopCapturer API for screen capturing and video recording functionality. We started with the detailed tuning of the recording process to improve its performance, digging into the recording settings like codecs, resolution, and frame rate. That helped a bit as we managed to increase the recording quality to 60 FPS with slightly less CPU usage. But it definitely wasn’t enough. Exploring the desktopCapturer performance map revealed the upsetting conclusion—it was the capturing solution itself that generated the 30% CPU consumption. We had to look for something less “greedy.”

The main idea was to find a native Windows solution for screen recording while avoiding commercial ones. After some exploration, we landed on the OBS Studio project, the open source software for video recording and livestreaming, well-known in the esports and streaming communities.

Why OBS Studio

OBS Studio got its hand in high-quality livestreaming for gaming pros and streamers, so its capabilities to adjust to any video quality and user device was exactly what we were looking for Lowkey’s Electron app. OBS Studio has a native Windows version and an existing OSS library for Electron-based applications: obs-studio-node. There was just one small but essential trouble: this library didn’t have enough documentation. This obstacle wasn’t able to stop us: we did an in-depth study and integrated the library. Here it is now: we can use the blazing-fast OBS Studio features right from our desktop Electron app.

To help other teams to enable fast and furious video recording or streaming features for Electron apps, we simplified the library integration. For this, we released a minimalistic (everything you need in one file) yet powerful open source application with an example of implementation: obs-studio-node-example.

Results

We teamed up with Lowkey.gg to integrate the solution and found that we outstripped the target. The screen recording now requires less than 5% of CPU to record a Full HD video at 60 FPS while not affecting professional gameplay in the process.

With Lowkey, esports players from all over the world can easily record and share their videos—all in one from a single, easy-to-use interface with many tools, including team sync, drawing annotations, timestamps, and viewpoint-switching. From now on, with no lags.

“The Evil Martians team was extremely helpful and professional throughout the entire process. Their developers are some of the most technically skilled people that we’ve worked with. Discussing various projects and problems (even very in-depth ones) is always super easy because their team catches on very quickly, and will help devise solutions in a short amount of time. This performance project was very in-depth and, given the small size of our team, would not have been possible without the help of the Evil Martians team.”—Jesse Zhang, CEO at Lowkey.gg

A new frontier for Martians

This Lowkey project was a small but important landmark for Martians as we stepped out of the comfort zone. We have deep expertise and a strong background in dozens of web optimization projects as we have been working on them for over a decade. But, lured by web platform dynamics, we didn’t try hefty desktop application optimization before.

Now, this sphere is exceptionally intriguing because the Electron framework has already occupied a niche of building commonly used desktop applications. However, the framework’s performance bottleneck remains a pressing issue. That’s why Martians have added desktop and Electron optimization to the tech stack we mastered.

If you use or plan to deploy Electron for building your application and think about boosting your users’ performance to be more productive in a familiar desktop environment, don’t hesitate to get in touch.

Humans! We come in peace and bring cookies. We also care about your privacy: if you want to know more or withdraw your consent, please see the Privacy Policy.