Scoreboard OCR

Sending data using Browser Window

If your graphics engine by default does not support reading data from sources at least 10x a second (which is crucial for some sports such as basketball), most probably you can use an alternative approach - add scoreboard data using a Browser Window.

  • This method requires your graphics software supports adding a browser window, see below a list of graphics engines the we tested
  • This method might also require a basic knowledge of HTML/CSS
  • This method lets you overlay one html web page (with transparency) over a video feed. The html web page is basically a scoreboard with your individual branding and displaying data (clock, score, timeouts, etc) according to the specific sports that you are producing

Take the following steps:

  1. In Scoreboard OCR add “HTTP Service” output using the default value “0.0.0.0:8080”
  2. Add field “clock” and recognize some digits. Make sure not to use field names that start with numeric chars, for example “1_score”.
  3. Open http://localhost:8080/results.json in your browser and check if you can see something like “clock”:“1:53”. Refresh the page to see if values are being updates as clock on the scoreboard changes.
  4. Download and save this sample scoreboard html file new.html using right mouse button “Save link as” to your computer
  5. Go to File Explorer and open the clock.html file by double clicking on it.
  6. Check if you have the clock coming through from Scoreboard OCR
  7. You can now add Browser Window input in your graphics engine and choose local file new.html. Here are instructions for individual engines:
    • vMix. Add Input → Web Browser → URL = C:\temp\new.html
    • Wirecast. Have to test if you can add a local file. Add Shot → All → Web Display → Address = C:\temp\new.html
    • OBS. Add Source → Browser → Local file and Browser for the new.html
    • XSplit Broadcaster. Add Source → Webpage → Browse for the new.html
    • Livestream Studio. Go to GFX1 → Edit Layout → Add Browser → enter URL “C:\temp\new.html”
  8. Feel free to edit clock.html to change font or add additional fields. You can build a complete scorebug as html template or just take clock value and overlay it over your existing graphics in mixer.