🚀 Getting Started (Step by Step)

Step 1: Set Up Your Stream

Start a live stream on YouTube, Twitch, or your preferred platform. Copy the stream URL.

Step 2: Configure the System

1. Open your funnel page with ?id=YOUR_TOKENKEY in the URL
2. Look for the Admin Controls at the bottom of the overlay panel
3. Select your Platform (YouTube, Twitch, etc.)
4. Paste your Stream URL into the text field
5. Enter a Title for your broadcast
6. Set a Default Image URL (shown when offline)
7. Click 💾 Save

Step 3: Go Live

1. Click the 🔴 Go Live button
2. The page reloads and your stream appears in the overlay
3. All visitors with this tokenkey will see your broadcast

Step 4: End Your Stream

1. Click ⏹ End when finished
2. The page reloads and the default image returns

Supported YouTube URL Formats

Paste any of these formats — the system automatically converts them:

▶ YouTube Streaming Guide

How URLs Are Converted

Requirements for Successful Embedding

• Video must be Public or Unlisted (not Private)
• Embedding must be enabled in YouTube Studio → Content → Visibility
• Age-restricted videos may not embed
• Live streams must be actively broadcasting or scheduled

⚡ Features & Controls

Custom URL Loader

The sidebar has a text input where any visitor can paste a stream URL and click ▶ Go to load it in the main player. Useful for:

• Testing different stream URLs without saving config
• Letting viewers switch between multiple streams
• Quick-loading a video during a live demo

Click ↺ Reset to return to the original configured stream.

Funnel Selector

A dropdown listing all non-expired funnels from your database. Select a funnel and click ▶ to load its landing page in the player.

• Sorted by most views first
• Shows view count next to each funnel name
• Double-click a funnel to load it instantly
• Only shows funnels where the deadline hasn't passed

Default Image

When no live stream is active, the system shows a branded image in the player area.

• Set per tokenkey in the admin controls
• Auto-saves when you type a new URL and click away
• Falls back to the hardcoded default if no custom image is set

Viewer Tracking

• Real-time count: Updates every 15 seconds
• Member vs Guest: Logged-in users show as Members
• Locations: Country/city tags from viewer IPs
• Online window: Viewers active in the last 2 minutes
• Profile photos: Members show their avatar

Quick Link Copier

At the bottom of the sidebar, there are copyable links for Live Chat, Schedule Meeting, Dashboard, Feedback, and Refer a Friend. Left-click a card to load it in the main panel. Right-click or click the Copy button to copy the link.

Collapsible Sidebar

Click the ☰ button in the header to collapse the sidebar, giving the video more space. Click again to reopen.

✨ Effects Overlay — Emojis, GIFs, Stickers & Audio

The Effects Overlay adds visual and audio engagement to your broadcast. Effects appear over the video and can be triggered manually or automatically.

Effect Types

Effect Settings

• Duration: How long the effect stays on screen (in milliseconds)
• Audio URL: Optional sound effect that plays with the visual
• Label: Description for the admin panel
• Show Now: Trigger the effect immediately (admin panel)

Auto-Play Sequence

The Auto-Play feature lets you create a scheduled sequence of effects that play automatically during your broadcast. This is perfect for keeping engagement high during lulls.

Auto-Play Controls

Audio Control

• Each effect can have its own audio file (MP3, WAV)
• Audio plays automatically when the effect is triggered
• Audio stops when the effect ends, but may persist if the sequence is interrupted
• Use the 🔇 Stop Audio button to force-stop all audio

Effect Database

Effects are stored in the stream_effects database table:

🎬 OBS Studio Integration

OBS Studio (Open Broadcaster Software) is a free, open-source tool that gives you complete control over what your viewers see. Combine it with the ITS Live Broadcast System for professional-quality streams with scene switching, overlays, and multi-source mixing.

Why Use OBS with ITS Live Broadcast?

• Scene Switching: Switch between your webcam, screen share, funnel pages, and media — all in one stream
• Professional Overlays: Add logos, lower-thirds, tickers, and branding elements
• Multi-Source Mixing: Combine webcam + screen share + media files + browser sources
• Recording: Record your streams locally for repurposing as training content
• Audio Control: Mix multiple audio sources with filters, noise suppression, and gain control
• Single Stream Key: One YouTube stream key — no need to change URLs in ITS when switching scenes

Setup Guide (5 Minutes)

Step 1: Get Your YouTube Stream Key

