Tag Archives: OBS

Streamlabs Event List

Adding Streamlabs Event List Overlay To Your Stream

Posted on by

Streamlabs Event List

 

Now that you have Streamlabs setup with your broadcasting software lets go ahead and get another basic stream overlay tools setup. Streamlabs has multiple URLs for the different overlay tools, adding the Event List will be very similar to how you added the Alert Box, just with a different BrowserSource URL. The Event List overlay gives you a visual timeline of recent follows, subscribers, donations and hosts. I believe this is another staple alert that can add a lot to your stream.

 

Streamlabs event list

 

Ensure that you have already linked Streamlabs with your broadcast software.

Head over to the Streamlabs homepage and click the 'Login to get started button'. You should already have your permissions setup, from your initial Streamlabs setup, but if not go ahead an accept all the permissions to continue logging in.

 

Streamlabs login

 

 

Once at your Dashboard screen, click the Widgets section to open this up.

 

Streamlabs dashboard

 

Your available Widgets will now be listed. As of the writing of this article you should have the following options. Click the 'Event List'.

 

 

Streamlabs Event List Widget

 

 

Here is the top section of the Event List settings.  Click the 'Copy' button in the Widget URL section. This is your unique URL that will be pasted into OBS. As the warning below states, do not share this with any other users or sites.

Once copied, lets open up your broadcasting software. In this example, we will be using OBS.

 

Streamlabs Event List URL

 

 

Head over to OBS

  1. Select your Scene that you want to display the graphics. Or create one if you have yet to set this up. In my example, I am picking my sample - Xbox scene.
  2. Under the 'Sources' column, click the '+' sign to add a new source.
  3. Select 'Browser Source' from the list.

 

OBS streamlabs browsersource

 

  1. Give this source a name. In this example we will name it 'Streamlabs Event List'.
  2. Click 'OK'

 

OBS Streamlabs Event List Source

 

In the properties window:

  1. Paste the Streamlabs Widget URL that you copied from the Streamlabs website in the previous steps. You can also adjust the width and height of the display as needed. You can also adjust this in real time later.
  2. You can adjust the default Width and Height per your personal preference. I start with 400 x 300 for the Event List. This can also be manually adjusted in your OBS display window.
  3. Click 'OK'.

OBS streamlabs browsersource settings

 

 

You will now have a red outline on screen which represents your newly created Streamlabs Event List overlay. Click and drag one of the red circle handles to adjust the size and proportions. Click and drag inside the box to move its location, if desired. It is a good idea to now lock the window so you do not accidentally move the source. Click the lock icon next to your source name. Simply unlock this anytime you want to make any later adjustments.

OBS Locked source

 

Now it is time to test out the alerts to make sure everything is functioning correctly. No need to go live, just keep OBS open for now.

 

 

Head back to the Streamlabs website. In the Widgets - Event List settings, you will have the option to test the four alerts.

 

Streamlabs Event List Test

 

Give each one a try and you should see the alerts in OBS.

 

Streamlabs OBS Event List

 

All good to go!

 

 

Customizing Event List graphics, text, etc.

The default Event List settings, fonts and graphics will work, but I would suggest going through your Event List settings and customizing each alert.

The default settings do not create event for follow and hosts. Personally I like including these as well. Make sure to check these boxes if you want these included in your event list. When you are happy with your changes, do not forget to hit the Save button.

Remember to keep branding in mind. This would be a good opportunity to standardize your fonts and color schemes. You want to stand out from the rest!

 

Streamlabs Event List Settings

 

Streamlabs to OBS

Adding Streamlabs As An Overlay In OBS & Creating Alerts

Posted on by

Streamlabs to OBS

 

Setting up Streamlabs is fairly straight forward. Streamlabs has multiple URLs for the different overlay tools, but the process is similar to add each one. This guide will cover the Alert Box overlay, which gives you audio and visual alerts for follows, subscribers, donations and hosts. Frankly, I believe this is a staple alert that needs to be added to your stream. From a viewer's perspective, its exciting to see your name pop up on stream. It would then be your job, as the streamer, to address the alert and give the viewer their recognition.

Head over to the Streamlabs homepage and click the 'Login to get started button'

 

Streamlabs login

 

Streamlabs gives you the option to login via multiple accounts. This tutorial is for Mixer so we will click the Mixer logo to login. Enter your credentials for your streamer account.

 

Streamlabs login

 

Grant any authorizations that may pop up. This will give Streamlabs all the required permissions it needs to function properly.

 

Streamlabs authorization

 

 

You will most likely be taken to the main Dashboard screen. This handy screen lets you see some of your up to date stats. Since we will be setting up the OBS overlays, lets click on Widgets section to open this up.

 

Streamlabs dashboard

 

