Jump to content

GUIDE: Live Streaming 2.0


Neerrm

Recommended Posts

(I wrote this guide for a different site, but it's done in such a way that it can be used here, so.)

Hello everybody! I've been meaning to do this for a while, and as I have to set up my new computer for streaming as it is, I figure I'll write a guide to help out those who are unfamiliar with the process, and maybe we can get some more action across all of our games onto the interwebs!
 
First off, what is "streaming"? Live streaming, or streaming for short, provides real-time video upload to allow others to watch you play. This can be useful for showcasing scenery, dungeon runs, PvP tactics, proving you're the best at the game ever, whatever you want to use it for! These streams are hosted by a number of different sites, but for the purposes of this guide, we will be using TwitchTV.
 
I would like to point out that this requires two things: a halfway decent computer, and more importantly an internet connection with sufficient upload to handle consistent upload of the video stream. You'll be struggling if you don't have both of these, but it's not -impossible-, per se. I'll go into more details regarding quality settings later on in the guide, and what can be adjusted for quality/sanity purposes.
 
Alright, so let's get to it!
 
Step 1: Sign up for a TwitchTV account

Visit TwitchTV's front page and you'll notice a button in the upper right labeled "Sign Up." Sign up for an account there, get it all activated through your email.

Step 2: Download Open Broadcaster Software

The program we'll be using to stream all of our gameplay is called Open Broadcaster Software, or OBS for short. It's an open source program that in my opinion blows all of the other options out of the water. And best of all it's completely free!

Download the software, and get it installed. There's a big green download button on the main page, and installing it is a snap.

Step 3: Configuring OBS

First things first, we'll have to gather some information about our internet connection, in order to know what to configure later on. Visit SpeakEasy.net in order to run a test on your connection.

Choose the location closest to you, and the test will begin, first with your download rate, and then the upload rate. We are most interested in the upload rate.
 
For example's sake, I'll put my results here:
 
 

Quote

Your Speed Result:
Download Speed: 51681 kbps (6460.1 KB/sec transfer rate)
Upload Speed: 4996 kbps (624.5 KB/sec transfer rate)

 
So, my upload rate is 5000 kbps, more or less. Time to continue onward!

Open up OBS, you'll see something like this.
 

uazSOba.png


 

Our first stop will be the Settings... button on the bottom. This will pop open the settings configuration box. The general tab doesn't really have anything of too much note (outside of multiple profiles, which really aren't necessary since you can set up multiple scenes, but that's beside the point).

So switch to the encoding tab. Here, you'll see the following:
 

lTiSABq.png



The option we're interested in here is the Max Bitrate field. Remember your upload speed from earlier? This is where it comes into play. Note that you don't really want to top out the connection, otherwise you'll have trouble communicating with whatever game you're playing and you'll start to lag. So, by a general rule I'd say you can set your bitrate to roughly a half to three quarters what your upload speed was from the test. Also, Adobe has a recommendation chart for the bitrate necessary for the quality of stream you want to do (the chart maxes out at 720p), so if you're confused as to what value you want to put in there, you can reference that chart. I'll be setting mine to 3000, as my upload rate from the test was 5000.

Also, we can adjust the quality of the audio here by editing the audio bitrate. There really shouldn't be a reason to change it from 128, unless you're really trying to impress people with sound quality.

Apply your changes, and then our next step is the Broadcast Settings page.
 

2nGKoQP.png



(This has changed significantly since I last configured it. o_O Neat.)

First, set mode to Live Stream if isn't already. Next is streaming service; choose Twitch / Justin.tv as the service. Then in the server dropdown, choose the server that is closest to you. (For me, that's San Antonio.)

The next part is the stream key, which you obtain from the TwitchTV site here. Click the Show Key button, and then copy-paste that key into the Stream Key box in OBS.
 
The next thing you'll want to configure is the Dashboard Link. In that box, type in this: http://www.twitch.tv/broadcast/dashboard
This will allow you to be able to click the Dashboard button in OBS and it'll kick you to your Twitch dashboard, where you can easily edit the title of your current stream, access the stream chat, and get a preview of how your stream looks when it's up and running.

This is all that needs to be configured on this page. If you want, you can set hotkeys for Starting/Stopping streams. Do note the red text about settings not being optimized; we'll handle that later.

Onto the Video tab!
 

MQ7KqhS.png



The proper video adapter should already be selected, along with the correct resolution. Note that this is not the resolution of the game you'll be streaming; this gets set later. This should match the resolution of your desktop.

