Sources in OBS Studio

In-depth Look At Sources in OBS Studio

Let’s take an in-depth look at each source that OBS studio offers. The version I’m showing currently is OBS Studio with Browser installer. You can download it here if needed. Sources are the key components in OBS Studio that will allow you to create different scenes to broadcast to Twitch, Hitbox, YouTube gaming and more.

Sources can images, videos, webcam captures, game captures and much more. A scene is a collection of sources – we’ll get more into scenes after the next post.

Adding Sources Into OBS Studio

In OBS we’ll see the scenes in the bottom left, and the sources next to it. A big difference between OBS Classic vs OBS Studio, is that Studio basically treats all sources as global sources. Meaning they’re always running unless we tell them otherwise. More on that in a bit.

Image Source

To add a source we can click the plus icon, or just simply right click, go to add and then select a source to add. Let’s start with adding an image source. When adding a source we’ll always be prompted to create a new one or to use an existing one. Using an existing one will be very useful for things like webcams or game captures that will be shown in different scenes.

OBS Studio Image Source

Under Create New, give it a name, and hit okay. For an image there aren’t many options. We can click browse and find the image we’re going to add in. I’m going to select a Nerd or Die logo. Before I click okay, you might notice the Unload image when not showing checkbox. If we select this box, it will tell the source to not be loaded if we’re on a different scene. For purposes of this series, don’t worry about this option at the moment. Let’s hit okay. The image we selected is now in the preview area. This area represents what will be shown on our stream. So, if I hit Start Streaming right now, viewers would see a black screen with my logo on it.

Positioning and Transforming a Source

Positioning

Let’s talk about positioning the source for a moment. These position techniques will work with all sources, so keep them in mind for future posts. With the source selected we can simply click and move it where we’d like. If we want to resize it, we can click a point of the red bounding box and drag it to resize the image. What if we want to position or transform it in different ways? We can right click the source and go to transform.

Transform

Edit Transform contains some advance techniques for sizing and positioning, which we’ll cover in later posts. Reset Transform, or Ctrl+R will reset our source to its original size. We can use the rotate options here to rotate any source. Flip horizontal and vertical can also be very useful as well. Fit to screen will make your source take up the maximum size of the preview area, while keeping the sources proportions or aspect ratio. Stretch to screen will stretch the source to fill the entire preview area with your source, and disregard aspect ratios. Center to screen, or Ctrl+d, and will make our source snap to the exact center of the preview area. If we move our source a little bit by clicking and dragging it, we can then use the arrow keys to slightly nudge our sources into more precise positions.

Edit Transform Options

If for some reason I need to change this sources original settings, I can select it in the source panel, and click the gear, or I can even right click it and go to properties. Here I can change the source image, since this is an image source.

Browser Source

Let’s add another source, this time we’ll add a browser source. I’ll just leave it’s default name and hit okay to create this source. A browser source is essentially like opening a web page inside of OBS studio. If you’re web page is stored locally on your computer, you can check the Local File box and then select the file you’d like to open. We’re going to leave it unchecked. The URL will tell OBS what web page you want to open. The width and height will be how big the source is, and our FPS will be the frames per second this source runs at, I typically leave mine at 30, which is the FPS I stream at. The CSS box is for custom code that can manipulate the source inside, don’t worry about that right now.

OBS Studio Browser Source

Shutdown when not active is actually pretty useful for this source. Enabling it will allow you toeasily refresh a page by toggling the source on and off. So, let’s actually check this box for this source. Hit okay. We’ll see the source in the preview area, and if we move it around a bit we’ll see that it’s actually covering up our logo.

This source is very useful if you’re adding in alerts or notifications to your stream, it’s actually one of my favorite sources in OBS. Make sure to have the browser source selected. I’m going to right click it in the preview window and hit interact. A window will popup and allow us to actually click inside of this website, just like if it was open in Google Chrome. If I close this window and go to the eye icon by our browser source in the sources panel, I can click it to hide the source. If I click it again to show the source, we’ll see that the page has refreshed and we’re back to our original web page. This is because we checked the box for shutdown when not active in our source properties.

