Tutorials - Twitch.tv Support Forum

Seting up the Channel page

nystell — Mon, 07 Jan 2013 02:53:37 +0000

Hey all,
I am looking to start broadcasting soon. However, before I get to that, I want to setup my page the way I want. However, I do not know how. I want to put a Paypal donation button, graphics for the different sections.
I want my channel page to look professional and clean, not just thrown together. I have no knowledge of HTML or Flash and how to incorporate it into my page. Is there a guide that can help me out with this? So someone that can give me a few tips? Thank you.

Advertise your channel with live stats

primusgamer — Fri, 28 Sep 2012 17:49:12 +0000

Advertising with live stats

So i've made this little thing for forums and websites.

All it does is show live stats about your stream channel using the Twitch API.

It is still in development, so i'd love to know what you guys think about something like this.

As this is just an image that auto updates, you can use it practically anywhere!

Are you a frequent user of a certain forum? Put it in your signature! Do you have a personal website? Put it there!

Examples:

Example shows image when stream is Online

Example shows image when stream is Offline

As for what it does:

Fetches data from your channel through the Twitch API.
Caches pulled data for 2 minutes to avoid massive API requests (limits requests to 1 every 2 minutes).
Shows streamer name, current viewer count and the game title being played.
Shows you as offline when you're not streaming

Live example: http://primusgamer.com/twitch/?u=YourUsername

How to use on forums (BBCode)

[IMG]http://primusgamer.com/twitch/?u=YourUsername[/IMG]

How to use on websites (HTML)

http://primusgamer.com/twitch/?u=YourUsername" alt="Watch my stream!" />

I really want to hear what you guys have to say about it. Is it something you would use? Just have a comment on it? Go post something! :)

[LONG/TL;DR] Complete XSplit Streaming Walkthrough (Screen region/Gamesource/Dxtory)

Fire — Fri, 06 Apr 2012 02:27:21 +0000

This is a basic walkthrough to get started streaming with XSplit (optionally with DXTory alongside)
It's intended to set up a 1280x720 stream, but it also applies to lower resolutions (1280x720 is just the standard, you always teach for the standard)
It does take a decent computer to stream. It's mostly processor-bound, and quad cores will outperform dual cores.

You might want to grab a drink, this one's a doozy.

Got it? Had your bathroom break? Are you ready?

Alright then, lets get started.

Visit your Twitch dashboard at least once to "create" your channel. Either click your name on Twitch and click Dashboard in the dropdown, or just go to http://twitch.tv/broadcast/dashboard , that's it. Your channel is now a thing that exists.
This is also where you set your Stream's title and what game you are playing.
Get comfortable with it, as it's a great tool to managing your stream.

Download and Install Xsplit: http://www.xsplit.com/

In Xsplit:

Click View -> Resolution -> Choose a resolution (ex: 1280x720). If the resolution you want doesn't show up in the list, click the option to edit resolutions and add a checkmark next to any resolutions you'd like the option to stream at. If you have trouble streaming, try lowering the resolution.

Click View -> Frame rate -> 30.00 fps. If you have trouble streaming (or are a free user), try lowering this to 25

Click Broadcast -> Edit Channels, click Add, then Justin/TwitchTv

Put your username (all lowercase) in the username field

Put your password in the password field

Choose the best broadcast server for your location, you can find that out by clicking the location dropdown in your XSplit channel settings and choosing one with the low ping and ( preferably ) low jitter ( That means the latency does not jump around very much ).

Livestreaming With OBS (Video Tutorial)

bloodburger — Thu, 03 Jan 2013 04:14:02 +0000

Hey guys! Just finished with this OBS tutorial and figured I'd share. It covers pretty much everything you need to know to get started. Check it out if you're interested:

How does someone see the chat during live streams?

vrekon — Sun, 06 Jan 2013 01:48:15 +0000

I don't know if it is due to my own incompetence but I can't figure how to set it so that I can see the twitch.tv chat during livestreams.

A website to view more streams.

picanteking — Sun, 06 Jan 2013 02:06:48 +0000

Hey guys. I know there is a couple of websited to enter stream URL's and add them together so you can view over 1 stream at the same time. The screen looks like this (Explanation typed)

