How to add a Chat-Overlay

Status
Not open for further replies.

Jack0r

The Helping Squad
This Tutorial can also be found on the Helping Squad page and a Video version on youtube:
http://www.helping-squad.com/wp/how-to- ... ur-stream/
backup on: http://blog.hemp-society.de/2013/09/how ... tream.html
http://www.youtube.com/watch?v=BX5QWgwRMqE

I will explain how to add a chat overlay using the window capture abilty of OBS, 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 select "Use text from file" and and link it either to the plugin output or your hexchat logfile. 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 of 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 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.

Update: OBS Tutorials - Show the Twitch Chat on Stream with the Desert Kharon IRC Plugin
http://www.youtube.com/watch?v=VNh1EnpB3h4
 

XoeRli

New Member
Re: [Guide/Video] How to add a Chat-Overlay

I like your Blog. Saved it in my favorites ;) but i have a question about the overlay Chat. Is it only visible in Stream? Or for me too, if i am ingame? ( windowed Mode 1920x1080 )?
And can i turn off the background opacity?

You can write me a pm in german if you want :p i'm from Germany too :p
 

Jack0r

The Helping Squad
Re: [Guide/Video] How to add a Chat-Overlay

The actual overlays are just seen on the stream. Although the plugin for mIRC offers to the option to show a window of your chat on screen for you visible with a transparency and on top of other windows. Now on a monitor capture you would see this on stream of course (or if you capture with a capture card) but if you use window capture or game capture this window is only visible to you.
To remove a background, if you are using the window capture option, just use the chroma key feature. I think I show it in the video quickly, its just 2-3 clicks.
(Thoughts its best to answer here for everyone that has a similar question :))
 

XoeRli

New Member
Re: [Guide/Video] How to add a Chat-Overlay

The reason why I ask this is, I have only one monitor and it sucks ( sry for this word ^^ ) a lot to play a game in a resolution of 1024 or 1280 :/
So I need a solution where i can see the chat if i play a game in 1920 windowed mode :/
So you say that the only solution is to use the IRC?
Do you have this guide on your Blog?

Damn IPhone correction with german keyboard settings ^^
 

Jack0r

The Helping Squad
Re: [Guide/Video] How to add a Chat-Overlay

Its not a real part of the guide, just a bonus of the plugin for mirc:
https://code.google.com/p/twitch-irc-ch ... xt-output/

You can also probably use AutoHotkey to put any type of chat window on-top and transparent btw, so you dont have to stick to mirc if you dont like it. But you will have to search a good AutoHotkey script for that :)
 

XoeRli

New Member
Re: [Guide/Video] How to add a Chat-Overlay

It doesn't work :(
The script works but I can't login to my twitch account... There is an error message:

- -tmi.twitch.tv- Login unsuccessful

I am 100% sure that my Login is correct. I have checked it.. :(
I hope you can help me :/

Edit:

The programs I have downloaded for this were:

mIRC 7.32
twitchat v3.04
 

Jack0r

The Helping Squad
Re: [Guide/Video] How to add a Chat-Overlay

hmm, make sure you enter your name in lowercase letters.
although my chan is Jack0r i have to use jack0r on irc. if that doesnt help, do you have any custom symbols in your password or something special?
 

XoeRli

New Member
Re: [Guide/Video] How to add a Chat-Overlay

The username only consist of lowercase letters and my password of lowercase letters and numbers. There is nothing special in my username or password :(
 

Jack0r

The Helping Squad
Re: [Guide/Video] How to add a Chat-Overlay

Hmm the only other setting I did was identd and name to be the same as my twitch name.
You could try setting up mirc yourself to connect to twitch chat and test that without the plugin. There is unfortunately just a justin.tv guide but its the same for twitch, so just use that one http://www.justin.tv/p/irc_guide
If you have a few minutes, join us on the obs chat and highlight me (jack0r|ths) or ask the guys for help.
 

XoeRli

New Member
Re: [Guide/Video] How to add a Chat-Overlay

I will try it tomorrow when i am at home. If i have further Problems i'll write you a pm if it is ok. Thanks for your help and Time ;)

Edit: It works now... i dont know why.. I didn't change anything :/
Anyway... it works now - that is important :D Thanks again for your help
 
Status
Not open for further replies.
Top