ChatStream is an OBS Studio overlay that provides streamers and content creators a means of integrating their viewers real time chat directly into the video stream. This provides viewers with an added level of interactivity with the stream content. It is a client application that directly accesses the streaming platforms API via the streamers OAuth credentials.
ChatStream combines Twitch, Youtube, and Discord chats into a single stream. It can be embedded into a video stream via OBS Browser Source or used on its own. It provides a basic TTS system when selecting a chat message.
ChatStream stores all credentials and information client side. Nothing is transmitted to our servers.
Please report issues to https://github.com/innovate-invent/ChatStream/issues
To begin, paste the following URL into a OBS browser source: https://chatstream.i2labs.ca/chat.html#twitch&youtube&discordChannel=
To disable automatic login of a platform, simply remove it from the URL fragment list (including the "&" prefix).
To log in, right click the browser source and click "Interact". Within the interactive view you can right-click to pull up a menu to manually log into the different platforms. Do not do this while your stream is active or viewers will be able to see your login credentials. If the login prompt won't scroll, temporarily remove the CSS from the OBS Browser Source configuration as it disables scrolling by default. Alternatively, use keyboard navigation by pressing tab until you move to the required page element.
License, Terms of Service, & Privacy Policy
To test the chat overlay you can add &demo to
the
URL fragment to start a dummy chat source. It randomly posts messages within a time range. To customise the time
range specify &demo=2000 setting the number to any positive integer representing the maximum
milliseconds between messages.
The chat will scroll automatically at a set rate. If more messages are being sent than can be shown, the scroll speed
will linearly speed up to try and catch up. This can be customised by setting &speed=10 in the URL
fragment with any positive integer. To disable this and always show the most recent message when it is received, set
&speed=0.
To customise the colors of the overlay you can add CSS to the OBS Browser Source configuration.
For example: body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; color: gray;
font-size: 24px; }
Further customisation can be done with an assortment of CSS selectors:
#chat will target the direct parent of all chat messages[data-source=youtube] will target a message from a specific platform (twitch, youtube, discord)
.username targets the user name field of each message.username:before contains the platform Font Awesome 6 Brands character code.message targets the text field of each message#chat { --message-line-limit: 2; }. Include #chat li {
word-break: normal; } to make sentences break normally.
&speed is greater than 0, messages are tagged with .old after a set time that
roughly would coincide with the message scrolling off screen in a busy chat room.
.new and then the class is removed one tick later to trigger CSS
transitions. Use this to specify the initial CSS state of a message. Specify
--message-transition-duration to change the default duration.
ChatStream supports basic speech synthesis by clicking on a message to be read in the OBS Interactive view.
Speech synthesis depends on the standard Web Speech API built into the browser. It offers a few customisation options:
If you think the provided voices are terrible (and you are on Linux), that is because you haven't installed Piper. Install it, and voices via Pied.
You will be automatically redirected to authenticate with Twitch. The user account that is used will automatically decide the primary streams chat.
Twitch prohibits embedding chat from third parties, this means you need to use one of two workarounds:
Assuming you are using the Multiple RTMP outputs plugin, create a separate OBS Scene with a separate ChatStream overlay configuration that only shows Twitch chat. In the "Multiple RTMP outputs" panel edit your Twitch target, change the encoder to something appropriate (x264 is the default) and select the Scene you set up with the Twitch specific chat overlay.
You can attain limited scene switching capability using OBSs scene nesting capability. Start by creating three scenes, one for Twitch with the Twitch specific overlay, one for the other platforms with their configured chat overlay, and one to control the active scene. Add the control scene to the chat overlay scenes, and add all your desired scenes to the control scene. Then control the "active" scene by hiding and showing the scenes nested within the control scene.
If you need full featured scene switching for Twitch then you will need to run three separate instances of OBS. A primary instance that does all the scene switching and primary compositing. This will only run a virtual camera output. The two other instances will take the virtual camera input and overlay ChatStream, one with the Twitch restriction and the other with no chat restrictions.
You will be automatically redirected to authenticate with Youtube. The user account that is used will automatically decide the primary streams chat.
If you have multiple broadcasts, you may need to set &youtubeBroadcastIndex=1 (or a higher number)
in the URL to get the correct chat stream.
Discord does not currently permit anything except a bot token to access its Gateway API. This means you need to create your own bot and provide the bot token.
&discordChannel=[channel id] must be provided. To get your channel ID, right-click on the channel in
the Discord client and click "Copy Link". This will provide you with a URL of the format:
https://discord.com/channels/[guild-server id]/[channel id].