paint-brush
I Made a Stream Deck For Literally No Moneyby@abmuhammadhamza

I Made a Stream Deck For Literally No Money

by HamzaAugust 22nd, 2024
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

A Stream Deck is a customizable external hardware piece that binds some of your work in a single key press. It is mostly used by streamers, but also used by programmers, designers, and even movie-level VFX artists. Elgato, a popular brand among streamers has a soundboard called Stream Deck.
featured image - I Made a Stream Deck For Literally No Money
Hamza HackerNoon profile picture


We all know Stream Decks are expensive. So I decided to make it for literally no money. I’ve been working on an open-source project called NumberDeck. It is a software version of the physical Stream Deck. Let me break down what it does.

What is StreamDeck?

A Stream Deck is a customizable external hardware piece that binds some of your work in a single key press. It is mostly used by streamers, but it is also used by programmers, designers, and even movie-level VFX artists. But that makes its price around $200. So, people who don’t want to invest that money over there will still have to stick with the normal procedures.

Elgato, a popular brand among streamers, has a soundboard called Stream Deck. Which you can get on Amazon and I think also on their site.


This is Stream Deck XL, which costs $249.99. It has many keys and fancy displays. It can be used on literally anything. There are some knockoff versions of it. But the true versions remain good.

Why did I make a clone?

Yes, I don’t want to invest in that fancy product, but I desperately wanted something like that. Why I needed it? Because I sometimes stream and simplify most of my work like copy-pasting 😅. And I jumped into finding a cheaper way.


Basically, I had no money. I was streaming GTA RP or Fortnite (I don’t want to give out more details about my stream, lol) on Twitch with my Phone as a chat screen, and my phone died.

That time I looked at my keyboard, it had a numpad section which I eventually did not use that much as there is a row at the top of my keyboard with the same functions. So, I made a Python script that will open up the Twitch chat while I stream on Twitch. I have to check my chat on the same display because I cannot use my phone or I didn’t have an external monitor at that time (maybe a year before).

I continued to develop it

I used the same Python script a lot, and I thought there might be someone like me who has their Numpad not used that much and also wants something like Stream Deck for their day-to-day life. So I made NumberDeck, which almost does the same thing.

I developed a UI (because the Python script I made didn’t have one) and eventually changed the project patch from Python to Flutter. And we are here now. The project is open-source, and anyone can download it for free. If you are a Flutter Wizard, contribute to the project with some bug fixes and additional features.

This is just a side project. Man, I love to do some side quests even if my main quests are incomplete and halfway 😂.


Some Notable Features

  • OBS Integration: Control your streams with ease
  • Window Management: Switch between applications effortlessly
  • Custom Shortcuts: Create powerful macros for complex tasks
  • Dark/Light Mode: Work comfortably in any lighting condition
  • Customizable UI: Personalize your NumberDeck experience

I’ve released the BETA version 2 weeks before the first version rollout. So now the first version is out there, and anyone can use it.

In the beginning, it was mainly designed for streamers. Now, it can be used by anyone with three major options.


Here are some explanations about the features that NumberDeck v1 has:

🎮 For Streamers:

Streamers can use it to bind their NumPad keys to their OBS and can do the following:


  • Switch Scene

  • Mute Source

  • Unmute Source

  • Toggle Source Mute

  • Start Streaming

  • Stop Streaming

  • Start Recording

  • Pause Recording

  • Resume Recording

  • Stop Recording

  • Toggle Source Visibility


Every action like switching scenes, will have its own additional option to get the element/source/scene from the OBS and a particular element/source/scene can be selected!

PS: You can bind the same NumKey to mute and unmute any source at the same time.


How to Connect?

  • Download and Install OBS if you haven’t already installed
  • Open OBS Studio and locate Tools > WebSocket Server Settings which can be found on the ribbon menu
  • Check the box on “Enable WebSocket Server”
  • Click on “Show Connect info”
  • Copy the Server IP and Server Password
  • Now open NumberDeck, and click on the gear icon which is at the top.
  • Paste the details in the OBS section

— OBS Address = Server IP

— — In the IP address, add a colon and copy the port from OBS and paste it. (if the IP is x.x.x.x, and the port is 123, then the address needed to be x.x.x.x:123) [The next update will have a separate field for this :)

— OBS Password = Server Password

  • Click save after entering them

  • Now you’ll see a camera icon at the top of the app in red color. Click on it to connect to OBS


There we go, it’s done. Seeing these steps might seem like a big process. But trust me, it’s really simple. I’ll make a simple video on how to do that soon :)

🧑‍💻 For Developers

Developers can use NumberDeck in endless possible ways. My Fav usage is ctrl + shift + n to create a new folder any time, and ofc ctrl + c and ctrl + v 😁. The Shortcut section makes it easier for developers to bind any shortcuts to the keyboard’s NumPad. Don’t get me wrong, OBS and windows options also will be useful for developers!!


How to add shortcuts?

  • Open up NumberDeck
  • Click on your number of choice which you want to bind the shortcut to
  • Choose Shortcuts from the options.
  • Click on Capture
  • Press the shortcut keys
  • Save and use!!

🎨 For Creatives

Let me break it down. Every feature can be used by anyone. I am just giving the title so it will look a bit different. It is all up to your creative level to use this software in your way.


This is a window option, which is the basic feature of NumberDeck. You can maximize and minimize any active windows with the help of this option.


How to bind windows?

  • Yup, you need to open NumberDeck
  • Click on your number of choice which you want to bind the window to
  • Choose Windows from the option
  • From the next dropdown, select any active window
  • Save and enjoy!!

Conclusion

If a Stream Deck cost won’t put a hole in your pocket, then go for it. If you hate Stream Deck, come here :)

Where to Download?


You can get this software from Github: https://github.com/ab-muhammad-hamza/NumberDeck/

Or you can get the direct download link on my website: https://hamza.sbs/numberdeck