Your available Widgets will now be listed. As of the writing of this article you should have the following options. Lets start with the basic alerts. Click the  'Alert Box'. This option lets you set alerts for follows, subscriptions, donations and hosts.

 

Streamlabs widgets

 

 

Here is the top section of the Alert Box settings. Here you can enable whichever alerts you want active. I use Streamlabs alerts for all four. Next, click the 'Copy' button in the Widget URL section. This is your unique URL that will be pasted into OBS. As the warning below states, do not share this with any other users or sites.

Once copied, lets open up your broadcasting software. In this example, we will be using OBS.

 

Streamlabs alert box settings

 

 

Head over to OBS

  1. Select your Scene that you want to display the graphics. Or create one if you have yet to set this up. In my example, I am picking my sample - Xbox scene.
  2. Under the 'Sources' column, click the '+' sign to add a new source.
  3. Select 'Browser Source' from the list.

 

OBS streamlabs browsersource

 

  1. Give this source a name. In this example we will name it 'Streamlabs Alert Box'.
  2. Click 'OK'

 

OBS streamlabs browsersource name

 

In the properties window:

  1. Paste the Streamlabs Widget URL that you copied from the Streamlabs website in the previous steps. You can also adjust the width and height of the display as needed. You can also adjust this in real time later.
  2. Click 'OK'.

 

OBS streamlabs browsersource settings

 

You will now have a red outline on screen which represents your newly created Streamlabs alert box overlay. Click and drag one of the red circle handles to adjust the size and proportions. Click and drag inside the box to move its location. It is a good idea to now lock the window so you do not accidentally move the source. Click the lock icon next to your source name. Simply unlock this anytime you want to make any later adjustments.

 

OBS streamlabs browsersource window

Now it is time to test out the alerts to make sure everything is functioning correctly. No need to go live, just keep OBS open for now.

 

 

Head back to the Streamlabs website. In the Widgets - Alert Box settings, you will have the option to test the four alerts.

 

Streamlabs test alerts

 

Give each one a try and you should see and hear the default alerts in OBS. 

 

Streamlabs follower alert

Streamlabs subscriber alert

 

Streamlabs donation alert

Streamlabs host alert

 

All good to go!

 

 

Customizing alert graphics, sounds, text, etc.

streamlabs zombie gif

The default zombie GIF is cool and all, but I would suggest going through your alert box settings and customizing each alert. There is a library of stock GIFs and sounds so you can start there. Or you can also upload your own. I would Also look to creating a brand for yourself and your channel and one good way to start is by standardizing your fonts and color schemes. This will help establish yourself more as a professional streamer vs. someone who is happy with all the default status quo settings.

 

 

 

Firebot to OBS

Adding Firebot As An Overlay in OBS

Posted on by

Firebot to OBS

 

In order for your Firebot images or video files to show up on your live stream, you need to link Firebot to OBS as a Browser Source. This the final step in my guide to get your Firebot overlays up and running. Make to check out the other guides to ensure you have all the other steps complete:

  1. Link Firebot to Mixer Developer Lab
  2. Create Buttons in Mixer Developer Lab and connect to Firebot
  3. Connect Firebot to OBS so it displays as an overlay in your stream.

 

  1. Open up Firebot and go to 'Settings'
  2. Click the 'Overlay' tab
  3. Click the 'Get Overlay Path' button.

firebot overlay settings

 

A window will pop up with your link to connect Firebot to OBS. Click the 'Copy' button and click 'Okay' to close this window.

Make note of the warning box at the bottom of the window. A lot of streamers run into this issue when OBS is opened before Firebot when going live. Try and get in the habit of opening Firebot first so the source is refreshed and ready to go in OBS. Otherwise you will have to manually refresh in OBS to get your graphics to appear.

firebot overlay info

 

 

Head over to OBS

  1. Select your Scene that you want to display the graphics. Or create one if you have yet to set this up. In my example, I am picking my sample - Xbox scene.
  2. Under the 'Sources' column, click the '+' sign to add a new source.
  3. Select 'BrowserSource' from the list.

 

 

Add Firebot source to OBS

 

 

  1. Give this source a name. In this example we will name it 'Firebot'.
  2. Click 'OK'

 

obs firebot browsersource

 

 

In the properties window:

  1. Paste the Firebot Overlay File Path that you copied from Firebot.
  2. Fill in your streaming resolution Width and Height as this overlay will encompass the entire screen. In our case I will use 1280x720 since I am streaming at 720P resolution.
  3. Click 'OK'.

 

obs firebot browsersource

 

 

You will now have a red outline on screen which represents your newly created Firebot overlay. If the red box does not fill the entire screen, click one of the red corners and drag to fill the entire screen. It is a good idea to now lock the window so you do not accidentally move the source. Click the lock icon next to your source name.

 

OBS firebot browsersource

 

