np-at / keypress-overlay

Keypress listener and overlay for tutorial videos

keypress-overlay

Display an overlay of your current keypresses

This is helpful for tutorial videos where you want to display which commands you are using.

Keypresses will only show if pressing a command(ctrl or shift or alt) or are whitelisted on keycodes.whitelist.json files.

You can customize how they are shown on index.html's css, and also modify command names on keycodes.US.json.

Any bugs and new ideas are welcome on Issues. And you're welcome to send pull-requests.

How to run the listener server

• Download and install Node.

• Open any terminal(cmd, powershell, bash) window

• Run the cd command to go to the project folder containing the files from this repository

• Run npm i and wait

• Run npm start

• Additional commands:

  • npm start start-no-display: Does not display the text for every keypress in the command line window.
  • npm start start-debug: Display the actual keypress event for every keypress in the command line window.

How to use in OBS (Open Broadcaster Software)

• Run the listener server.

• Add a browser source

• Check the "local file" box

• Browse and select the index.html file contained on this repository

• Click "OK"

I also recommend checking "Refresh browser when scene becomes active" and "Shutdown source when not visible" at the bottom.

Dependencies

The project uses node-global-key-listener and socket.io and should work with any OS, Mac, Linux or Windows.