If we have 3 streams on that webpage. The video is on one row, while the chats are under the videos.

The videos are lined next to eachother.

All I am asking for is the webpage that does this, if you know what I am talking about, answer here please :) If you dont know respond here too so I can TRY to explain better :)

Thanks.

"Moving bars" on top of the screen ?

dsr07mm — Fri, 04 Jan 2013 17:43:22 +0000

Dont know how to explain, but I'm wondering is there any tutorial or tips how to do that ? Something like moving bars at the bottom/top in news where you can read most important news while they are talking about other stuff.

For example, yellow colour at the bottom

http://cdn3.pcadvisor.co.uk/cmsdata/reviews/3369279/Sky_News_Live_TV.jpg

I know how to do pictures/watermarks but not sure about animations and since I noticed couple streamers (dont remember who exactly) on twitch, I hope that someone will provide answers.

I appreciate any help.

Greetings,

dsr07mm

Markdown Editor w/ Twitch Stylesheet

nmaster64 — Tue, 01 Jan 2013 23:06:21 +0000

As much as I hate to support Twitch's switch to the god-awful and overly-limiting Markdown, here's something to help people out with the transition.

MarkdownPad is a nice lightweight editor for Markdown w/ a live preview (Windows-only). It supports using a custom stylesheet to better preview how it'll look on websites.

I've modified that stylesheet for Twitch's new responsive-for-no-good-reason design, which I've uploaded here.

Here's a preview of the program w/ defaults and w/ Twitch styles (click to enlarge):

Installation:

Download MarkdownPad from MarkdownPad.com and install it.
Copy my Twitch stylesheet from: http://pastebin.com/6WQwBgyE
In MarkdownPad, go to Tools -> Options -> HTML / CSS
Check the box for "Use custom stylesheet".
Delete the current stylesheet and paste the one you copied before.

Notes:

Obviously Twitch's CSS may change at any time. If I update the stylesheet it will be very infrequently.
It's not bug-free. Some bad markup (usually caused by spaces at the end of lines which markdown reads as new lines) can make things display weird, and these bugs may or may not replicate on Twitch.
Browser Preview is usually more accurate than Live Preview, but they should be pretty close. If things don't look as you expect try that (hit F6).
Remember you cannot use image markdown in panel descriptions, except for the one-per-panel uploader. You can use them in this editor for previewing purposes though.
To preview panel headers, use a Level 6 header (in actual descriptions, you should really only ever use level 1 and 2 headers). Ex: ######My Panels
You can create a very accurate recreation of how your panels will look in the single-column format. Multi-column panel layouts (which depends on browser width) you'll have to test using your live page.

Hopefully this helps some others. I find it much easier to edit in this program and then just copy/paste the sections into the Twitch panels when things look how I like.

Happy New Year!

OBS Quick and dirty setup

boshytime — Mon, 17 Dec 2012 09:22:03 +0000

This is a quick setup video for OBS. I also try to touch on some of the areas that OBS absolutely CRUSHES Xsplit.

I need a graphic designer!

rispir — Tue, 25 Dec 2012 13:38:15 +0000