Moving Our Sources In Hierarchy

What if you want the logo on top? We’ll, it’s easy to do. Make sure the Browser source is selected in the sources panel and then hit the down arrow. Sources in OBS work somewhat like layers in photoshop. Where they can be stacked on top of each other. If they’re lower in the source panel, they will be on the bottom of the stack. We can also move sources by right clicking them, going to order, and either use the move up/down options, or even move to top or bottom. You can also click and drag the sources where you’d like to move them in the hierarchy. New sources will always appear on the top.

Media

The next source we’ll look at is the Media Source. Let’s add one into our scene. We’ll leave the Local File box checked, as most files we’ll add will be stored on our computer. Most people use media sources as a movie file or a GIF, however you can add in audio files here as well. I’m going to select a movie file I made.  If you don’t have any video files to use, check out our free resources to download your own. If we want this file to loop, we can check mark the loop box. The Restart playback when source becomes active option means that if we disable the source, by either hiding it or changing scenes, the file will play from the beginning. If you’re using the source for a looping background or something like that, then leave this unchecked. But if it’s something like a scene transition or just any file you want to play from the beginning, check the option.

Media Source

Text

Next, is the Text Source. This source is pretty straightforward, but can be important for a lot of cool additions to our stream. When adding one in, you’ll notice a couple of options. We can start by selecting a specific font to use. We can choose most fonts installed on our system, what style they have, and their size. We can even add underlines or strike-throughs in this panel.

One thing I want to point out is that if you want to make your font size bigger, make sure to do it in here. If you use the click and drag method ato scale your text, it will work, but your text will become blurry with bigger sizes.

Text Source OBS Studio

We can enter the text we want to display in the text box.  Another great option OBS Studio offers is the ability to read text from a file. This will be extremely useful for things like music tickers or alert lists. You’ll basically check this file and then choose what text file to show in the Text File field by hitting browse. Let’s leave it unchecked and move on.

If you have a similar version to me, you’ll see color 1 and color 2. Color 1 will be the top color of your text, and color 2 will be the bottom part. We can use this to add cool gradient effects to our text if we desire. We can also use these boxes to enable a stroke around our text or even a drop shadow. At the time of this post there aren’t options to edit these features, but I do anticipate that they’ll be available in the near future. They should be pretty straightforward to follow.

Display Capture

Let’s add a Display Capture source next. Here you can select what monitor of yours you’d like to capture. Since I have 3 currently hooked up, I can choose which one I’d like added into my scene. I can also select if I want OBS to capture mouse cursor movements or not. I use this source when I make my tutorials sometimes, and it can also be used to capture your game footage if you’d like. The big difference, is that if you tab out of your game, people will see what’s on your monitors display. So, if you don’t want that to happen, you’ll want to use the Game Capture source, which we’ll discuss shortly.

Display Capture

Window Capture

The next source we can add is a Window Capture. This will basically capture anything that happens inside one of your windows or tabs in your computer. Let’s say I have an application like any game, Google Chrome, or Discord open. I can capture what’s inside of a specific window. I would select whatever I’d like to capture in the Window dropdown. This differs a lot from display capture, as it only targets a certain window. So even if I minimized discord, or the game I’m playing that I selected, it would show the window, and not what was behind it. For most cases you can leave Window Match Priority on its default settings. You can also decide whether to capture your cursor here or not as well. The multi-adapter compatibility setting is meant for those with PC set ups that involve crossfire or SLI. If you don’t know what I’m talking about, then don’t worry! But if you use those, and capture a game in Window capture, then enabling this setting will probably help your FPS inside of OBS.

Game Capture

