Live data broadcast by iRacing Live Timing can be used to display a transparent web page in OBS or other similar streaming software. This will allow a live overlay to be displayed to your viewers whilst streaming, that isn’t visible to yourself whilst driving. The following example will show how to integrate an overlay web page into OBS studio.
iRacing Live Streaming is only available for Windows 8, 10 and 11 users due to the DirectX Subsystems that are required. However another user (for instance a remote commentator) can view the overlay from any operating system that is running their streaming software.
To use iRacing Live Streamer we first need to setup the iRacing Live Timing software. Follow the instructions here: iRacing Live Timing User Manual
Ensure you have completed the configuration in iRacing step from the user manual above before progressing and next we will configure the iRacing Live Timing software to produce an overlay.
iRacing Live Timing
Click the “Hamburger Menu” button in the top right hand corner of iRacing Live Timing or press F3 to open the settings panel. At the bottom of the panel select Load Project and navigate to your extracted iRacingLiveTiming folder (most likely within your main Documents folder) and select the Streamer.iRacingLiveTimingProject file.
Just to display your overlay whilst driving, no other configuration in iRacing Live Timing is required and you can skip to the next section.
If however you want to be able to connect to your race session data from a remote device (for one of our web apps for example) then in your F3 Settings panel scroll down to the bottom and set the:
- Room name
This is the room in our central server where live timing data is sent. You can then use the room based link displayed in your Settings / Links to share Live Timing, Live Track map and Live Event links to your viewers/teammates etc.
Be sure to choose a unique room name, not a name that could likely be chosen by another user.
Configuration in OBS Studio
- In OBS create a scene and add iRacing as a source (we recommend using Game Capture)
- Next add a new Browser source (Right click/Add/Browser).
- The Properties window for this new Browser source should now display:
- Navigate to iRacing Live Timing and navigate to Settings / Links. Copy the F1 style overlay – local connection url and paste into the OBS url field. To view an overlay remotely from another PC then paste the F1 style overlay url instead.
- Set Width to 1920
- Set Height to 1080
- Set FPS to 60
- Clear the CSS textbox and click OK
- Move the overlay browser source to the top of the source list to avoid it being covered by iRacing.
- Stretch the bounding box of the newly created browser source in the preview window to cover the entire broadcast window.
A basic overlay should now be displaying in the OBS preview window. In the next step we will look at how you can customise the look and feel of the overlay to suit your needs.
Choose What Information is Displayed
So now that you have a default overlay displaying in OBS we can decide what Components of the overlay we choose to Hide or Show. In iRacing Live Timing press F4 or click the up arrow at the bottom of the screen and you will see a layout of buttons appear. We will use the Driver default project file in our example.
By hovering your mouse over a Component or a button within a Component, a tooltip will display with a brief description of what it does. You can also click on the question mark in the corner of each Component to open the website support page for that Component.
Most of the buttons displayed allow for a simple Show or Hide option for a particular component. For example if I select Hide under the label Track Map the Track Map will disappear. Some of the components have buttons for tuning what type of information is displayed. For example the Timing Tower can be set to display a variety of different information, much of it simultaneously if you wish and present it in different ways (for instance during multi class racing).
You now have setup a basic overlay that allows you to Show and Hide different components to display the information you whilst driving!! However iRacing Live Timing allows almost infinite amounts of customisation to your overlay to create a personal and unique overlay with many advanced features! Head over to Overlay Component List, Remote Control Tab and Editing CSS Styles for more information on beginning this customisation and remember to jump in our Discord support server for any other questions!