Halo Stream Overlay with Discord & Twitch integration

A webapp providing Halo-themed overlays you can add as browser sources in OBS. It can show members of a Discord voice chat and display alerts whenever the channel gets a new follower or subscriber.

Demo video:

---

Table of Content

Please read	Disclaimer
Please read	⚠️ Important ⚠️
Required	1. Setting up the Discord Bot
Optional	2. Setting up the Twitch App
Required	3. Installing & Running the project
Optional	4. Updating the project
Optional	5. Building a Docker Image
Optional	6. Serving the webapp with Traefik on Docker
	7. Credits
	8. Contribute

---

Disclaimer

• Because of how Twitch works, if you want to get the Last Follower in real-time, you must host this app on a server. If you don't care about this, you can run it locally (see below).
• This webapp runs on NodeJS, so if you plan on running it locally, you will need to install it: download.
• With NodeJS, you will need Yarn which is a package manager: download
• While you can get the sources directly from the Releases page, we would recommend you to use Git instead. This way, it will be easier to update the project whenever we release a new version (let's say when Infinite comes out for example 😜 ).

This may all sound scary if you're not familiar with development, but don't worry, we'll guide you step by step, with screenshots and everything!

Also, feel free to contact us on our Discord server if you'd like some help.

---

⚠️ Important ⚠️

Before installing the app (locally or on a server), you will need to setup a Discord bot and a Twitch app (if you care about the Twitch features). It may sound complicated, but it's not and will require only about 15 to 20 minutes to get done.

---

1. Setting up the Discord Bot

1. First off, go to the Discord Developer Portal, in the "Applications" section, and click on "New Application":

2. In the modal window that opens, provide a name for your application (it can be anything you want, like "Overlay bot" for example), then click on the "Create" button.
3. Now, in the sidebar on the left of the page, click on "Bot".
4. In this page, click on "Add bot", and confirm the bot creation by clicking on "Yes, do it!".
5. Now, in order:
   • Uncheck the "Public bot" switch,
   • Make sure you save this change by clicking on "Save Changes" at the bottom of the viewport,
   • Click on the "Copy" button right under the "TOKEN" section.

6. On your server or computer, go to the root folder of the project (if you didn't download it already, check the first step in Installing & Running the project), copy-paste the .env.dist file, and rename the copy .env.

7. Open .env, and at line 9, after DISCORD_TOKEN=, paste (without any space) the token you copied in the Developer Portal on step 6. You can then save and close the file.
8. Open a new tab on your web browser, and start typing the following line in the address bar without validating it just yet: https://discordapp.com/oauth2/authorize?client_id=%REPLACE-THIS%&scope=bot&permissions=8
9. Go back to the developer portal, and in the sidebar, click on "General Information".
10. Locate the line called Application ID and click on the "Copy" button right under it.

11. In your other tab, in the address bar, replace %REPLACE-THIS% with the application ID you just copied, then press the 'Enter' key.
12. In this page, select the server the bot must join, then click on "Continue":

13. You can close this tab and the Developer Portal now.

I swear we're only a few more steps away from being done, don't give up now!

14. Go to your Discord app, and go to your settings (the ⚙️ icon right to your username in the bottom left of the window); scroll in the left sidebar until "Advanced", then click on it.
15. In the Advanced part, make sure to check the switch for "Developer mode", save your change and close the settings.

16. Now right-click on the server into which you added your bot, and click on "Copy ID".

17. In your .env file, on line 10, after DISCORD_GUILD=, paste this ID (without any space). You can then save and close the file.

That's it for Discord, yay!

---

2. (Optional) Setting up the Twitch App

If you don't care about the features related to Twitch (follower/subs/etc. alerts, Last Subscriber/Last Follower), you can skip this part.

1. Go to the Twitch Developer Console and login with the account you intend to use with the stream overlay.
2. On the Console homepage (https://dev.twitch.tv/console), in the Overview tab, you should see an "Applications" section, with a button "Register Your Application" on the top right corner of it. Click on this button.

3. A form will appear; provide the following information:
   • a name to your app (can be anything, "Overlay App" for example)
   • a valid OAuth Redirect URL: if you intend on running the app locally, just copy-paste http://localhost:3000/oauth2_return. If you plan on hosting the app on a server, replace http://localhost:3000 with https:// followed by your domain name.
   • You can technically put anything you'd like in "Category", but this app would go under "Broadcaster Suite".
   • Validate the captcha.
   • Click on "Create".

4. You should now see your Twitch application listed; click on the "Manage" bottom on its right:

5. You will be greeted with a form looking very much like the previous one, BUT this one has two information we need: the Client ID and Client Secret of your app.
   • Copy the Client ID
   • On your server or computer, go to the root folder of the project, open the .env file, and on line 13, paste the ID right after TWITCH_CLIENT_ID= (without space).
   • Back to the Twitch Developer Console, Click on "New Secret" and copy the newly-generated secret key.
   • in the .env file, on line 14, paste the secret right after TWITCH_CLIENT_SECRET= (without space).
   • You can save and close the .env file.

And you're done for Twitch!

---

3. Installing & Running the project

Start by opening a terminal (command prompt) and follow these steps:

# If you use Git, start by cloning the project
# If you downloaded the source code directly, simply open a terminal at the root of the project and skip the next 2 lines
git clone git@github.com:Halocrea/halocrea-stream-overlay.git
cd halocrea-twitch-discord-overlay

Once it's done, you will need to set the environment variables. In order to do this, you must copy the .env.dist file, rename the copy .env, and open it.

You will see some variables with various instructions. Follow them to provide the proper information.

If you want to do this step in command lines, you can do this:

cp .env.dist .env
vi .env 
# Press the 'Insert' key to start editing the file.
# Once done, Press the 'Escape' key, then type ':wq' and press 'Enter' to save and quit.

Please note that you must provide at least the mandatory environment variables in the .env file.

Once you're done with them, in your terminal (command prompt), type the following instructions consecutively:

# install dependencies
yarn

# build the project
yarn build

Project should be now installed! You can now start it:

yarn start

If you're running this locally, you must keep that terminal open to keep the webapp alive. Also (if you're running it locally), you'll have access to it through your web browser at http://localhost:3000 by default, where you will be guided to do everything else!

Note: If you're not sure about it, the overlay works as Web Browser Source in OBS. In the webapp, in the admin panel, you will see 📋 Copy source URL to get the URL you need. Make sure you set those sources with:

• width: 1920
• height: 1080

Also, make sure to check the two following options in the source's properties:

---

4. (Optional) Updating the project

If you're using Git, it's dead simple:

1. If the webapp is running, kill it (Ctrl+C in the terminal or close it).
2. In a terminal in the root folder of the project, type git pull.
3. Once it's done, type yarn then yarn build and finally yarn start.

And that's it!

---

5. (Optional) Building a Docker Image

You can build an image of this project by using the following commands:

docker build . twitchoverlay
docker run -d -v /absolute/path/to/the/project/data:/app/data -v /absolute/path/to/the/project/static:/app/static --restart=always --name=twitchoverlay twitchoverlay

---

6. (Optional) Serving the webapp with Traefik on Docker

To easily serve some of our websites and webapps, Halo Créa uses Traefik, which is "an open-source Edge Router that makes publishing your services a fun and easy experience.". Well, I wouldn't say it's fun but at least it is easy to use it as a proxy that automatically generates SSL certificates (for the websites to be https you know).

If you don't have a server with Docker already, you can find super cheap VPSs that'll do the job (like $5/mo), on which you can then setup traefik and this webapp (and others eventually).

If you're installing Docker yourself for the first time, make sure you follow Docker's documentation.

If you don't run Traefik but are interested about it and how we use it, we published a project with everything you need to know to set it up: here.

If you run Traefik on your server and want to serve this webapp as Docker container through it:

1. in the .env file, provide the information required for it (there's a comment to point out at them).
2. Type docker-compose up -d. That's it!

---

7. Credits

• Project was developed by Rémi "Tepec Fett" Carles for Halo Création.
• Icyhotspartin for the sub alert sounds: https://soundcloud.com/icyhot_mus
• "Halo Theme Kazoo Orchestrea (ft. my desk) by joosebox: https://www.youtube.com/watch?v=l_DfCFHOD9E
• Gif of the ODST cosplay playing the saxophone by @j4ckpot234: https://twitter.com/HaloOutpost/status/1163342344135094272?s=20
• "Halo Cello Cover" by Jaeyoung Chong on YouTube: https://youtu.be/lTBK7ZqFNXw
• Project is built on the Nuxt JS Framework: https://nuxtjs.org/
• Feather Icons for most icons: https://feathericons.com/
• Font Awesome for a few others: https://fontawesome.com/

Most of the other Halo-related visual and sound resources are likely © Microsoft and 343 Industries 😅

8. Contribute

If you'd like to contribute to the project, you can submit a pull request with the modifications/enhancements you'd like to suggest!

We are also looking for persons who would like to translate the UI to other languages; if you're interested, feel free to contact us on Discord: https://discord.gg/74UAq84.

💖