Streaming & OBS Setup

Recourt provides browser-source overlays that you can add to OBS Studio for live-streaming your tournament to YouTube, Twitch, or any streaming platform. This guide covers score overlays, sponsor carousels, YouTube embed setup, and the big-screen view.

Recourt menyediakan overlay browser-source yang dapat Anda tambahkan ke OBS Studio untuk streaming langsung turnamen ke YouTube, Twitch, atau platform lainnya. Panduan ini mencakup overlay skor, carousel sponsor, pengaturan embed YouTube, dan tampilan layar besar.

What is OBS?

Apa itu OBS?

OBS Studio (Open Broadcaster Software) is a free, open-source tool for video recording and live streaming. You can add "sources" to your scene — a webcam, a game window, images, or a Browser Source that loads a URL as an overlay. Recourt generates browser-source URLs so you can overlay live scores and sponsors on your stream without any extra software.

OBS Studio (Open Broadcaster Software) adalah alat gratis dan open-source untuk merekam video dan streaming langsung. Anda dapat menambahkan "source" ke scene — webcam, jendela game, gambar, atau Browser Source yang memuat URL sebagai overlay. Recourt menghasilkan URL browser-source sehingga Anda dapat menampilkan skor langsung dan sponsor di streaming tanpa perangkat lunak tambahan.

Download OBS Studio from obsproject.com. It is free and available for Windows, macOS, and Linux.

Setting Up the Score Stream

Menyiapkan Streaming Skor

The score stream displays the current match on a single court with a dark overlay background. It updates automatically in real time — no page refresh needed.

Streaming skor menampilkan pertandingan terkini di satu lapangan dengan latar belakang overlay gelap. Ini diperbarui secara otomatis secara real-time — tidak perlu refresh halaman.

Where to Find the URL

Di Mana Menemukan URL

1. Go to your tournament admin panel (Admin → Tournaments → select your tournament)
2. Open the Courts tab
3. Each court shows a read-only Score stream URL — it looks like /stream/court/abc123xyz
4. Click the link icon to copy the full URL

Every court has its own unique token. The overlay will automatically show whichever match is currently in progress on that court.

Setiap lapangan memiliki token uniknya sendiri. Overlay akan otomatis menampilkan pertandingan yang sedang berlangsung di lapangan tersebut.

Customising the Overlay

Menyesuaikan Tampilan Overlay

The Stream appearance block under each court saves that court's default look, and the Copy button hands you a URL carrying anything you have changed but not saved — so one court can feed two differently-styled scenes. Set Background to None for a transparent overlay over your camera feed.

Blok Stream appearance di setiap lapangan menyimpan tampilan default lapangan itu, dan tombol Copy memberi URL yang membawa perubahan yang belum disimpan — sehingga satu lapangan bisa memberi dua tampilan berbeda. Pilih Background None untuk overlay transparan di atas kamera.

Example: /stream/court/abc123?bg=transparent&header=0&scale=0.8

Custom Designs

Desain Kustom

