How use setup OBS (Open Broadcaster Software) to overlay Apps

When using OBS, any App overlaid on top of your SIM will show up on your stream. But, you can also add any App or Widget to your stream only. All you have to do is add the builtin source (CLR Browser). If your a broadcaster, you may even have multiple scenes that use different Apps.

NOTE: These instructions are for the "Classic" version, but equally apply to the "Studio Version with Browser Source".

Here is a link to a couple of videos on how to setup OBS and SIMRacingApps.

• https://www.youtube.com/watch?v=pg-WGvkq_sY&feature=youtu.be. SRA is covered from 13:00 - 23:00.
• https://youtu.be/pg-WGvkq_sY. SRA is covered from 14:00.

In the OBS Software, select the scene in the "Scenes" section, then in the "Sources" section, right click and select "Add -> CLR Browser" (BrowserSource).

You will need the direct URL to the App so you can bypass the main menu. As of version 1.13, I added the link on the main menu when you use a regular browser to connect to the server. Just copy/paste that link into OBS.

Get URL versions 1.12 and lower

To get the URL to each App, make sure the SRA server is running and connect to the SRA main menu from a regular browser. Launch the App you want, and copy the URL from the address bar and paste it into the CLR Browser's Properties in OBS. If you are using Chrome, it may hide the address bar. In that case, right click in the title bar and select "show in tab". The URL should be displayed in that window. You can also use Edge. Here is an example:

http://192.168.10.61/SIMRacingApps/apps/WidgetLoader?widget=TrackMap&MAPLAYER=none&SHOWMAP=false&SHOWFLAGS=Y&SHOWWINDGAUGE=N&SHOWWEATHER=N&SHOWTITLE=N&SHOWINFO=N&TEXTTYPE=number&INTERVAL=100

I suggest you replace the IP address with "localhost"
http://localhost/SIMRacingApps/apps/WidgetLoader?widget=TrackMap&MAPLAYER=none&SHOWMAP=false&SHOWFLAGS=Y&SHOWWINDGAUGE=N&SHOWWEATHER=N&SHOWTITLE=N&SHOWINFO=N&TEXTTYPE=number&INTERVAL=100

Depending on the App, there are parameters that you can add to customize it. One parameter that all Apps support is "BACKGROUNDCOLOR". You can make the background color any color you want, even "transparent" by adding the parameter to the URL. Here is an example to make it transparent. Note: any CSS color statement is accepted here, including rgb and rgba. Using the #ffffff format is tricky because the # is special an must be escaped as %23ffffff. Refer to (http://wiki.SIMRacingApps.com/How-to-add-options-to-the-URL) for more options.

http://localhost/SIMRacingApps/apps/WidgetLoader?widget=TrackMap&MAPLAYER=none&SHOWMAP=false&SHOWFLAGS=Y&SHOWWINDGAUGE=N&SHOWWEATHER=N&SHOWTITLE=N&SHOWINFO=N&TEXTTYPE=number&INTERVAL=100&BACKGROUNDCOLOR=transparent
http://localhost/SIMRacingApps/apps/WidgetLoader?widget=StandingsBanner&MAPLAYER=none&SHOWMAP=false&SHOWFLAGS=Y&SHOWWINDGAUGE=N&SHOWWEATHER=N&SHOWTITLE=N&SHOWINFO=N&TEXTTYPE=number&INTERVAL=100&SHOWSHORTNAME=N&BACKGROUNDCOLOR=transparent

BUG IN OBS Classic Only: If you edit the properties of the CLR Browser after you added the URL and saved it, it does not show the entire URL after the question mark(?). It is still there, but you cannot see it. That makes it hard to tweak it after you have saved it. My only recommendation is to save the URLs in a document, make the changes and paste it back in.

You can also tweak the presentation of the App by adding CSS statements to the CSS tab in the CLR Browser's (BrowserSource) Properties. Here is an example of how to change the color of the track on the TrackMap Widget.Note the use of !important to get it to override the built in value.

.SIMRacingApps-Widget-TrackMap-trackpathline-nobackground {
    stroke:           rgba(0,0,0,1) !important;
}

If !important doesn't work, you can also try adding CSS statments to your "Documents/SIMRacingApps/useroverrides.css" file. But, this file will also affect the App running outside of OBS. If that is what you want, then this file is the better place to make the CSS changes.

To discover the classes each App uses, I recommend launching the App with your browser, tweak the CSS from your browser's debugger and putting the changes in the useroverrides.css file. Then, only if you want it to apply to the streamed version , copy the CSS statements to the CSS tab in OBS.