The most important option here is the Resolution Downscale option. I'll bring up the Adobe chart again. Depending on what your bitrate was before affects your best choice here, as well as whatever resolution you run your game in. Also, if you have a slower computer, this is where you'll want to scale it down more as well. The more downscale, the lower quality your stream will be. But you need to find an equilibrium here, that will allow you to have the quality stream that you'd like, without having your computer/connection explode. If you're confused about what to set here, try streaming with different downscale options until you find something you're happy with.
 
FPS is just that, the amount of frames per second that are streamed. 30 is a sensible number, and really only needs to be changed if you're just unsatisifed with 30 fps.

Next is the Audio tab.
 

arSabUL.png



I think that Desktop Audio Device can be left on Default. I'm not 100% positive here. If you're trying to stream and it's not working, then try and find the options that says "Speaker" and possibly some text after it. Both options should make it so that the sound from your computer is streamed. Do note, that if you have Teamspeak coming through your speakers as well as game sounds, then Teamspeak will be broadcast as well. However, for example, if you have the sounds of your game going through your speakers, and then voice chat going through your headset, then you'll have to choose between one or the other. There are ways to have them be separated and stream both of them, but they're beyond the complexity of this simple guide. If you're really interested in doing this, contact me separately and we'll work through it together.

The Microphone device is used if and only if you want whatever you're saying to be streamed. If you plan on streaming TeamSpeak chat along with your stream, then set this to your microphone. Again, I am unsure if default works here (to be honest it probably doesn't). You should see whatever name of your headset/microphone is in the dropdown box, so you're probably better of selecting that. You'll also want to set the push-to-talk hotkey to be the same as the one you use in TeamSpeak. This will make it so that only what is heard over TeamSpeak is what is broadcast to the stream. If it is not set, then anything and everything you say into the microphone will be broadcast to your stream. If you don't want any microphone or voice chat to be broadcast at all, simply set the Microphone device to Disabled, which is what I'll be doing for now.

Not too sure about the rest of the settings; they should be pretty self-explanatory. If people have having trouble hearing your microphone on your stream, turn up the Mic/Aux Boost. If people are having trouble hearing sound in general, turn up the Desktop Boost. Not even sure what Mic Time Offset is, but it shouldn't be necessary.

Onto the Advanced Tab!
 

QeQvV1m.png



The only thing necessary to change here is the option from the red text earlier, the Keyframe Interval. Change this to 2 as per the red text.

In the event you're using your microphone without push-to-talk, then you'll probably want to play with the Microphone Noise Gate option. Otherwise, nothing needs to be changed there.

That does it for the Settings dialog! Woo!

Step 4: Adding Sources

Now that everything in the settings is configured, it's time to set it up to actually stream your game of choice.

Leave OBS open, and fire up the game you're wanting to stream. Now, leave that open and navigate back to OBS.

Back on the main OBS screen, right-click in the white Sources: box, navigate to Add -> Game Source. Give it whatever name you want (probably after whatever game it is). This will bring up the following dialog box:
 

dxKqXu0.png


 
First thing to do is to select your game from the Application drop-down box. If it's not there, click Refresh and hopefully it'll be there. Next, assuming you want your game image to take up the whole screen, you'll want to check the Stretch image to screen option. Also, depending on whether or not you want the game to capture your mouse movements, you can enable/disable that. (For example, if I were to stream FFXIV, I'd disable it because I play the game with a controller, so having it track the mouse cursor is pointless.) Once everything is set there, click OK.

And for our general purposes, that is everything! In order to start streaming, click the "Start Streaming" button and you're off and rolling! You can link people to your stream by giving them the URL of your Twitch Channel: twitch.tv/YourTwitchUsername

Note: A preview will show of your stream in the OBS window, and for me, the preview is super-choppy. However, if I view my stream, it's fine. So, long story short, don't rely on OBS's preview for an accurate representation of what the stream will look like. It's best to either view the stream on another computer if you can, or ask someone to verify the quality of it.


If anyone has any questions or needs anything clarified, then feel free to ask!

Link to comment
Share on other sites

  • 2 months later...
  • 1 month later...
  • 5 weeks later...

Someone just mentioned to me how they struggled to follow the broadcast of one of my recent games, and they were watching on a cpu. Is there something I can do to make it not so laggy and choppy (not the game play itself, which was fine, but the broadcast) I've noticed this too, but only on my older laptop that would overheat. My phone actually gets it again, but it's either good or non receptive.


Link to comment
Share on other sites

  • 2 weeks later...
  • 8 months later...

Its been a while since a post in this thread but since its a sticky i dont consider it a necro. 


 


