The Mix It Up overlay allows you to display visuals on your stream in the form of Overlay Actions and Overlay Widgets. This includes things such as images, videos, text, widgets on screen. By default, the Mix It Up Overlay is already enabled when you create a new profile for the first time. But you can manually enable or disable it by heading to Services -> Overlay in Mix It Up.
When adding the Overlay to your streaming software, the following are the recommend steps for to ensure the Overlay is properly configured. Failure to follow all these steps could result is connectivity issues with the Overlay and visuals not being displayed properly or at all:
- Create a new browser source in your streaming software with the following settings:
- Add the URL for the Overlay. The Default Overlay URL is
http://localhost:8111/overlay/ - Set the resolution of your browser source to match your stream output (EX: 1920x1080)
- Enable both "Shutdown source when not visible" & "Refresh browser when scene becomes active" options
- Add the URL for the Overlay. The Default Overlay URL is
- Click on the "Test Connection" button in Mix It Up to check if the Overlay is properly connected.
¶ Overlay Endpoints
An Overlay Endpoint is a unique URL that can display Overlay visuals. Most users only need one overlay endpoint, the Default Overlay Endpoint, but you can optionally add multiple Overlay Endpoints to support showing different content in different scenarios. Some examples of this include handlnig green screen effects or being able to control the audio output of an Overlay Endpoint within the web browser source in your streaming software. Overlay Endpoints can be changed by visiting Settings -> Overlay.
The Port Number for the Overlay service as a whole can be configured here. All Overlay Endpoints share the same port number and will all change when this is updated. For most users, you will not need to change this, but it can be changed if the port number conflicts with another application that is using the same port number.
Each Overlay Endpoint has a name and a unique URL. The URL can be accessed by clicking on the open button (first button) to open the URL in your regular web browser or clicking on the copy button (second button) to copy the URL to the clipboard. Overlay Widgets can also be removed by hitting the trash can icon (fourth button). Note that deleting an Overlay Endpoint without changing any Overlay Actions or Overlay Widgets that use it can cause some to either not work or be assigned to the Default Overlay Endpoint.
Overlay Endpoints can also be edited (third button) to include custom HTML, CSS, and Javascript. Anything added will be present on all Overlay Actions and Overlay Widgets that use that Overlay Endpoint. This can be particularly useful for things like CSS or Javascript code that you want to make available to several different Overlay Action and Overlay Widgets without having to copy it into every single one.
¶ Accessing Local Files In Overlay Code
Overlay Actions and Overlay Widgets that involve media (images, videos) will automatically handle loading in and displaying the media on the Overlay. The Overlay does not have the ability to directly access local files on your computer due to security measures with how web pages are loaded. However, there are some times where you need to access multiple files at once in a single Overlay Action or Overlay Widget. This can be done by using the LocalFile property in your Overlay Action or Overlay Widget code (HTML, CSS, or Javascript).
By putting {LocalFile:\\FILE_PATH} in your HTML, CSS, or Javascript, the Overlay service will handle automatically translating this to URL reference which can be properly loaded in to the overlay. For example, if I wanted to access the file C:\Foo\Bar.png, I would put the following in the code:
{LocalFile:\\C:\Foo\Bar.png}
This can then be used inside various HTML, CSS, or Javascript code. Below is an example of how this could be used to display the image using an tag:
<img src="{LocalFile:\\C:\Foo\Bar.png}" />
¶ Common Troubleshooting Steps
When running into issues, make sure to check the following:
-
Make sure Mix It Up is started first before your streaming software, otherwise the Overlay "won't exist", so it won't load properly.
-
Head to the Services page in the application and ensure that the Overlay service is connected.
-
In your streaming software:
- Make sure the resolution of your browser source is set to match your stream output (EX: 1920x1080)
- Ensure the options "Shutdown source when not visible" & "Refresh browser when scene becomes active" are checked.
- Press on the "Refresh cache of current page" button and then save.
-
Hit it the Test Connection button under Services -> Overlay and make sure you see the red "Connection Test!" text appear on the overlay.
Additionally, if you are also using OBS Studio, XSplit, or Streamlabs OBS connectivity in Mix It Up, you can specify the name of the web browser source that is hosting the Mix It Up overlay. We will automatically refresh that source when Mix It Up loads in-case it was opened after your streaming software.
¶ Browser Source Hardware Acceleration
Some streaming softwares come with an updated version of the browser source which includes a hardware acceleration setting. This setting allows the browser source to be rendered on the GPU; however, there are cases beyond the control of Mix It Up where your streaming software cannot render the content of your browser source (EX: Freezing/Laggy videos). When diagnosing issues related to videos lagging or stopping on your overlay, check to see if this option is enabled or disabled in Settings -> Advanced. Flip the setting (Enabled -> Disabled or Disabled -> Enabled), then restart your streaming software and check if the issue is resolved.
¶ Windows Settings: Overlay Animation Issue
If you have seen a warning from Mix It Up and need to check the windows settings to ensure your animations work correctly, then follow these steps:
- Press the Windows Key+R - This opens the Run window like this
- Now paste this into the Run window:
%SystemRoot%\System32\systempropertiesadvanced.exe - You should see this window show up, click the Settings button in the Performance section:
- In the Performance Options window that shows up, confirm that the
Animate controls and elements inside windowsis checked:
¶ Access the Overlay from another local PC
If you have a multi-PC stream setup where your streaming software runs on a different PC than Mix It Up, you can access the Overlay from the Mix It Up PC by performing the following steps:
- Launch Mix It Up in Administrator mode (Right-click -> Run as Administrator)
- If both of your PCs are connected to the same router, you can allow an inbound connection to the PC running Mix It Up via Windows Firewall. You'll want to select Inbound Rules -> New Rule, set the rule to type to TCP and set the port number to match the port number of the Overlay service (typically 8111)
- If two PCs are not connected to the same router, you'll additionally need to port forward the Overlay from the Mix It Up PC so it can be access on other PCs within your local network. This step will be unique to the router/modem you are using.
¶ v1.2 Overlay Update
This update introduces large-scale changes to all Overlay functionality throughout the application and includes some breaking changes. As such, we recommend NOT updating immediately before a stream and waiting until you have time to walkthrough all of the changes and ensure your Overlay setup and interactions are configured to your liking. Below are some of the breaking changes that are introduced in this update:
- All Overlay Endpoints now share the same port number and instead have unique URLs associated with them. If you use more than 1 Overlay Endpoint, you will need to update the web browser sources in your streaming software to use the new URLs, which can be found under Settings -> Overlay.
- Overlay Widgets are now vastly more robust in the amount that can be customized for them. However, the differences in specific HTML formatting between old and new versions are incompatible and thus can not be directly migrated over. The vast majority of standard, drop-down or input values are converted over, but customized HTML can not be and is instead changed to the new format. All old customized HTML can be accessed from the Overlay Widgets page by editing the widget and clicking on the History button in the top-right corner of the window.
- Certain features and functionality have been removed due to their low usage and may be replaced in the future.
- The Web Page option has been removed due to low compatability with more websites, but web page can be added manually via the HTML option. Existing Web Page actions have been updated to this new setup via the HTML option.
- The Ticker Tape Overlay Widget has been removed and instead replaced with the comparable Label Overlay Widget. Due to their large differences, the Ticker Tape Overlay Widget was not migrated and must be manually re-created as a Label Overlay Widget.