You are all set! Firebot is now linked to OBS and your graphics are ready to be triggered and displayed in OBS and on your stream. You can now customize your Firebot buttons.

 

OBS to Mixer

Configuring Your Live Streaming Software [OBS]

Posted on by

OBS to Mixer

There are a few options for streaming software out there. I currently use Open Broadcaster Software (OBS) so that is what we will be looking at in this tutorial. I also only stream on Mixer so my settings will be tailored for Mixer's zero latency FTL setup. Some of these initial steps will only need to be done one time, unless you purposely go back to fine tune some of these adjustments, which is recommended once you are comfortable with the options and are ready for trial and error. But in the meantime, lets get you setup and I'll show you some of my setup options.  

 

 

Step 1: Download and install the latest version of OBS

    

 

 

Step 2: Setup Stream Settings and Adjust Output Quality Again most of these settings will only need to be entered once as they are saved and used each time you broadcast. They will however always be available for adjustments down the road as you experiment what works best for your internet connection as well as your viewers. Open OBS, then the first thing you'll want to do is head to the stream settings which can be found under 'File -> Settings -> Stream' This tutorial will be based on Mixer's FTL (zero latency) technology so hopefully your internet connection is capable of handling this. Change the 'Service' to 'Mixer.com - FTL' via the pull down menu.  

 

 

 

The Stream Key is your unique identifier which connects your OBS software to your Mixer account. This unique key is important and should not be shared. To get your key, head over to Mixer.com, login with your streaming account. Click your avatar in the top right corner -> Manage Channel -> 'Broadcast' tab -> Then click the copy icon and paste it into the Stream Key box in OBS. Apply your settings.  

 

Step 3: Adjusting Output Quality Now that your Stream tab is setup, your OBS should be able to talk to Mixer and allow you to go live. This section will go into some of the finer details regarding your overall stream quality. There is a fine balance that you will need to find between your CPU availability, internet bandwidth and any limitations of the hosting site and your viewers connections. It would be best then to work with a baseline setting and adjust from there. The following screenshots will outline settings that I typically use given my hardware and internet bandwidth. This gives me a good stream quality while hitting the CPU and internet upload speeds a bit harder than average.   Head over to the Output tab in your OBS Settings. Switch the Output Mode to 'Advanced' to unlock some additional options. Encoder: x264 (software encoder), which would be your typical default encoder. Bitrate is most likely going to be the variable you will be adjusting as you tweak your stream output. Bitrate deals directly with your stream output quality and is dependent on your internet upload speed. I won't go into too much detail here as there is already plenty documented on the internet as far as 'best settings' goes. I would say to play within a range of 2500-3500. You should be able to get by with a lower bitrate setting on lower motion games vs. the higher bitrate requirements of faster moving games. So again play around with this, but for the purposes of this tutorial I will leave this at 3000 bitrate with a CBR Rate Control. The CPU Usage Preset is set to 'faster' which is one step slower than the default of 'veryfast'. For this setting, the faster this is set the less strain there is on your CPU resulting in a lower quality output.  Therefore the slower this is set, more strain on the CPU resulting in a higher quality output. The Profile is set to main based on Mixer recommendation. I believe this setting has a direct impact when viewing on mobile devices as certain devices may not be able to display high profile. The Tune setting is set to zerolatency based on Mixer recommendations. From what I understand the Tune setting has a sight effect on the time required to output video, in milliseconds. x264 Option: 'bframes=0' based on Mixer recommendation.

 

 

 

For Nvidia graphics card owners -  you will have to option to encode with NVENC H.264 Encoder: NVENC H.264 (hardware encoder which will minimize CPU usage) Bitrate is set to 3000 bitrate with a CBR Rate Control. Again you have to freedom to adjust this as you see fit The Preset is set to low-latency. Experiment with this setting and leave at Default if you have any issues. The Profile is set to main based on Mixer recommendation. I believe this setting has a direct impact when viewing on mobile devices as certain devices may not be able to display high profile.

 

 

 

Step 4: Creating Scenes Scenes are collections of elements that will be output to your channel. They are what your viewers will be seeing on stream as you activate them. I have multiple Scenes created for different game sources. I also have separate scenes for my Intro, BRB, Outro splash screens as well as my Raider Video. These are activated with a simple click of a button. Scenes can be dulplicated (by right clicking) then modified, if you want to create a similar scene. They can also be reordered to your liking.  

 

 

Step 5: Creating Sources Scenes are composed of a collections of sources. These sources are then main components in building a scene. Some example sources are your game inputs, webcam, mic, screen overlays, etc. This collection of sources really make up the entirety of your scene. You can click the eye icon to quickly disable or enable a source. Right clicking on sources bring up a menu with multiple options. Two important choices are 'properties' and 'filters' we will most likely go into more detail on some of these in the future.