Would this be a good place to talk about stream layouts and overlays? or do you think another thread might be good for that? I've spent a good amount of time building out overlays for people as well as myself. I could even throw up a few overlays for people to use including my new one for TSB that i have. We could even get a compendium of overlays that people create. There is a big difference between watching a stream that is just the game and another which has multiple things such as cameras, on screen chat, music ticker (if there is music playing), etc. 


Link to comment
Share on other sites

Its been a while since a post in this thread but since its a sticky i dont consider it a necro. 

 

Would this be a good place to talk about stream layouts and overlays? or do you think another thread might be good for that? I've spent a good amount of time building out overlays for people as well as myself. I could even throw up a few overlays for people to use including my new one for TSB that i have. We could even get a compendium of overlays that people create. There is a big difference between watching a stream that is just the game and another which has multiple things such as cameras, on screen chat, music ticker (if there is music playing), etc. 

 

Right here would be the perfect spot IMO. Show us what you've got!

Link to comment
Share on other sites

3 Steps to Creating an Aesthetically Pleasing Stream Scene

 

 

 

Step 1) Knowing your resources

 

The first and biggest part of building out an “overlay” is knowing what resources you have.

 

is it just the game footage? do you want to include the stream chat on screen? do you have a camera or multiple cameras you want to use? is there going to be music playing? is it a tournament where you want and can showcase multiple games at once?

 

All of those and many more are questions you should be asking. What did I do as a beginning streamer a few years ago? Well… I did research before I even thought about streaming and this is what it denoted. (1) Game footage should always be the most pivotal point of your stream but by always we mean it should never dip below 51%... it should always be the majority of the focus no matter what game you’re doing. This can be done in many ways which will be discussed in a later guide. Back to research though. Outside of gameplay people tended to typically be more fond of seeing their streamers reactions.  (2) So I added a “facecam” (just a simple webcam) so that my viewers could see my reaction and also get the feel I was talking “TO” them when I would look at the camera and talk. OK… added… whats next? The #1 rule with streaming etiquette is don’t allow “dead air” unless its literally a BRB moment… even then there should be some sort of audio such as music. So I added a music playlist. with that though comes problems. People always want to know what a song is. (3) Instead of having to take the time to answer them just throw up a song title ticker (this also covers BY clauses of Creative Commons licenses). So I added that on top of the music. (4) Lastly people liked video or art to accentuate the experience giving off the personality of the game, event, group, or person being streamed or streaming. I helped stream a tournament that was giving away an OUYA for a tourney. The overlay was littered with ouya related things and nothing really about the game. That is an example of “Event Personality”

So with that being said there are 3 things that I started with which every beginning stream needs.

  1. Overlay/Art/Background
  2. Webcam/Facecam
  3. Music to help with “dead air” combined with a “title crawl”

After streaming a while it became apparent though that I had been missing something. The stream chat on screen. I won’t explain it but its great for archiving conversations and why you are saying certain things on stream in archives. VERRRRRY IMPORTANT... So we’ll add that

 

     4.  On screen Chat.

 

With that knowledge we have the general basis for your first stream single scene overlay/setup.

 

Step 2)  Designing your Scene Assets

 

v6B52Zgl.png

This is the image we will use for the background. I edited it to fit the way I wanted. Just some copy paste work.

 

Next we come to how we’re going to display those resources. The main part you want to do first is get some screenshots of your different visual assets. This includes gameplay, Camera, and Chat. These will provide you with reference sizes for most of what you do. once we have those we can start work on the brainstorming behind what we’re making our scene for. If its a “general” games overlay then find or create a piece of artwork as the general “Theme” for your stream. If its for a certain game then find game assets (usually released by publishers to promote the game such as desktops or things like that). If its for an event then get things related to the event (christmas trees for a christmas stream or OUYA stuff from my example before). The main point of emphasis here is try to keep it from being too “loud” as it detracts from gameplay (you can do editing to fix this later if you want as well).

 

Now. For how you’re going to work on these. Go download Paint[dot]NET and install it. I like this program because its open source, has a good community, and can do a lot of functionality without a lot of knowhow (which was always great for clients who didn’t know photoshop). Once you have that you’re ready to start building out your overlay. Start with a blank canvas thats the aspect ratio of what you’re going to be streaming at (i use 1920 by 1080 but you may use a lower resolution) by going to image > Resize > put it in. Once thats done drop your basic artwork onto the background and we’re going to get started.

 

Overlays come in two types. UI Based (gernally referred to as just overlay) and Modular. Most people use a modular for most games... because its the easiest… which is why we’re going to do a modular… YAYYYYYY!!!

