Native Xbox Mixer Streaming with Lightstream Studio

Direct Xbox Streaming: Setup A Lightstream Studio Overlay

Native Xbox Mixer Streaming with Lightstream Studio


 

OK so now comes the fun part! Laying out and design your own scenes for your Xbox One streams.

If you have yet to link and authorize your Mixer account to Lightstream Studio, make sure to follow this guide first before continuing on.

After everything is setup, it is up to you and your creative talents to put design an eye-catching stream layout. Or is it? If you don't have design in mind or if you don.t have the time to put one together, fear not- Lightstream Studio has plenty of free templates that you can start off with.

This guide will walk you through the process of setting up a pre-built overlay design. I really dig the Mixer themed overlay so lets use that in our example. Once you are comfortable with the process, feel free to experiment with any of the other layouts or you can even venture into create your own design content with the website upload feature.

While you do not need a computer when you are streaming, you will need access to a web browser to do all the setup work.

 

Head over to Lightstream Studio or click the 'Enter Lightstream Studio' button in your Mixer channel settings in a web browser. Login and authenticate if needed.

 

 


 

CREATING YOUR 'STARTING SOON' SCENE

 

You should be in your 'My Mixer Project' if not, click the top left menu icon - My Projects - 'My Mixer Project'. This is the project that contains your Mixer feed as an available layer so ensure you select this project. 

Lets choose our 'Starting Scene' from the scene selection area. Lets take advantage of the 'Starting Scene' and use this as an intro/'starting soon' page. I've discussed this in another article, but a Starting Soon page gives time for viewers to join the stream and there is a sense of anticipation as well.

 

Lightstream Mixer Interface

 

  1. Click the '+' Arrow in your Layers section
  2. Select 'Image'

 

Lightstream Mixer Add Layer

 

An Image menu will open up on the left side of the screen. There will be a lot of templates to choose from as well as an upload button for custom design. For this tutorial we will focus on the pre-built Mixer template. Scroll down the Images list and click 'More Overlays >' in the Mixer Overlay section.

 

Lightstream Mixer Starting Scene

 

Click the 'Mixer Overlays' folder then click 'Select'. Again, lots of pre-built options to explore when you are comfortable setting up your own overlays.

 

Lightstream Mixer More Overlays

 

There are multiple options of 'Starting Soon' graphics. If you scroll down you will see a folder containing many more. I like the first one shown so lets click on it and hit 'Select'.

 

Lightstream Mixer starting soon

 

The image will load into your project and will be displayed as a new layer. This layer should be above your Mixer Feed layer as you want. You will also want to mute your Mixer Feed layer so no game audio or sounds are playing during your intro screen. Click the mute icon in the bottom left Audio Mixer corner.

 

Lightstream Mmixer Live Soon Splash

 


 

CREATING YOUR MAIN OVERLAY SCENE

Lets add a new scene that will act as your main overlay scene that will be used for your gameplay. You will switch from your Starting Soon scene to this one, once ready.

Click the Add Scene button at the button. I went ahead and renamed my new scene to 'Main Scene'.

  1. Click the '+' Arrow in your Layers section
  2. Select 'Mixer Feed' to add your main Xbox display scene.

 

 

Lets add your overlay layer next.

  1. Click the '+' Arrow in your Layers section
  2. Select 'Images'.

 

Lightstream Mixer main overlay

 

An Image menu will open up on the left side of the screen. There will be a lot of templates to choose from as well as an upload button for custom design. Again, for this tutorial we will focus on the pre-built Mixer template. Scroll down the Images list and click 'More Overlays >' in the Mixer Overlay section.

 

Lightstream Mixer main overlay

 

Click the 'Mixer Overlays' folder then click 'Select'.

 

Lightstream Mixer main overlay

 

Again, there are multiple graphics options for you to experiment with. In this example lets select the first overlay layout then click 'Select'.

 

Lightstream Mixer main overlay

 

The image will load into your project and will be displayed as a new layer. This layer should be above your Mixer Feed layer.

 

