Monday, September 2, 2013

How to add a Chat-Overlay to your Stream

This tutorial can be used with OBS/XSplit and similar streaming programs. I will explain how to add a chat overlay using the window capture/screen-region abilties of said programs, as well as using a plugin for mIRC or the logfiles of Hexchat. If you prefer a video version, check this link.
  • mIRC or Hexchat with a Plugin or using the Logfile
First of all you of course need a running instance of either Hexchat or mIRC connected to your desired chat channel. In this tutorial I will use the Twitch.tv chat as an example. You can find several tutorials for this on the Internet but for mIRC I can recommend this plugin. It allows you to enter your Name/Password combination for Twitch and connect to the chat right away. One other nice feature is the ability to output only the last X lines of chat to a textfile, so you dont have to load the whole logfile. And another nice feature is a little overview window, which can be especially handy for users with only one monitor. It allows you to show a small transparent window on top of your applications/games so you can see what your viewers are writing to you. A normal screen-region/window capture or game capture will not capture this window, so it will only be shown to you. (of course this wont work on a two-pc setup)


Now after you configured your desired program you only have to select the correct text-file in your Streaming application. In OBS you would select "Use text from file" and in XSplit you would choose the Multi-Line plugin and select remote text. Configure the text to your liking and you will get a result similar to this:
If you are going to use the logs produced by Hexchat for example, you want to make sure that color codes are stripped and probably also timestamps should be removed. OBS offers an option to wrap the text to a "Custom Extent" and keep use Scroll Mode. This will always show the newest lines of the textfile while you can easily cut off the upper parts which are not needed. Place a picture behind it to create a chat box as seen in my example.
  • Window capture / screen-region on a chat window
This way of adding an overlay gives you quite some more options as the above one. If you are going to use the Twitch popout chat you can style its appearance using a browser plugin and a little script. In my example I used the plugin called "Stylish" for Google Chrome with the Twitch.tv Black Theme from userstyles.org.
On the other hand if you choose to use mIRC or Hexchat you can change every color to your liking and use different themes or just change the font.
With Windows-Aero active (transparent taskbar, etc) you can capture "hidden" windows like they would be on top of your screen. The windows must NOT be minimized. Minimized windows do not receive updates. If you have to disable Windows-Aero you might run into problems capturing a hidden window that is currently in the background as overlapping windows might get captured.
So lets assume you have Aero activated and can capture the window. In OBS you would use Add -> Window Capture and select the corresponding window name in the dropdown. You could also set a sub-region or just crop your capture to just show the area you want. In XSplit you would use File -> Add screen region and click on your desired window. Do not draw a rectangle as this will create a "sub-region" capture of your monitor. Which means, overlapping windows will be captured. A single click on the window with the red cross selects the whole window for the capture process. In the source settings you can then again crop the area to your desired size.
In my example I used a simple background picture to give the whole chat a box and some style. Of course to see the background behind the text you will have to use the Color Key or Chroma Key features of OBS or XSplit to remove the background colors. The rest is up to you.

If you find an error please message me or comment below. And do not forget to subscribe for more upcoming tutorials! The video version of this tutorial can be found here.

No comments:

Post a Comment

Please respect the obvious rules for posting comments!

Back To Top