Embedding Racehero Timing system to OBS

t3chjunki3 · May 29, 2024

Hi, this is my first post to this forum. I would like to reach out to all members maybe someone knows how to embed racehero live timing for motorsports to obs studio see sample below

I have embed code from racehero and api but I don't know how to show it up in obs. I've tried browser source and placed the embed code there. Nothing happens.
I hope someone could help me on this one this would really help my livestreaming very interesting to watch.

Thank you and more power to all!

RacerGregg · Jun 19, 2024

Hi there. I've modified their embed code slightly (put in a refresh since theirs doesn't always work) and saved it to a local html file. From there I use a browser source to call it. I've sized it and cropped it to fit my screen layout.

Here's a sample. You'll need to modify the "org=" parameter in the URL.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Road Racing - Live Timing</title>
  <style>
    body {margin:0px !important;
          padding:0px !important;
    }
    </style>
</head>
<body>

<iframe id="racehero_iframe_livebox" src="https://racehero.io/widget/livebox?widget=livebox&amp;org=racehero-demo&amp;cachebust=1624288651694" frameborder="0" scrolling="auto" style="position: absolute;top:0;left: 0;width: 100%;height: 100%;"></iframe>

  <script>
  function reload(){setTimeout(function(){document.body.firstElementChild.src+="",reload()},40000)}reload();
  </script>
</body>
</html>

RacerGregg · Jun 19, 2024

Actually, that was with some customizations I had done to show a bit more data. Here's their code with only the "org=" changed to "org=racehere-demo" so you can see their sample data (don't worry if there's no data when you run it, it resets every 20min).


<!-- BEGIN RACEHERO WIDGET -->
<script id='RaceHeroWidgetlivebox' type='text/javascript'>!function(){function e(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.id="RaceHeroLoader_livebox",e.src="https://api.racehero.io/widgets/loader.js#?widget=livebox&amp;org=racehero-demo";var t=document.getElementById("RaceHeroWidgetlivebox");t.parentNode.insertBefore(e,t)}window.attachEvent?window.attachEvent("onload",e):window.addEventListener("load",e,!1)}();</script><!-- DO NOT REMOVE THE FOLLOWING LINK! IT IS USED BY THE WIDGET --><div id='RaceHeroWidgetContainer_livebox' class='RaceHeroWidgetContainer'><a href='https://racehero.io/orgs/racehero-demo/' id='RaceHeroPlaceholder_livebox' target='https://racehero.io/widget/'>View Results on RaceHero</a></div>
<!-- END RACEHERO WIDGET -->

When I created the browser source I set Widtht=335 and Height=1130 and then did a little cropping up at the top and on the sides to get rid of black borders.

Embedding Racehero Timing system to OBS

t3chjunki3

New Member

RacerGregg

New Member

RacerGregg

New Member