Skip to content

Latest commit

 

History

History
84 lines (45 loc) · 2.92 KB

README.md

File metadata and controls

84 lines (45 loc) · 2.92 KB

screenshot of stream alert overlay

Twitch Alert Overlay

A simple follower alert overlay for OBS that displays a list of the latest followers approximately every 60 seconds.

Note: This project uses the docs/ folder for web related files: .html, .css, .js etc. I do this because the project is hosted on github pages.

Parameters

login

Default joekombo. Enter the login name for a Twitch user.

volume

Default 25. Percentage from 0 to 100.

sound

Default guitar. Must match a filename found in docs/sounds

gif

Default guitarkitty. Positioned in the bottom left of screen. Must match a filename found in docs/images.

clientid

Required. Create an application at dev.twitch.tv and use that client id for clientid.

token

Required.

Install the lates twitch CLI

Create an OAuth token using twitch-cli dev.twitch.tv/ and use that for token.

Note: Be patient. The notifications may take up to 60 seconds to show for the first time. Before going live change name back to your login!

Application Settings

I use the following application settings at dev.twitch.tv to obtain my Client ID. The Client ID can be found near the bottom.

screenshot of dev.twitch.tv settings

Run locally

Clone the project using git. And then change the directory to the project folder.

git clone https://github.com/joekombo/twitch-alert-overlay
cd twitch-alert-overlay

Install the depedencies using npm and use npm start to serve the files.

npm install
npm start

Go to web browser and view the page.

Example URL:

http://localhost:5000/?login=joekombo&clientid=[your client id]&token=[the token created before]

Note: Some browsers require permission to play sound. Click the tab and select allow audio/video.

OBS

Create a Browser source, input the URL, and then set your screen size (1920x1080, 2560x1440 ...).

Contributions

To contribute changes, please fork the repository, make the changes, and then create a pull request! Thank you!.

Note: This project uses Prettier to format the code automatically when new code is commited. No additional steps are needed for this to work. More details about how this is setup is found here.

Issues

Something not working, or you're getting errors? Then please submit an issue.