How to Overlay Chat on Your Live Stream

Discussion in 'Video and Streaming' started by Bwana, Mar 4, 2012.

    • Forum Administrator
    • Premium Supporter

    Bwana WAT!

    One of the best ways to encourage interaction your live stream is to embed chat on your stream. I've been doing this for years with other software, but recently I've been doing it using Xsplit, a popular live streaming application. This post will hopefully enable you to do so on your own stream. There are several accompanying applications which can do this, but here are the ones I use and recommend:
    1. XSplit - http://www.xsplit.com
    2. HexChat - http://hexchat.github.io/ (X-Chat WDK was rebranded HexChat)
    The first thing to do is to configure and optimize your stream using XSplit. There are several tutorials on how to do this. Once that's done, move on to HexChat:
    1. Open HexChat
    2. Open the Network list to configure your channel's irc channel (HexChat menu -> Network list)
    3. Click "Add" to add a new network and supply a name for it. I use the convention "JTV-channelname" to organize my list (I called mine JTV-bwana)


      [​IMG]
    4. Highlight your new channel in the list and click Edit
    5. Change the server name to irc.twitch.tv/6667. BE SURE TO HIT ENTER TO APPLY THE CHANGE!
    6. [OPTIONAL] In the Connecting section, check the box next to Auto connect to this network at startup if you wish to connect automatically
    7. In the Favorite channels box, type in your channel name preceeded by a #. For example, my channel is "bwana" and for me it would be "#bwana"
    8. IMPORTANT!! In the Server password" box, enter your Twitch chat_login OAuth token. You can generate one >here<. If you fail to do this, you will not connect!
      [​IMG]
    9. Click Close
    10. In the Network List window, Click Connect to connect to your channel. You should see a bunch of MOTD text (Message of the Day) text scroll by and if you followed step 6, you will join your channel automatically. To manually join your channel, type "/join #yourchannelname" in the input box and press Enter
    11. Congratulations! You are now connected to Twitch irc!
    The next step in all this is to configure the colors of HexChat so that they will look good in XSplit. Personally, I prefer to have my chat transparent on my stream, but the choice is ultimately yours. To configure the colors of HexChat:
    1. Go to Settings -> Preferences menu
    2. In the Interface - Text box section, update the font to your desired font. I use Calibri Bold 16
    3. Check Colored nicknames, Indent nick names, and Show marker line. I find that these make it look better to the eye. You can optionally turn on time stamps if you wish.[​IMG]
    4. Navigate to the colors section by clicking Colors in the interface section[​IMG]
    5. There are several colors to change here, but the ones you should be concerned with are background and foreground. I set my background to black and my foreground to white - This will make transparency easier in Xsplit. [Note: If you wish, you can use a background of lime green to give a "green screen" effect, but I find that a black background makes the text look better transparent]
    6. Click OK to apply changes. Your chat window should like somewhat similiar to this. Play with the other colors to get your desired look.
    7. [OPTIONAL] I turn off channel joins/parts so you don't have to see all the people who leave and join. To do this, go to the Advanced section and check Hide join and part messages. Unfortunately, I don't know of a way to hide operator status messages.
    [​IMG]

    The hard part is over! Now it's time to configure XSplit to overlay the chat on your stream.

    1. Open XSplit and select the desired scene
    2. Add a new screen region source. (Add -> Add screen region) Select an area around the chat window text area. Don't select the title screen or window areas![​IMG]
    3. You should have your chat on your stream now! Now it's time to make it look pretty. Select the newly added screen region source and change the color settings (Settings -> Color)
    4. In this popup window, Check the box next to "Chroma key" and select the key "Color"[​IMG]
    5. Your chat window should be transparent! Resize your chat overlay to desired setting
    [​IMG]

    Make sure you don't make it too big and intrusive. You want the chat area to compliment your stream but not dominate it. For example, here's my chat overlay during my Mass Effect 2 game play. Note how the chat doesn't cover up the closed captioned text and is out of the way of the game.

    [​IMG]

    Some notes:
    • Twitch irc has been known to be a bit... unhappy at times. If you find yourself constantly reconnecting or unable to connect, it could be something going on on Twitch's end.
    • This tutorial is optimal for those with dual monitor setups or have a high resolution. The chat window needs its own dedicated area and if you cover it up with another window, it'll mess things up.
    I hope this tutorial helped you and if you have questions, feel free to reply.
    • Like Like x 6
  1. Nicholasfunstuff Jedi Knight

    Thanks for that great tutorial!
    • Premium Supporter

    Seroms Level 5 Laser Lotus

    +1 for tutorial
    +2 for Mass Effect
    • Like Like x 1
  2. Black99star Recruit

    I hope they have a linux version of this. lol cause that's what I'm running now. Thanks for the tips Bwana.
    • TwitchTV Channel Op

    endless The One And Only

    Really good tutorial! Wish I had faster upload so I could stream.
  3. Epictek ;D

    Great tutorial I did this in the past when I streamed :)

    Xsplit is windows only.
    As for XChat there is a Linux version http://xchat.org/download/
    • Premium Supporter

    TeKniffen Minecraft Engineer

    [​IMG]
    • Like Like x 7
    • Premium Supporter

    Seroms Level 5 Laser Lotus

    [​IMG]
    • Like Like x 2
  4. Epictek ;D

    [​IMG]
    I was tired when posting that lol
  5. Shadowblight Newbie

    Okay so um... excuse my questions but this is somewhat related, yet not really.

    First off, I have only one monitor, and unfortunately space for only one monitor on this desk.

    I am trying to actually get my IRC chat from Twitch to display overlayed on my game directly. Now, I can't of course get the thing to pull through on a fullscreen game, but my thought was to put it in fullscreen-windowed mode, then force the thing on top.

    My problem is that obviously I'd just want it to show a few lines of text... preferably with a way for me to set the location and size of the window, and no title/scroll bars.

    With a program like mIRC I know there's a way to do that, because you can set a custom window. But I couldn't figure out how to get the background transparent alone. So I was hoping to use XChat's transparent background... but I can't find any commands to let me do a desktop window with it. D:

    Is there any ideas someone can give me on this?
  6. Bamse Newbie

    awesome guide. sorry for necroing tho ;)

    How do you do the overlay showing how many online viewers there is, like in the picture second to last?
    I've been trying like a mofo to get one working, but all my attempts end up sucking :p

    Thanks in advance!
    • Forum Administrator
    • Premium Supporter

    bGeorge Friendly neighborhood bandit

    Its a PHP script that you use with the remote text option in an XSplit title. You will need a webserver/host to host the script though.

    http://bashtech.net/twitch/xsplit/twitch-stats_php.txt

    Edit: Also need a this utility script in the same directory: http://bashtech.net/twitch/xsplit/curl_php.txt
    • Like Like x 2
  7. Bamse Newbie

    wow. thank you so much! :D
    • Like Like x 1
  8. Revenger96 Newbie

    Hey.

    Awesome tutorial, but i cant seem to get it working. :(

    My stream channel is http://da.twitch.tv/revenger_stream

    I tried this "Revenger_Stream.jtvirc.com/6667" & "revenger_stream.jtvirc.com/6667", with no luck.

    And as channel, i tried this "#Revenger_Stream" & "#revenger_stream", with no luck.

    My password is correct, and i keep getting this error message:

    * Looking up Revenger_Stream.jtvirc.com
    * Connecting to revenger_stream.jtvirc.com (199.9.253.199) port 6667...
    * Connected. Now logging in...
    * Disconnected (Remote host closed socket).
    • Forum Administrator
    • Premium Supporter

    Bwana WAT!

    For your nick name, make sure you use lowercase revenger_stream
  9. derp Newbie

    I am having the same exact issue.

    I did that too.

    This is what my error looks like:

    * Looking up sikosgprez.jtvirc.com
    * Connecting to sikosgprez.jtvirc.com (199.9.253.199) port 6667...
    * Connected. Now logging in...
    * Disconnected (Remote host closed socket).

    My twitch nickname is obviously sikosgprez in all lowercase so there is no margin of capitalization errors. How do I fix this?
    • Forum Administrator
    • Premium Supporter

    bGeorge Friendly neighborhood bandit

    Also make sure you are passing your Twitch password in the connect command. The general process should look like this:

    /nick bgeorge
    /server bgeorge.jtvirc.com 6667 bgeorgespasswordgoeshere
  10. derp Newbie

    The tutorial never states to put the Twitch password into the "connect command" field but I just tried it and I am still getting the same error.
    • Forum Administrator
    • Premium Supporter

    bGeorge Friendly neighborhood bandit

    You don't put it in that field. This is an alternate method that skips steps 2 - 10. Just open XChat and type those 2 commands in the text field.

    The only too reasons you should get disconnected immediately after connecting is your nick is not in all lowercase or the password is incorrect.
  11. derp Newbie

    I don't understand. What do I type to replace "nick" in the first command? I tried /siko sikosgprez and /Siko sikosgprez and all i get is "Unknown Command. Try /help". I also tried /nick sikosgprez obviously. Still nothing.

    Well my nick is in all lowercase and my password is correct.
Facebook: