Sideproject: Screenshot Streamer

, 2 min read

Time for another side project! This is a project for the upcoming Ludum Dare game making competition.

What this is about

I want to participate in the next game making competition for Ludum Dare. The last time I participated, I created a screenlapse of my work over the weekend. This time I want to do that again, but with a twist. I'm planning to live stream my work over the weekend.

However, this is not your usual video livestream. It will be images from the screenlapse recording output. A new image every 30 seconds. Since my laptop is not powerful enough to do actual video livestreaming, I hope this will be an interesting alternative.

Here's a preview of how it might end up looking like:

project screenshot Additionally, older screenshots will be displayed as thumbnails at the bottom.

New things learned!

The image livestreaming server is pretty much done and there's just a few finishing touches left. It is not available online yet, but the source code is available here on GitLab. The server itself can be found in the app.rb. It is built with Sinatra and provides a text/event-stream route for a client that uses the EventSource API. The other important route is post '/screenshot/:filename', which provides an interface for someone to push new images to the server. This route is also protected with HTTP Basic Auth, so that only authorized people (i.e me) can post screenshots.

The client code can be found in views/index.erb. The frontend part is also quite interesting: Once a new image gets posted to the server, it will show up in all connected clients without reloading. The old image will be moved to the list of thumbnails while the top image gets replaced with the new image. I extracted the code responsible for moving the images into a small Jquery plugin, which can be found here. I also wrote tests in Jasmine, because it got very tedious to test the frontend code. The tests can be found here.

I am really happy about this little project coming together because I learned so many new things. I never used Sinatra before. I had JavaScript testing on my list of things to do anyway and coincidentally, Jquery plugins make testing a lot easier.

What's left to do

The most important part that is missing, is a tool that automatically posts images to the server. Additionally I'd like to automatically remove images from the server once they aren't needed anymore. And tests for the Sinatra app. Other than that, I'm really looking forward to the next Ludum Dare.

Have a great time!


Philipp Hansch

Full Stack Developer

Philipp is a full stack developer currently heavily involved with Rust. Most notably he's a member of the Clippy team where he helps with bugfixing and documentation. You can follow him on Mastodon and find him on GitHub as well as Patreon.