Hi there, I`m just starting out on the scene and I need someone experienced with designing and implementing graphics into a twitch channel! I would like to start out with a background, avatar, and banner! If you can help me out please send me a message on twitch! Please and thank you :)

TwitchTV Background Template

Fire — Tue, 17 Jan 2012 21:41:45 +0000

UPDATE! Massive overhaul of the template, now

http://minus.com/myguides#1o

preview:

Everything in the PSD can be toggled on/off, there's also a ton of ruler-guides for snap-in placement. Have questions? Feel free to ask.

Hope this helps!

new layout chipin widget

loafofbread13 — Sat, 22 Dec 2012 18:23:09 +0000

what do i need to put for my chipin id for it to work? email address? it keeps saying it cant find my event

Overlay chat using the twitch chat client

boshytime — Mon, 17 Dec 2012 09:17:42 +0000

A quick video guide showing how I overlay chat using the twitch client. I got the idea from bwana's guide, but i just didn't like missing out on the faces & the "feel" of the normal chat client. This uses the standard twitch chat, so you're able to see unique colors and twitch faces like normal.

Requirements:

Google chrome

Stylebot - https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en

[X-Chat/XSplit] How to Overlay Chat on Your Live Stream

bwana — Sun, 04 Mar 2012 19:35:25 +0000

Hello all,

I've written a tutorial on how to embed chat on your live stream using XSplit. It's fairly lengthy and is too long for this forum (character limit), but it shows you how to:

Configure X-Chat WDK to connect to JTV irc
Embed a transparent IRC chat on your existing XSplit stream

If you're interested in this setup, read the full tutorial here:

http://bwana.tv/forums/index.php?threads/how-to-overlay-chat-on-your-live-stream.42103/

Streaming with OBS (open broadcaster software)

tiduu — Fri, 23 Nov 2012 20:25:18 +0000

This is a simple tutorial for streaming gameplay with Open Broadcaster Software, a free alternative to XSplit.
Please note that OBS is still alpha software and future updates may include extra features or fix any issues you might have with it.
If you have any questions about the tutorial leave them below or contact me via twitch messages (tiduu) or twitter (@saunavaara).
For getting support on OBS you should use the official forums at http://obsproject.com/forum/ instead of messaging me.

What Is OBS?

Open Broadcaster Software is free and open source software for the purposes of streaming live media content to the internet. Source code is available to everyone to contribute and improve. Both 32 and 64 bit versions are available and it's absolutely free!

Free?

Free! Not a dime! There are no subscriptions or anything, no payments at all. OBS is available to everyone, with all features, at absolutely no cost!

Where Can I Get It?

Just visit the Download page and select the appropriate version for your operating system.

Note: the daily testing builds might contain extra features or fixes.

Getting started

Create a Twitch.tv account and get your stream key from the Twitch.tv broadcast page.
Install and run OBS.

Setting up OBS:

Go to Settings > Broadcast settings

and change the mode to Live Stream, the Streaming service to TwitchTV and insert your stream key. You should also select the closest server to you from the FMS URL dropdown list.

Next up are the Video and Encoding tabs

In video set up your streaming resolution (usually 1280x720) and set the resolution downscale to none and your framerate to either 25 or 30 fps.

Then go to the Encoding tab and set your bitrate. To determine the absolute maximum bitrate you can use you need to figure out your maximum upload speed to TwitchTV servers. But as this usually requires trial and error I recommend you to start at a safe setting such as 1000 or 2000 kb/s (for 720p streaming) and then go up slowly after you have verified that the stream works. For 1280x720 you should never need to go higher than 3000kb/s. You should also set the buffer size to the same value you use for bitrate.

Note: the x264 cpu preset in the advanced tab defines the amount of cpu power that is used for encoding the videostream (faster presets use less cpu but more bandwidth).

Audio tab

Here you can set up your microphone settings, if you do not want to use push to talk or set up a mute/unmute key you only need to select the right device from the dropdown list and you are good to go.

Setting up OBS scenes/sources

Now that you have all the settings taken care of you need to create your first scene. You do this by right-clicking on the scenes box and selecting add scene. You should set up scenes for all the games you want to stream and for a pause screen if you need one, but in this tutorial I expect you to only have one scene with a single source under it for the game you want to capture.

After you have your scenes set up you need to add capture sources to them. Again, you do this by right-clicking on the box.

For most games you want to select Add Game Capture (the game needs to be running when setting up the capture source), you should see a dropdown list of applications you can capture from. Selecting Stretch image to screen makes it easier to manage different screen resolutions.

If the game does not appear on the list for Game Capture you need to switch to Software Capture.

Using Software Capture you can select to use either a single window (for most uses) or a screen region (useful for example when you want to add the now playing section of your music player to the corner of your stream).

If you are using a capture card or want to add a webcam to your scene you need to use Add Video Capture device under sources. This also allows you to use external capture software such as dxtory.

The other sources (add image/text) are used for adding graphics (such as stream overlays and sponsor logos) or text to your stream.

The next step is to configure the sources within each scene to fit nicely to the stream window. To see your sources on the preview window you need top click on the Preview Stream button. You should now see at least one of your sources on the screen. If you are using Game Capture you need to be running the game you want to capture. After this the only thing you need to do is to right-click on the game capture source and select fit to screen. As long as the game is set up to the same aspect ratio as your stream (usually 16:9) the game screen should now fill the whole preview window.

If the source is not in the same aspect ratio as your stream resolution you might want to move it around. This is done using the Edit Scene button. After selecting Edit Screen the capture source should now have red lines around it, and you should be able to 1) scale the source by stretching it from the sides and 2) move it around by dragging it from one of the corners. This is the same procedure for moving webcam footage etc. around.

Streaming with OBS and troubleshooting

You should now be ready to stream to TwitchTV.

Open up your Twitch channel page or Dashboard to monitor your stream status and click Start Streaming. The preview window now shows the capture source you set up earlier and the stream should be live.

By this point you should have already noticed the volume controls in the main UI. These are used to set the microphone and audio capture volumes. You can (un)mute either of the sources by clicking on the icons.

You should also see some basic information about your stream on the bottom right corner of OBS. This includes the time you have been streaming, amount of dropped frames, current capture FPS and the bandwidth used to stream.

From these you should keep an eye on the Dropped Frames counter and the colored box next to the bandwidth. Dropped frames can be caused by either running low on bandwidth or CPU power, if you see the number rise constantly you need to figure out lower settings for your stream (bitrate, x264 preset and streaming resolution). If the box next to your bandwidth value is red your connection to the TwitchTV servers is not sufficient for streaming and you need to lower your video bitrate.

As long as the amount of dropped frames stays under 10/minute (preferably at constant zero) and the box green you should have no problems streaming.

As the streaming settings are directly connected to your PC performance and upload speed I will give my specs and OBS settings for reference:

Internet connection: 10/10 (Mbps)
PC: Intel i5-750 (overclocked to 3.8 GHz), 12 GB of RAM, Nvidia GTX670.
OBS: Resolution 1280x720, bitrate 2000 kb/s, framerate 30 fps, x264 preset superfast, send buffer 5840 and audio streamed in 128 kpbs AAC.

[23-11-2012] first draft of the tutorial released, based on OBS v0.466a.

TwitchTV Background Template

bgeorge — Tue, 13 Sep 2011 16:45:26 +0000

I made a quick background template to simplify creating backgrounds for your TwitchTV channel. The white area is what is normally visible, the black is hidden by the center column and the grey is only visible when you scroll down on the page. Also be mindful of the small drop shadow produced by the center column.

You can modify your channel design here.

Yet me know if you see any problems with the template.

Update!

Created a temporary template for the new design. The design may change so keep that in mind before you go crazy with a new design.

PSD / PNG

Note: The new background is stationary and will scroll with the page. This is different from how the old design used to be.

TwitchTV Channel Template

eag7e — Sun, 15 Jul 2012 14:49:21 +0000

Hi. I think you'll know what this is so I'll skip the intro.

Why did you make this? There's already 3+ others available.
I believe this one is better. Check it out.

You can download it from livestreaminsider.com, my blog about everything livestreaming.
ps. I'm still looking for (guest) writers!

I hope you'll like it. I'll try to check back on this topic regularly to answer any questions.

The New Chat

cooliemcawesome — Wed, 14 Nov 2012 01:04:26 +0000

I noticed yesterday that the height of the chat dropped a ton yesterday-ish. Luckily, I found a way to fix this that's quick. I might make something that does this automatically, but otherwise what you do is:

1. Make sure your browser has the "Inspect Element" option when right-clicking. (I believe Firefox and Chrome do)

2. Inspect the element of the chat box.

3. Find the chatbox coding. It begins (div class="nobuttons" id="chat_lines") with a bit more.

4. Right click on this and hit "Add attribute".

5. Enter this as an attribute:

style="max-height: 566px; height: 566px;"

6. Hit Enter. The Chat should change size.

Note: This only works one-time and you must do it every time you open a Twitch page or refresh. I might make a permanent or automatic way to do this. If anyone would like to, feel free to. :)

DayZ Overlay Template

chipinators — Thu, 23 Aug 2012 04:17:30 +0000

I haven't seen anyone post one of these so thought I might as well post the one I made for my overlay!

Hope this helps new DayZ streamers!

Download Link: http://www.mediafire.com/?x1p953i5eepne44

Leave a link in the comments of what you guys create! ^-^

[GUIDE] The Definitive XSplit Guide (With Video)

apoctv — Fri, 20 Apr 2012 14:33:13 +0000

This guide should be the one and only guide you need to get up and streaming like a boss, straight from XSplit community staff, enjoy!

http://www.apoctv.com/2012/04/guide-definitive-xsplit-guide-with.html

I didn't post it here directly because there is a lot of formatting and images, it would have been a lot of unnecessary work.

Downloading videos from Twitch.tv

jeffroiscool — Mon, 07 Nov 2011 03:43:58 +0000

This is out of date, please refer to the >FAQ< for current downloading methods.

-Fire

I have also posted this on the Justin.tv forums and I think it may help some people out.

I've made a script which makes it possible to easily get the source url from your twitch.tv videos.

You can find it working here: http://www.fakegaming.eu/TwitchTV/download.php ALTERNATIVE URL: http://jeffro.fakegaming.eu/twitch.php

And here's the current source code (so people who know how this works could improve on this or implement the method that I use to access the API)

Edit: Moved source code to http://jeffro.fakegaming.eu/twitchsource.txt due format issues

Hope you guys enjoy this, if you have any questions or bugs or problems to report please post here or in the other thread or feel free to message me :)

~Jeffro~

Embed Livestream to Website

karedon — Sat, 28 Jul 2012 14:23:31 +0000

How can I embed a TwitchTv livestream in my website?

How do i follow channels in the ipad

marioz1999 — Wed, 10 Oct 2012 00:01:33 +0000

I have an ipad but i dont know how to follow channels please help me!

How To Record & Include Webcam In Gameplays

chrisk321 — Sun, 07 Oct 2012 22:41:45 +0000

Title says it all really, hope it helps out many people as this was confusing to me as well

Twitch Extension (Chrome Extension)

primusgamer — Wed, 03 Oct 2012 14:02:09 +0000

Only question, what would you people think about this?

Shows extended channel and live info, also shows 5 most recent videos beneath the player.

It also adds a Download link to archived videos, for fast download.

A little something i've been working on :)

Let me hear your thoughts!

How to live stream xbox and ps3 with the Roxio game capture

gngproductionsuk — Wed, 03 Oct 2012 13:54:39 +0000

NOTE - watch this video in 720p+ and full screen for best results

Hey guys! This video is a tutorial on how to live stream xbox or ps3 gameplay from the roxio game capture on to websites such as twitch tv and justin tv

This is exactly how i have my set up and this is what gets me HD quality on my streams.
*warning* the level of HD and lag you get depends on your upload speed.
I will provide all the links to the programs below as well as my twitter and facebook page.
A like favorite and subscribe would be really helpful and only takes a second in comparison to the work it took to make this!

If you have any problems feel free to ask any amount of questions or even send in a video response and i will get back to you with help asap
Happy live streaming guys and gals!
Thank you for watching!!

Note! - can all questions please be directed to the comment section on the video on YouTube if you need help as that's where i am most likely to see your questions. thank you!

Video:

http://www.youtube.com/watch?v=7_F8p53YbAM&feature=g-upl

Help with Mac Streaming

unitingforce — Tue, 26 Jun 2012 13:32:26 +0000

Whats up guys - I put together a video that, yes long, should help out many with any troubles you might have with streaming to Twitch Tv from a Mac. Please watch and then comment below any questions, concerns and/or advise. :)

Adobe Flash (Graphics)

kn0x187 — Wed, 26 Sep 2012 06:46:28 +0000

Hello everyone, I am in the need of graphics for my twitch it has to be done w/ Adobe Flash. I know how i want it.

I am also willing to pay. Please contact me on twitter or message me.

Twitter.com/kn0x187

Live Stream Quality Guide (for Beginners)

apoctv — Fri, 16 Sep 2011 14:13:45 +0000

I wrote this guide to familiarize beginners to streaming with the basics and the common terminology.

http://www.apoctv.com/2011/05/live-stream-quality-guide.html

I am working on some more advanced guides (mostly specific to XSplit software) currently.