1. Go to YouTube Studio → Create → Go Live
2. Under "Stream", copy your Stream Key (keep this private!)
3. Copy the Stream URL (usually rtmp://a.rtmp.youtube.com/live2)

Step 2: Configure OBS

1. Open OBS → Settings → Stream
2. Service: YouTube - RTMPS (or "Custom" for other platforms)
3. Paste your Stream Key
4. Click OK

Step 3: Set Up Your Scenes

Create multiple scenes for different content types:

Step 4: Add ITS Funnel Pages as Browser Sources

1. In any scene, click + under Sources → Browser
2. Name it (e.g., "Funnel Page") → OK
3. URL: Paste your ITS funnel URL with tokenkey
   https://www.jaysoftware.co.uk/af/SK8FUTR/livetest.php?id=YOUR_TOKENKEY
4. Width: 1920, Height: 1080
5. Check "Refresh browser when scene becomes active"
6. Click OK

Step 5: Start Streaming

1. In OBS, click Start Streaming
2. Your stream is now live on YouTube
3. In ITS Live Broadcast, the YouTube embed will show whatever OBS is sending
4. Switch OBS scenes to change what viewers see — ITS updates automatically

How It All Connects

Recommended OBS Settings for YouTube

OBS + ITS Workflow Examples

Troubleshooting OBS + ITS

OBS shows black screen in browser source?

• Check "Refresh browser when scene becomes active" is enabled
• Try disabling hardware acceleration in OBS browser source settings
• Ensure the URL is accessible (open it in a regular browser first)

Stream lag or buffering for viewers?

• Lower your OBS bitrate (try 3500 Kbps for 1080p)
• Check your internet upload speed (need at least 2x your bitrate)
• Close unnecessary applications to free up CPU/GPU

Audio out of sync with video?

• In OBS → Settings → Audio → adjust Sync Offset (try 200-400ms)
• Use the same sample rate (48kHz) for all audio sources

🔧 Troubleshooting

"Video unavailable — This video has been removed by the uploader"

Cause: The video ID doesn't match the actual YouTube video, or the URL has extra spaces.

Fix:

1. Re-paste the correct URL and click Save
2. Check for leading/trailing spaces in the URL
3. Verify the video ID in its_live_config.stream_id matches the URL

"Video unavailable — This video is private"

Cause: The YouTube video is set to Private.

Fix: Go to YouTube Studio → Content → Click your video → Visibility → Set to Public or Unlisted.

Stream doesn't autoplay

Cause: Most browsers block autoplay with sound.

Fix: This is normal browser behavior. The video will play when the user interacts with the page.

Overlay doesn't appear

Cause: is_live is 0 and you're not an admin, or the include file isn't loaded.

Fix:

1. Verify the include file is included on the page
2. Check its_live_config — is_live must be 1 for visitors to see it
3. Super admins (Role 9) always see the panel regardless of live status

Default image not showing

Cause: The image URL is broken or inaccessible.

Fix:

1. Open the image URL directly in a browser to verify it loads
2. Check that the URL is a direct image link (ends in .jpg, .png, etc.)
3. The fallback is a hardcoded image on jaysoftware.co.uk

Viewer count shows 0

Cause: The heartbeat/refresh intervals haven't started yet.

Fix:

1. Wait at least 30 seconds after page load for the first heartbeat
2. Viewer refresh runs every 15 seconds
3. Check its_live_viewers table for recent entries

Audio continues playing after effects stop

Cause: The Auto-Play sequence was stopped but audio didn't terminate.

Fix:

1. Click the 🔇 Stop Audio button in the effects panel
2. Refresh the page to reset all audio
3. Use the console command: stopAllEffectAudio()

Wrong tokenkey — config not found

Cause: The ?id= parameter doesn't match any tokenkey in its_live_config.

Fix:

1. Query: SELECT * FROM its_live_config WHERE tokenkey = 'YOUR_TOKENKEY'
2. If no row exists, save the config from the admin panel to create one

Profile photos not showing in viewer list

Cause: The photo file doesn't exist at the expected path.

Fix:

1. Photos come from family_tree_profile.profile_image
2. The full path is /chatgpt/familytree/pphotos/FILENAME
3. Verify the file exists on the server

👑 Administrator Guide

Accessing Admin Controls

Admin controls appear automatically at the bottom of the overlay panel when you're logged in as Role 9 (Super Admin).

Admin Form Fields

Effect Management

Effects are managed via the admin panel in the Effects Library section:

• Add new effects with type, data, duration, and optional audio
• Toggle Auto to include effects in the Auto-Play sequence
• Set Loop and Gap for the sequence
• Use Show Now to trigger a single effect

Database Tables

Useful SQL Queries

Check current config:

SELECT * FROM its_live_config WHERE tokenkey = 'YOUR_TOKENKEY';

Fix wrong stream_id:

UPDATE its_live_config SET stream_id = 'CORRECT_ID' WHERE tokenkey = 'YOUR_TOKENKEY';

Clean leading spaces in URLs:

UPDATE its_live_config SET stream_url = TRIM(stream_url);

View active viewers:

SELECT * FROM its_live_viewers WHERE last_heartbeat > DATE_SUB(NOW(), INTERVAL 2 MINUTE);

Update YouTube embed template:

UPDATE its_live_platforms SET embed_template = 'https://www.youtube.com/embed/{stream_id}' WHERE platform_slug = 'youtube';

⌨ Keyboard Shortcuts & Tips

Keyboard Shortcuts

Best Practices for Broadcasters

1. Set a default image: Upload a branded "Coming Soon" image so visitors see something professional when you're offline
2. Test before going live: Use the Custom URL loader to test your stream URL before clicking "Go Live"
3. Use the funnel selector: During a broadcast, quickly switch between funnel pages to showcase different offers
4. Share links via the copier: Use the quick link copier to share your Live Chat or Schedule Meeting links
5. Monitor viewers: Watch the viewer count and locations to gauge audience engagement
6. Collapse the sidebar: On smaller screens, click ☰ to give the video more space
7. Use Auto-Play: Keep viewers engaged during breaks with scheduled effects
8. Stop audio properly: Use the 🔇 Stop Audio button when ending Auto-Play

Performance Tips

• The viewer list refreshes every 15 seconds
• Viewers are considered "active" if their heartbeat is within 2 minutes
• The overlay is fixed positioning — it won't affect your page's scroll position
• On mobile, the sidebar stacks below the video for better usability
• The panel auto-opens on page load — visitors don't need to click anything
• Effects use pointer-events: none so they don't block clicks
• Audio files should be optimized for web (MP3, under 500KB) for best performance