Skip to content

broadcasting

Jump to bottom
docisit edited this page Jul 27, 2026 · 2 revisions

🎬 Broadcasting Guide

How to host shows, bring in guests, and manage your live broadcast with ITG Media App.

Overview

ITG Media App gives you a complete live broadcasting workflow. The host uses OBS Studio (or any tool with a browser source), guests join through their browser with no software install, and viewers watch live on the Broadcast Page. Everything is orchestrated through WebRTC via LiveKit.

ITG Media App — Full Studio View

🎙️ The Host: Three Ways to Broadcast

ITG Media App gives the host three methods to get video/audio into the stream. Choose the one that fits your workflow.

Method 1 — OBS Virtual Camera (Simplest)

The quickest way to start — use OBS as a camera source.

  1. Open the Studio Control page at /studio/Broadcast_Studio_A1
  2. Select OBS Virtual Camera as your video source
  3. Select VB-Audio Cable (or your system audio) as your audio source
  4. Click "Start Broadcast"
  5. Your camera and mic stream directly to the LiveKit room via WebRTC

💡 No browser source or WHIP configuration needed — just your OBS virtual devices. Perfect for simple streams, podcasts, or quick tests.

Method 2 — OBS Browser Source (For Composed Overlays)

Use this when you need OBS overlays, lower-thirds, multi-source composition, and scene switching.

Step 1: Set Up OBS Studio

Download and install OBS Studio (free).

Step 2: Add the Browser Source

In OBS, add a Browser Source pointing at:

https://donoconnor.com/studio/obs-source?room=Broadcast_Studio_A1

Replace donoconnor.com with your actual domain. Replace Broadcast_Studio_A1 with your room name.

Step 3: Configure the Browser Source

Setting Recommended Value
Width 1920
Height 1080
FPS 30 or 60
Custom CSS (leave blank unless customizing)
Control audio via OBS ✅ Enabled
Refresh browser when scene becomes active ✅ Enabled

Step 4: Stream Out

The browser source displays the live composed view — host video, guest video, lower-thirds, and overlays — all auto-arranged by ITG Media App. You then stream this scene out to YouTube, Facebook, TikTok, or wherever you want using OBS's built-in streaming output.

💡 Default room name: The room Broadcast_Studio_A1 is the default. Create additional rooms for individual shows or guests. Having a known room name makes it easy to reuse the same OBS browser source URL across shows.

Method 3 — WHIP Ingress (Pro-Quality, Separate Feed)

For a clean, high-quality video feed separate from Virtual Camera — OBS pushes directly to LiveKit.

  1. Navigate to the Streaming Admin panel
  2. Generate a WHIP URL
  3. In OBS, go to Settings → Stream
  4. Set Service to WHIP
  5. Paste the WHIP URL
  6. Click Start Streaming in OBS

🎯 When to use WHIP: You want a dedicated, high-bitrate video feed that's independent of your virtual camera. Great for professional productions with separate ingest and monitoring.

👤 The Guests: Just a Browser

Guests join through a simple link — no downloads, no OBS, no software install.

How Guests Join

  1. The host generates a guest link from the Dashboard or Director Control Panel
  2. The guest clicks the link on their phone, tablet, or desktop
  3. They allow camera & microphone access
  4. They appear in the host's composed view automatically

Guest Requirements

Requirement Details
Browser Chrome, Firefox, Safari, Edge (latest versions)
Camera Built-in webcam or external camera
Microphone Any mic — headset recommended for best audio
Internet Stable connection, 5+ Mbps upload for 1080p
Audio Headphones or earbuds — prevents audio feedback/echo

PWA Support

ITG Media App is a full Progressive Web App (PWA):

  • Installable to phone/tablet home screen
  • Works on iOS Safari, Android Chrome
  • Full guest features on mobile
  • Add to home screen for one-tap access to guest links

📺 The Broadcast Page — Viewer Experience

Viewers watch live at the Broadcast Page: /broadcast

  • Shows the composed stream in real time
  • Interactive chat (if enabled)
  • No login required for viewing (configurable)
  • Responsive — works on desktop and mobile

🎛️ The Studio Control Page

The Studio Control page (/studio/Broadcast_Studio_A1) is the host's main interface:

Control Function
Camera Selection Choose video source (OBS Virtual Camera, webcam, etc.)
Microphone Selection Choose audio source (VB-Audio Cable, system mic, etc.)
Start/Stop Broadcast Begin or end the live stream
Room Status See who's in the room, stream health indicators
Audio Levels Monitor mic and guest audio levels
Guest Preview See guests before they go live

📊 The Dashboard

After logging in, the Dashboard is your home base:

Feature Description
Show Management Schedule, edit, and manage upcoming/past shows
Guest Links Generate and copy guest join links
Streaming Config Configure RTMP destinations, streaming keys
Director Control Open the Director panel for live show management
Analytics View stats, viewer counts, stream health

🎥 OBS Setup Recommendations

Scene Collection

Scenes:
├── 🎬 Main (Browser Source + Camera + Overlays)
├── 🎤 Guest Fullscreen (for single-guest focus)
├── 🖼️ BRB / Intermission (holding screen)
├── 📊 Lower Third Only (for sponsor reads)
└── 🎵 Audio Only (music/podcast mode)

Recommended OBS Settings

Setting Value
Base Canvas 1920×1080
Output Resolution 1920×1080 or 1280×720
FPS 30 or 60
Video Encoder Hardware (NVENC, AMF, QSV) or x264
Bitrate 6000-8000 Kbps for 1080p60
Audio Bitrate 160-320 Kbps
Audio Sample Rate 48 kHz

📡 Multi-Platform Simulcast

ITG Media App can push your stream to multiple platforms simultaneously from the Director Control panel.

Supported Platforms

Platform RTMP URL Format
YouTube rtmp://a.rtmp.youtube.com/live2/<stream-key>
Facebook rtmp://live-api-s.facebook.com:80/rtmp/<stream-key>
TikTok rtmp://live.tiktok.com/live/<stream-key>

Setup

  1. Get your stream keys from each platform's creator dashboard
  2. Add them to your .env file or enter directly in the Director Control panel
  3. Toggle each platform on/off during the broadcast
  4. Monitor per-platform stream health in real time

🧪 Testing Your Setup

Before going live to an audience:

Pre-Show Checklist

  • OBS is running and capturing the browser source
  • Audio levels are good (no peaking, no dead silence)
  • Test guest joined successfully from a second device/browser
  • Guest audio is clear, no echo (they're using headphones)
  • Director Control panel shows both host and guest
  • Simulcast platforms are configured and ready
  • Broadcast Page loads and shows the stream
  • Record a short test and review it

Network Test

Run the built-in speed test at /speedtest to verify your connection:

  • Upload speed: 10+ Mbps recommended for 1080p with guests
  • Latency: < 50ms to the LiveKit server
  • Jitter: < 30ms for stable video

🎯 Quick Reference Card

Host URLs

Page URL
Studio Control /studio/Broadcast_Studio_A1
OBS Browser Source /studio/obs-source?room=Broadcast_Studio_A1
Director Control /director-control
Dashboard /dashboard

Guest URLs

Page URL
Guest Room /guest-room?room=<room-name>
Guest Monitor (OBS) /obs-guest-monitor.html

Viewer URLs

Page URL
Broadcast Page /broadcast

⏭️ Next Steps

← Back to Wiki Home

Clone this wiki locally