Anyways, All a modular overlay does is create segregated areas for each asset you have. So with our blank canvase we’re going to create new layers for our screenshots of our Assets (gameplay, chat, camera). Once you have those in we can start working on the finer points. We’ll use Tecmo Super Bowl as our game of choice and make it a game themed overlay. Remember that each of these objects will be rendered by itself so that we can layer the specific Items on top of each other in OBS.

(--NOTE-- if you line up your video and chat assets the way you want them displayed on the screen It makes it a bit easier later down the road in our 3rd step… spoiler alert… named “implementation”)

 

HAV68Jul.png

Lay out your screenshots how you want them to show up on the Overlay. 

 

- GamePlay and Camera

These items will need, at their less than most basic, a border. This helps distinguish their outer limits and give the viewer a representation of where to look when things are empty. for this we’ll just create a new layer, draw a box on the new layer around your Camera or GamePlay asset, Create a blur effect on that box to give it some “pizzazz” and cut the original boxed shape out of the inside. This is the most basic quick border you can do. Takes about 5 seconds and doesn’t look “horrible” at the same time. Its easy to change the hue of and is multi-faceted in its use. Do the same thing for the other video asset you have whether its the camera or the gameplay and BOOM… you’re done with a huge chunk of the overlay.


L6a3jEAl.png

Draw borders around your "Video Sources" and use a blur. I used Fragment here.
 

- Music Crawl area

Typically this needs to be long and slender. Unlike the video frames we need to put a background to this as well. Lets use part of a game asset for this. How about… idk… … the score board =) just grab it… Paste it into a new layer... cut the top down a bit and add a bit of width on it and BOOM!!! once again another asset is done and we can move on. Quick and Easy just the way I like my… … Tecmo 80 yard TOUCHDOWNS!!!

 

CTGbmvul.png

Create and add your music crawl area. I actually combined the MUSIC text with this one. its at the bottom BTW.

 

- Chat area

We definitely want something that is going transparent as we’re going to want to still see some of the background we’ve chosen as its a cool background from a game asset (a rather nice cutscene of one man who many call “the GOAT”) and we want to showcase it. So lets do something simple. On a new layer go ahead and select around the area that you have your chat on your screenshot of your chat. Next we’re going to use a gradient to just fill in that area (typically you just want to use the circle gradient). Lets add some transparency to it on the layer and we’re done with that. The chat will lay on top of it.

 

WUJ6oLbl.png

Just create something transparent to go over Mr Montana. Do it slightly wider than the chat itself. i actually made this one just wider than Montana.

 

- Text

One of the nicest little things that sometimes takes the longest to do is the Text for the overlay. Sure you could put some namby pamby plain text but this is TECMO SUPER BOWL… the greatest sports game in history. Why would we just use basic text? On a new layer Lets make it the White with Pink border that Tecmo had in the opening credits. And while we’re at it… lets put the bunny leaning against “Live Chat” and make the “music” text look like the yellow text from the scoreboard. Suddenly things are starting to pop off the page a big… NICE!!!! Now we’re cooking with Nigerian Popcorn!!! (My Rendered Assets for the overlay)

(--NOTE-- put all text on the same layer to help keep down the number of assets you have to render)

 

miE3232l.png

Create your Text Elements. This could be anything from Live Chat like we have here (with an image along side) or it could be "news",  "Music", a screen name, a league Name, Download Information, Stream name ... you get where i'm going with this. 

 

 

Here are a few examples of other sets I’ve done:

 

MODULAR:

NinjaFanz - something I did for a good xbox friend from my days playing my 360 continually. All artwork was done by hand by me

Panzar - What I used when I was doing the official streaming for Panzar. uses game assets to create something specific for them.

Ungraded Potential - A overlay I did then modified and gave to a good IRL friend of mine. All artwork was done by hand (except the outline of earth) by me

CityScape - One of my main basic modulars I use personally

WoodSplat - The other main basic modular I use personally

Kildur - Made this specifically by request for a good friend of mine. All artwork was done by hand by Me

TSB Stadium - This was done by me back on the 29th and 39th of october 2014. Its a little more advanced of a modular but i like it. 

 

UI Overlays:

Diablo 3 - Barely used this one. Game assets and other artwork used for the creation of this

Firefall - Did 3 seperate versions of this but dont have them all. Besides the game emblem everything  was done by hand by me

FreeFall: Tournament - Did 2 versions of this which i have both. Besides game logo, tank model, and tank emblem all artwork was done by hand by me. 

Quintet - All artwork outside the spaceship models and logo were done by me. It was a very minimalist overlay and even had a modular version of it as well. 

 

VARIOUS:
AirMech Items

Basic Stream Items

 

(i've done more but either dont have them anymore or am not allowed to give them out.)

 

3) Implementing