Lightstream Mixer main overlay

 

I love the clean, simple look of the layout! You can repeat the steps to create additional Scenes for 'Be Right Back' and 'Ending' Screens. Go through the pre-built graphics again, and you will see multiple options to choose from.

All your progress should be auto-saving as you work so no need to manually save. Once you are happy with your scenes, you are ready to start streaming off your Xbox with your new overlays!

If you would like to take this a step further and add alerts and an alert history event list, head over to this tutorial to add the respective Streamlabs Alert Box and Event List widgets. Just add these are additional layers to this scene.

Lightstream Mixer BRB Lightstream Mixer Thanks For Watching

 


 

Your overlays and alerts will always be active once you toggle the 'Send my Mixer video feed to Lightstream Studio' in your Mixer settings via a web browser. If you would ever want to disable Lightstream, just head back to your Mixer channel in a web browser and toggle the button off in your settings. Toggle it back on whenever you are ready to use them once again. Nice and easy!

 

Lightstream Mixer toggle

 

Native Xbox Mixer Streaming with Lightstream Studio

Stream From Xbox One With Overlays And Alerts Via Lightstream Studio

Native Xbox Mixer Streaming with Lightstream Studio


 

Xbox One streamers, the moment you've been waiting for is finally here! Native Xbox One streaming with overlays and alerts without the need for a PC connection (no capture card or Xbox app needed). That right, you can now live stream directly from your Xbox One S or X and can customize your stream display with graphics and alerts!

This game-changing technology is all made possible via Lightstream Studio's direct Mixer integration. This web based software will allow you to customize your streams with scenes, overlays and alerts for a more professional looking stream. You will need to access the website via a web browser to configure and modify your scenes, but is not necessary when you go live.

As of this writing, this feature is currently available to Mixer Partners and Mixer Pro members, but will be open to all Mixer streamers in the future.

 


 

To get started you will need to authorize Lightstream Studio to be used with your Mixer channel.

Head to your Mixer channel in a web browser and make sure you are logged in with your streaming account.

  1. Click your icon in the top right
  2. Click 'Manage Channel'.

 

Mixer manage channel

 

Under the Broadcast tab, in the 'Lightstream [Beta]' section, click the 'Authorize Lightstream Studio' button.

 

Mixer Lightstream authorize

 

'Approve' the necessary permissions to continue logging in.

 

Mixer Lightstream permissions

 

The Lightstream Studio page should open up, but if not, head over to https://mixer.golightstream.com in a web browser to begin customizing a project. You should be greeted with a welcome screen. Click the 'Get Started!' button.

 

Mixer Lightstream splash

 

TIP: You may receive a warning to disable your ad blockers for the website to function properly. Make sure to do this to ensure everything is setup and working properly.

 

You will then see a sample project with a Starting Scene. This is the project you will want to modify as it includes your Mixer feed already. Here is a quick breakdown of the Lightstream Studio UI:

  1. Main menu which give you your settings, project selection, FAQ and a log out option.
  2. Your Layers section, which work similar to Photoshop layers. The layers above will have visual priority and will be displayed on top of the subsequent layers. The automatically created 'Mixer Feed' layer is your Xbox stream. This is your live feed and should be your lowest layer as you want your alerts and overlays above.
  3. Audio Mixer section - Lets you control the audio level of various layer elements.
  4. Scenes Section - Here you can create different scenes and switch them out in certain situations. You can swap scenes via web browser or mobile app.
  5. Display Output Window - This is your display layout that you create. What you see if what you get on your stream.

 

Mixer Lightstream UI

 

Again, this is your default Mixer project that will be output to your stream so lets go ahead and customize our Mixer project. Feel free to work with this as your main scene.

 


 

In a web browser, head back to you Mixer page - Manage Channel - Broadcast Settings.

Click the 'Send my Mixer video feed to Lightstream Studio' toggle. This needs to be enabled before you go live on via your Xbox. This only needs to be toggled on once as long as you are happy with the Lightstream integration. To disable Lightstream Studio, just come back to this settings page and click off the toggle. If you want to make edits to your Lightstream scenes you can click the 'Enter Lightstream Studio' button as well.

 

