Skip to main content

Broadcast Overview

beginnerLast updated: 1/15/2024

Introduction to broadcast overlays and OBS integration for streaming tournaments

Broadcast Overview

Learn about broadcast overlays and how to use them for streaming tournaments with OBS Studio.

What are Broadcast Overlays?

Broadcast overlays are visual displays that show tournament information during live streams:

  • Match Information: Teams, scores, game status
  • Player Statistics: KDA, CS, gold, damage
  • Tournament Details: Tournament name, stage, round
  • Real-Time Updates: Updates automatically as games progress

Benefits

Why Use Broadcast Overlays:

  • Professional Look: Polished, professional stream appearance
  • Real-Time Data: Automatic updates from tournament data
  • Easy Setup: Simple OBS integration
  • Customizable: Match your host branding
  • Interactive: Control highlights and focus during stream

How It Works

Overview

  1. Overlay URL: Get unique overlay URL for your tournament
  2. OBS Integration: Add overlay as Browser Source in OBS
  3. Control Board: Use control board to manage overlay
  4. Real-Time Updates: Overlay updates automatically
  5. Stream: Overlay displays during your stream

Components

Broadcast System Includes:

  • Overlay Display: Visual overlay that shows in OBS
  • Control Board: Admin interface to control overlay
  • Real-Time Sync: Updates via Supabase Realtime
  • Match Selection: Switch between matches easily

Use Cases

Live Tournament Streaming

Perfect For:

  • Live tournament matches
  • Championship broadcasts
  • Regular season games
  • Playoff matches

Content Creation

Great For:

  • Tournament highlights
  • Match recaps
  • Player spotlights
  • Team analysis

Getting Started

Step 1: Access Broadcast Control

  1. Navigate to tournament
  2. Go to "Broadcast" tab
  3. Access broadcast control board

Step 2: Get Overlay URL

  1. Find "Broadcast Overlay URL" section
  2. Copy overlay URL
  3. URL is persistent for entire tournament

Step 3: Set Up OBS

  1. Open OBS Studio
  2. Add Browser Source
  3. Paste overlay URL
  4. Configure settings
  5. Overlay appears in OBS

Step 4: Control Overlay

  1. Select match to display
  2. Use control board features
  3. Highlight players
  4. Switch games
  5. Add custom messages

Features

Match Display

Shows:

  • Team names and logos
  • Current game number
  • Match score
  • Game status

Player Statistics

Displays:

  • Player names and positions
  • KDA (Kills/Deaths/Assists)
  • CS (Creep Score)
  • Gold earned
  • Damage dealt
  • Vision score

Interactive Controls

Control Board Features:

  • Player Highlighting: Highlight specific players
  • Game Selection: Switch between games
  • Custom Messages: Display custom text
  • Focus Modes: Change display focus
  • Match Selection: Switch active match

Best Practices

Before Streaming

  • Test Overlay: Preview overlay before going live
  • Select Match: Choose match to display
  • Check Settings: Verify overlay settings
  • Prepare Control: Familiarize yourself with controls

During Streaming

  • Monitor Overlay: Watch overlay during stream
  • Use Controls: Use control board actively
  • Highlight Players: Highlight standout players
  • Switch Games: Update game as matches progress

After Streaming

  • Review Performance: Check overlay worked well
  • Gather Feedback: Get viewer feedback
  • Improve Next Time: Note improvements for next stream
Tags:broadcast-overlaysobsstreamingoverlays

Was this article helpful?