How to get a keyboard/ controller overlay on your stream with streamlabs or OBS - 2020

Written:21/07/2020
Last updated:21/07/2020

controller, keyboard mouse image

A controller/ Keyboard overlay is a nice touch to your stream. It allows your viewers to see which buttons/ keys you press in which order. Many viewers even prefer this over a keyboard camera because it will always be clear, as your hand can block the view in a camera. This guide should work in any streaming software which allows a web source, so how do you do it?

How to get a controller overlay on your stream

This guide is a lot more simple than you probably think, you just have to copy a link and add a new source! The steps below show you exactly how to do it!

  1. Firstly go to Game pad viewer and press a button on your controller to enable it.
  2. At the top of your screen, it says ‘Currently Viewing: None.’ Press on ‘none’ and change it to player 1. A controller should now appear on screen.
  3. Players 1-4
  4. Next, click the Xbox symbol to the right of where it now says ‘player 1.’ This allows you to choose which controller you have. There are many options for Xbox, Playstation and Nintendo controllers.
  5. To the right of that, there is a colour pallet, so you can change the background color. This often doesn’t show up on your stream anyway, but sometimes it will. If you want to change the colour. Click on the pallet and enter RGB, HEX or HSL values, or just choose a colour. After you click off the menu, your colour will show.
  6. Now you have to click on the ‘hamburger menu’ or the 3 lines in the top left. And select “Generate URL”
  7. Controller overlay link
  8. Copy the link, and open your streaming software.
  9. Select add new sources, and add a ‘browser source.’ Paste the link into the URL box, and it should look like this.
  10. Controller in streamlabs
  11. Now you can resize it, and move it around. Your controller overlay is setup! As soon as you press a button on your controller, it should connect!

And that is how you setup a noise gate to remove background sound, keyboard and controller clicks or even static noise from your stream! Be sure to share this page with your friends if they experience the same problem, so that their streams can be improved aswell! Follow Streaming Sorted on social media to recieve updates on new articles!

How to get a Keyboard and mouse overlay on your stream

Unfortunately with this method, while you are streaming the overlay programme will need to be open constantly.

  1. Go to Github and download the “NohBoard-ReWrite-v1.3.0.zip” file.
  2. Extract the file, and save it somewhere that you will remember.
  3. Open ‘NohBoard.exe’, right click and select ‘Load Keyboard.’
  4. You can look through the different options and find one that you like, but personally I believe that the ‘joao 7yt’ looks the best. It has a green screen background, which is not a problem.
  5. Once you have selected it and it opens up in a new tab, leave it open.
  6. Keyboard and mouse stream overlay
  7. Open your streaming software, and add a new source – window capture.
  8. The window capture source can only show the window that you choose to show.

  9. Select the NohBoard.exe window. It should look similar to this, depending on which overlay you chose.
  10. Keyboard overlay in OBS

    The source is now added. If you didn’t choose an overlay with the green screen, you are finished and you can show off to your viewers! If you did choose a green screen, we will show you how to set it up now?

How to remove the Green Screen background from your stream

This method works with any green screen background, so it’ll work perfectly for this!

  1. Right click on the source, and select filters
  2. Select add a new filter, and about 10 options come up. You want to choose ‘Chroma Key’
  3. Streamlabs OBS filters
  4. When you have selected it, press done and you should be taken onto a screen like this. Choose green on the ‘key colour type’ and adjust any of the values you want.
  5. Black background keyboard overlay
  6. When you have adjusted the colours, and exited to your live scene it should look like this.
  7. Keyboard and mouse overlay for twitch youtube
  8. If it doesn’t look like that, make sure you have the right chrooma key settings applied. If this doesn’t work, we suggest reading the instructions carefully to make sure you did it right.

And that is how you setup a Keyboard and controller overlay! Make sure you share this page with your friends, so they can improve their stream aswell! Follow @streamingsorted on social media, to recieve updates on new posts!

Streaming Sorted | Terms and Conditions | Privacy Policy | About | Contact