Mixer Lightstream send feed

 

Congrats! Streaming directly from your Xbox with now interface with Lightstream Studio and display your created overlays on stream. There should not be any noticeable delay in your stream and you should still be able to interact with your viewers in real time with FTL (low latency) technology.


SETTING UP YOUR ALERTS VIA STREAMLABS

Lets head back to Lightstream Studio and start populating your default scene. Lets add the two most basic overlay elements:

  • Alert Box:  Real-time follower, subscriber, donation and host alerts. You can choose to include sounds and animated graphics, custom colors, fonts, etc.
  • Event List:  A history of your recent alerts. This can also be customized with animated transitions, fonts, backgrounds, colors, etc.

 

  1. Click the '+' Arrow in your Layers section
  2. Select '3rd Party Integrations'

 

Mixer Lightstream Studio add source

 

You will see all the available third party integration options. In our example, we will use Streamlabs. Click on the Streamlabs logo.

 

Mixer Lightstream Studio 3rd party

 

You will have two new items on screen. The first being a box for you to enter your Streamlabs alert widget URL.

The next  item will be the actual output window that will be displayed on stream. Feel free to click on this box to adjust and relocate this on screen.

 

Mixer Lightstream Studio Streamlabs

 

We now need to head over to Streamlabs to setup and some widget.

Check out this tutorial to setup a simple Alert Box in Streamlabs. Once you've set this up and generated your unique URL, copy it and head back to this section. Ignore the OBS setup section as that is for PC streaming only.

Paste the Streamlabs Alert Box URL in the box back in Lightstream Studio. I also went ahead and renamed this layer 'SL - Alert Box' for better scene management.

You should then get a pop up letting you know that the link was entered properly and accepted.

 

Mixer Lightstream add Streamlabs source

 


 

TESTING OUT THE ALERT BOX

 

With both Lightstream Studio and Streamlabs browser pages open, click 'Test Follow' in Streamlabs-Widget-Alert Box. If setup properly, the alert should appear in Lightstream Studio. Go ahead and test out the subscribe, donation and host as well.

 

Mixer Lightstream Studio Alert Box test

 


 

ADDING STREAMLABS EVENT LIST OVERLAY

 

Now lets add an Event List that tracks some of your recent alerts you previously set up.

  1. Again, lets click the '+' Arrow in your Layers section
  2. Select '3rd Party Integrations'

 

Mixer Lightstream Studio add source

 

You will see all the available third party integration options. In our example, we will again use Streamlabs. Click on the Streamlabs logo.

 

Mixer Lightstream Studio 3rd party

 

Check out this tutorial to create an Event List in Streamlabs. Once you've set this up and generated your unique URL, copy it and head back to this section. Once you've set this up and generated your unique URL, copy it and head back to this section. Ignore the OBS setup section as that is for PC streaming only.

 

Paste the Streamlabs Event List URL in the box back in Lightstream Studio. I also went ahead and renamed this layer 'SL - Event List'. Keep things organized!

You should then get a pop up letting you know that the link was entered properly and accepted. I've adjust the Event List box window to be in the top right corner of my stream display. You can manually click and drag the handles to adjust the size or click inside to move it. You can also manually enter values in the Size and Position prompts below the window.

 

Mixer Lightstream Studio Event List

 


 

Similar to the Alert Box, lets test this new widget out. With both Lightstream Studio and Streamlabs browser pages open, click 'Test Follow' in Streamlabs-Widget-Event List. If setup properly, the alert should appear in Lightstream Studio. Go ahead and test out the other alerts if you would like. feel free to customize the look of your Event List within the Streamlabs website.

 

Mixer Lightstream Studio Event Enlarged

 


 

As long as you have Lightstream Studio toggled ON in Mixer via a web browser, these scenes will load and be active every time you stream directly from your Xbox One. Enjoy!

Tweak your other settings (camera, quality, mic, controller sharing) via Xbox One as normal.