Bringing a channel's messages into a nice looking chat overlay for OBS browser capture!
Basically, OBS can accept any URL as a browser source, including localhost addresses. I'm taking advantage of this by running two Node.js instances: 1 for a Discord bot to watch for new messages and post them to the chat server, and another instance as a chat server to receive new messages and update the DOM.
The basic flow of information is: New Message Event > Discord bot > HTTP POST > server > socket > client-side javascript.
After cloning this repo, create a file named .env, and insert the following:
TOKEN=<YOUR_SECRET_GOES_HERE>
WATCH_CHANNEL=<YOUR_CHANNEL_GOES_HERE>
To get the token, you'll need to create a Discord bot with the Read Messages permission. You can follow just Step 1 here: How To Build a Discord Bot with Node.js
The channel value can be retrieved by enabling Discord developer mode, then right-clicking the channel you'd like to watch and clicking "Copy ID".
Finally, you'll want to do:
npm install
Open two terminal instances. In one, run:
node client.js
Expect to see a message like listening on *:8080
You can now view the client by visiting http://localhost:8080.
USE THIS URL AS YOUR BROWSER SOURCE in OBS.
And in the other terminal, run:
node bot.js
Expect to see a message like Logged in as <BOTNAME>#0000!
With the bot watching your channel for new messages, AND the client running on http://localhost:8080, you should be all set up and good to go!