Let’s move on to Game Capture. I’m going to add one into my scene and make sure I have a game open. The first option Capture any fullscreen application should automatically capture any game that you have loaded in full screen mode. Sometimes you won’t see any source loaded, unless your game is opened and tabbed to. I’ve had a few issues with this – and personally I like to play my games in borderless windowed mode – so, I uncheck this option. For Window, it’s just like the Window Capture, where we can use the drop down to select the specific game we’d like to capture.

Game Capture

Again, the Multi-adapter compatibility setting is those with crossfire or SLI set ups. Force scaling can be useful, if you’d like to downscale your games resolution. Allow transparency will allow transparent pixels, if any, so we can leave this at its default. Limit capture frame rate will tell OBS Studio to only capture at the frame rate in the game – but generally you can leave this unchecked. Capture cursor will enable or disable the mouse cursor, and use anti-cheat compatibility hook may need to be enabled for some games to work with game capture.

So typically, I’ve found it best to play games in borderless windowed mode and select my captures from there, but depending on the amount of different games you play – this might not be your best option.

What’s the best capture to use in OBS Studio for games?

From what I’ve read, it’s best to capture your games by first trying to use Game Capture if possible, followed by Window Capture and then Display Capture, in terms of performance.

However, if you’re using a capture card, then you will want to use Video Capture Device.

Video Capture Device

Using a video capture device is where we can add in things like our webcams, capture cards, or any type of video device connected to our PC. For device, we can select what we want to add in.  Let’s add in a webcam for now.

Video Capture OBS Studio

Deactivate will disable the device in this source, configure video will pop up your camera or devices settings, and most people won’t need to worry about configure crossbar.

A nice feature here is the ability to set custom Resolutions and FPS types. We can leave it at Devices Defaults, or directly configure it here. We’ll leave all the other options at their defaults, but let’s discuss Audio Output Mode.

How do I play sound from my capture card through my speakers with OBS Studio?

Using the Audio Output Mode option is something that I knew about when I first started streaming with my capture card. This will allow you to either only capture the audio inside of OBS Studio, if you’d like.  However, if you want it to play through your desktop audio, you can change it to Output desktop Audio. Meaning you can play what your capture card or video device hears through your computer speakers. I went way too long before I figured that out!

Audio Input and Audio Output

The last sources we’ll cover in this post is audio input and output devices. These both work in similar ways. With Audio Input device we add one as a source and then we can then choose any input device.  These sources are typically microphone and can be added as it’s own source through this method. For Output device, we could select any of our playback devices. Let’s use adding a new microphone with the audio input capture as an example. The advantage of doing this as it’s own source is that first, we can put filters on the source – which we’ll discuss in the next post. Second, we can put individual audio devices in separate scenes. Maybe in one of your scenes you don’t want certain audio playing, such as game sound or maybe even music – adding in individual audio sources will make that easy.

Audio Input

The last thing I want to quickly touch on is that we’ll notice a couple more volume sliders have been added into our mixer in OBS Studio. So, if I want my microphone to be a bit lower, we can adjust them right here. This is the same for any device that will capture audio.

I know this was a longer post, but if you stuck in there, you should already be thinking of a ton of great ways to make your stream look great!

In the next post we’ll start using filters to change the way our sources look and even how they play sound.

The Core OBS Studio Tutorials

Get the free graphics used in these videos.

  1. Introduction to our OBS Studio Tutorial Series
  2. OBS Studio Vs OBS Classic
  3. Installing and Setting Up Profiles In OBS Studio
  4. Best OBS Studio Settings
  5. In-depth look at OBS Studio Sources (current post)
  6. Using OBS Studio Filters
  7. Setting Up OBS Studio Scenes
  8. What Notification Should You Use With Twitch?
  9. Setting Up Your Twitch Account Before You Stream
  10. Streaming Live on Twitch and How to Improve Your Stream
  11. OBS Studio Updates – Alt Cropping, New Transitions, and Source Snapping