We’re at the final step and all I can think of is singing “The Final Countdown” at the top of my lungs… Implementation of all your assets… So now we open up OBS (my preferred free streaming program even though xsplit can do a lot of cool things with your assets). Lets create a new scene and call it “TSB Main” as you might add a brb and staging and whatever else later. Once thats done right click in the source area and start adding your assets. The typical order i go in is:

Background, Capture of Game, Game Frame, Chat Background, Capture of Chat, Chat Text, Crawl Back, Crawl Text (actual Text source object), Music Text (image if its not already in place from the chat text), Camera Source, camera frame.

The reason I do it in this order is because it makes the things you typically touch the most on the top and the things you don’t normally touch on the bottom. Easy access… much like QB Eagles easy access to the first down marker on a pass play.

 

Now that we have everything in place we’re going to do a few things to make this a bit better.

 

CHAT - First off go ahead and open the properties (right click on name of source > properties) of the actual Chat capture and we’re going to go ahead and make this background transparent. Click the Color-Key checkbox, grab the ink dropper and click on the background of your chat area on the screen. Badda-Bing… Badda-Boom… Its transparent.

Some things of note on the chat though. 1 - I prefer a darker tone for my chat backs so typically a white text pops off better. For this I use chrome with the stylebot plugin. It allows me to change the CSS on any object. I give it a gray background and white lettering. 2 - Most people will go with “window capture” source when going for chat. I prefer to just make it a subregion of a Monitor capture because i’ve had issues with the window capture losing focus before. you’re not going to use that region during stream anyways so hey… why not.

 

MUSIC CRAWL - There are many ways to do this for various different music players. A simple google search will show you how to do it for yours. Me personally… I use winamp connecting to a shoutcast. Along with that, I use the AMIP plugin that puts the current information of what you’re playing in a text document. You can go to the preferences of your text Item that you’ve layed out and change it to the “read from file” option. This option has many uses but we’re just using it for this auto changing song text file here. Once you’ve selected the file go ahead and click “OK” which populates it (if you have music playing) on the screen. Go ahead and line that up properly to the left side of your song crawl area. We’re going to go back into preferences and get the settings straight now. Go ahead and set the scroll speed to 20. Its a good fast rate thats still slow enough to easily read. Next go ahead and put a 2-4px border on the text. Finally, use the “use custom text extents” to size it up. The first area is width and the second is height. I generally find 50-60 a good height but the length can be anything. Fiddle around with the length till the green line that appears is at the edge of your crawl region.

 

aLmVlXgl.png

This is how it should look after you have it all set up and done.

!!!YOUTUBE VIDEO SHOWING OVERLAY IN ACTION!!!

 

That’s about it. You’ve done a modular overlay. Congrats. Now go start experimenting with doing more. Next time I’ll show you a few more advanced items to make your stream do what Okoye does to the colts defense (without the corn part) even more. Lastly though I’ll leave you with a few more things that you might not know about OBS.

 

  • Holding Shift while resizing changes the aspect ratio of an item… also called skew.
  • Holding Alt clips an item. This is great for custom text images as you can crop out the rest.
  • You can set hotkeys on Scenes so that you can quickly switch between them. This is great for when clicking elsewhere takes you out of something full screen.
  • If you’ve gone with a larger resolution set of images than you’re broadcasting at you can set in the main settings a downscale instead of the full change so you dont have to resize/redo your whole setup.
  • You can do an image slideshow for your background by picking that source instead of a standard single object and it has fading (fading slideshow is one of the few things which xsplit doesn’t have and OBS does.)
  • In the sources for a scene you can hold CTRL and hit up or down and it will move that Item higher or lower in the layering. A lot quicker than right click > positioning > move down/up 1. Sadly this can’t be done with scenes but since OBS supports multiple scene sets now we dont have to worry about that =)

 

Thank you for your time,

ComptonEMT

Edited by ComptonEMT
Link to comment
Share on other sites

  • 1 month later...

Im looking to get into streaming all the tournaments I attend, including my own. I currently stream all my online league games that I play and I can work  that pretty well. I need some direction when it comes to the live tournament streaming though. I assume I need some sort of an adapter to capture the video from the NES console to the PC. I would like to know what adapter I will need along with any cables or cords.


 


Any help would be greatly appreciated


Link to comment
Share on other sites

  • 1 month later...

Im looking to get into streaming all the tournaments I attend, including my own. I currently stream all my online league games that I play and I can work  that pretty well. I need some direction when it comes to the live tournament streaming though. I assume I need some sort of an adapter to capture the video from the NES console to the PC. I would like to know what adapter I will need along with any cables or cords.

 

Any help would be greatly appreciated

 

I had the same ?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...