Courts → Stream templates lets you write your own overlay in HTML and CSS, using placeholders such as {{home.name}}, {{home.currentSet}} and {{#each home.sets}}…{{/each}}. The editor previews it live against a sample match. Assign a template to a court from that court's Design dropdown; deleting a template simply returns its courts to the built-in design.

Scripts, event handlers and anything that loads from the internet (images, web fonts, external stylesheets) are removed before the template is shown — use inline <svg> for graphics so the overlay never depends on a network request mid-broadcast.

Courts → Stream templates memungkinkan Anda menulis overlay sendiri dengan HTML dan CSS. Skrip dan apa pun yang memuat dari internet akan dihapus demi keamanan — gunakan <svg> inline untuk grafik.

Adding to OBS

Menambahkan ke OBS

1. Open OBS Studio and select your scene
2. Click the + button in the Sources panel
3. Choose Browser from the list
4. Give it a name (e.g. "Court 1 Score") and click OK
5. Paste the score stream URL into the URL field
6. Set Width to 1920 and Height to 1080 (or match your canvas resolution)
7. Check Refresh browser when scene becomes active
8. Click OK — the overlay will appear on your scene

Position and resize the browser source on your canvas as needed. The overlay has a transparent background, so it will blend with your stream layout.

The score stream polls the server every 15 seconds and uses Server-Sent Events (SSE) for near-instant updates when a point is scored. No manual refresh is ever needed.

Setting Up the Sponsor Stream

Menyiapkan Streaming Sponsor

The sponsor stream shows your tournament sponsors in a fullscreen carousel with smooth scrolling animation. Use it as a scene in OBS to display sponsor logos between matches or as a footer bar.

Streaming sponsor menampilkan sponsor turnamen Anda dalam carousel layar penuh dengan animasi scrolling yang halus. Gunakan sebagai scene di OBS untuk menampilkan logo sponsor di antara pertandingan atau sebagai footer bar.

Where to Find the URL

Di Mana Menemukan URL

1. Go to your tournament admin panel → Sponsors tab
2. Scroll to the OBS stream URL section
3. The URL looks like /stream/sponsors/tournament-id
4. Click Copy to copy the full URL

Only sponsors with Big screen view checked in their placements appear in the stream overlay. You can also toggle Show sponsors on big screen to enable the sponsor footer on the main big-screen view.

Adding to OBS

Menambahkan ke OBS

1. In OBS, add a new Browser source
2. Paste the sponsor stream URL
3. Set the dimensions to fit your layout — common setups are fullscreen (1920×1080) or a narrow strip at the bottom (1920×120)
4. Check Refresh browser when scene becomes active

If all sponsor logos fit within the viewport width they will be displayed centered. If they overflow, a CSS marquee animation automatically scrolls them in a seamless loop.

Customizing the Sponsor Overlay

Kustomisasi Overlay Sponsor

You can customize the appearance of the sponsor stream overlay without editing any code. The Sponsors admin section provides controls for:

• Background color — hex color without the # (default: 09090b, a dark zinc)
• Text color — hex color without the # (default: ffffff, white)
• Font family — choose from Sans-serif, Serif, or Monospace

These settings are appended as query parameters to the stream URL automatically:

/stream/sponsors/tournament-id?bg=09090b&color=ffffff&font=sans

When you change the settings in the admin panel, the displayed URL updates instantly. Copy the updated URL into OBS to apply the changes.

Footer Background on Big Screen

Latar Belakang Footer di Layar Besar

The Footer background color setting controls the background of the sponsor bar that appears at the bottom of the big-screen tournament view. This is a separate setting from the OBS sponsor overlay — it affects the footer embedded in /tournaments/id/screen.

YouTube Live Stream Integration

Integrasi Live Streaming YouTube

You can embed a YouTube live stream directly into the court big-screen view so that it displays side-by-side with the match schedule. This is ideal for venues that want to show the live video feed alongside scores on a single display.

Anda dapat menyematkan streaming langsung YouTube langsung ke tampilan layar besar lapangan sehingga ditampilkan berdampingan dengan jadwal pertandingan. Ini ideal untuk venue yang ingin menampilkan umpan video langsung bersama skor dalam satu tampilan.

How to Get Your YouTube Embed URL

Cara Mendapatkan URL Embed YouTube

1. Go to your YouTube Live Dashboard or the video you want to stream
2. Click Share → Embed
3. Copy the URL from the src attribute in the iframe code
4. It should look like: https://www.youtube.com/embed/VIDEO_ID

Use the embed URL format (/embed/...), not the regular watch URL (/watch?v=...). The embed URL is required for the iframe to render correctly.

Configuring in Recourt

Konfigurasi di Recourt

1. Go to your tournament admin panel → Courts tab
2. Find the court you want to link the stream to
3. Paste the YouTube embed URL into the YouTube URL input field
4. Toggle the YouTube switch to Enabled
5. Click Save

Once saved, the YouTube stream will appear in the court big-screen view at /tournaments/id/screen/court/number and the mobile stream view. The video takes the left panel (desktop) or appears above the schedule (mobile). The match schedule and scores remain visible alongside.

Big Screen View Overview

Ikhtisar Tampilan Layar Besar

The big screen view is a full-featured display mode designed for projectors and large screens. No login is required.

• Court Matrix — showing all courts and their current or next match with live scores
• Day & Round selector — filter the view by tournament day
• Blocks — Courts, Matches, and Draws are toggled per screen layout (see below)
• Sponsor footer — persistent marquee bar at the bottom (if enabled)
• Fullscreen mode — toggle with the button in the top-right corner
• Live clock — current time displayed in the header

Screen layouts are configured in the Screens tab of the admin panel. Each screen gets its own URL (/tournaments/id/screen?layout=<id>) with independent toggle settings for which blocks appear. Create separate screens for different TVs (e.g. one showing Courts only for the lobby, another showing Draws for the finals room). The gear icon on the screen page lets you adjust toggles directly from the TV.

For a single-court view with YouTube embed support, use /tournaments/id/screen/court/number.

Using the Big Screen in OBS

Menggunakan Layar Besar di OBS

You can capture the big screen view in OBS the same way as the overlays — add a Browser Source with the big-screen URL. The big screen view automatically refreshes every 30 seconds and uses SSE for live score updates on in-progress matches.

Quick Reference — All Stream URLs

Referensi Cepat — Semua URL Streaming