Cliproom Overlay Studio

Your own webcam overlay and alert service for overlay.cliproom.live, built for DreamHost shared hosting. No StreamElements or Streamlabs account is required.

What is ready

Transparent webcam frame with a thin green border and black shadow.
YouTube, TikTok, Twitch, and Kick handles rotate below the camera.
New alerts appear below the camera in their platform color for eight seconds. Simultaneous alerts wait their turn.
Finished alerts loop above the camera, ten seconds each, then repeat from the beginning.
Adjustable frame width, shape, border, corners, accent color, and handle rotation speed.
Owner-only studio, labeled test alerts, session export, new-session control, and replaceable OBS links.
Direct OAuth connections, signed Twitch/Kick webhooks, and a YouTube live-alert collector. Live connections require your platform app registrations and authorization before they can receive real alerts.

1. Finish the DreamHost website setup

In DreamHost, add overlay.cliproom.live as a fully hosted website. Use the existing web user nabner and web directory overlay.cliproom.live. Enable a free Let's Encrypt certificate. The domain must resolve publicly and use HTTPS before Twitch and Kick can deliver alerts.

The installation uses two neighboring folders:

/home/nabner/overlay.cliproom.live/    Website files (contents of public/)
/home/nabner/overlay-private/          Private PHP files and saved state

The existing Cliproom website and database are not modified. The studio checks your existing Cliproom owner password against that database. Your guest password cannot configure the overlay.

For a fresh manual installation:

Put the contents of public/, including .htaccess, into the website folder.
Put overlay-private/ beside the website folder, outside every public website directory.
Copy config.example.php to config.php. Set base_url and the path to the existing Cliproom private configuration. The defaults match the folder layout above.
Set the private folder to permission 700, and config.php to 600. Its storage/ folder is created automatically with private permissions.
Use PHP 8.2 or newer, with cURL, OpenSSL, mbstring, PDO, and PDO MySQL enabled.

No new database, Docker container, or persistent Node process is needed. Do not upload local test files or a test configuration to production.

2. Connect your platforms

Open https://overlay.cliproom.live, sign in with your existing Cliproom owner password, and choose Connections. Each card shows its exact callback address. Keep client secrets private: enter them in the studio, not in chat or an OBS source.

Twitch

Open the Twitch developer console and register a confidential application for your account. Twitch may require two-factor authentication.
Set its OAuth redirect to: https://overlay.cliproom.live/index.php?r=oauth/twitch
Enter the app's client ID and client secret in the Twitch card, then choose Save app details.
Choose Connect channel and authorize the account that owns helmethead_.
The service registers follows, subscriptions, resub messages, gift subscriptions, cheers, incoming raids, and channel point redemptions. Some event types require your channel to be eligible for the relevant platform feature.
Review Alert registration details. Use Repair connection after correcting an app setting or a failed registration. Reconnect if permission has expired or been revoked.

The service verifies Twitch's HMAC signature and timestamp before accepting an event. Duplicate deliveries are acknowledged without generating duplicate alerts. Gift batches generate one giver alert rather than a separate alert for every recipient.

Official references: Twitch OAuth, Twitch webhooks.

Kick

Open your Kick developer settings and create an application.
Set the redirect URI to: https://overlay.cliproom.live/index.php?r=oauth/kick
Enable webhooks in that application's settings and set the webhook URL to: https://overlay.cliproom.live/index.php?r=webhook/kick
Save its client ID and client secret in the Kick card.
Choose Connect channel, and authorize the account that owns the-helmethead.
Review the event registrations. Follows, subscriptions, renewals, gift subscriptions, KICKs gifts, and accepted channel rewards are supported. Rejected/pending rewards do not show an alert.

The service verifies Kick's RSA signatures using its current public key. The official Kick API does not currently offer raid alerts. Availability and delivery of each event also depend on Kick and your channel's enabled features.

Official references: Kick app setup, OAuth, event payloads, webhook verification.

YouTube

Create/select a project in Google Cloud Console.
Enable YouTube Data API v3. Configure the OAuth consent screen. If the app is in Testing, add your Google account as a test user.
Create an OAuth client with type Web application. Set its authorized redirect URI to: https://overlay.cliproom.live/index.php?r=oauth/youtube
Save the client ID and secret in the YouTube card, choose Connect channel, and authorize the correct YouTube channel for the_helmethead.
Start a live broadcast with live chat enabled. Keep OBS's overlay source or the studio open. The status will change from waiting for a broadcast to listening when a live chat is found.

Supported live-chat events: new memberships, member milestones, gifted memberships and recipients, Super Chats, Super Stickers, and live gifts where YouTube exposes them. Ordinary chat messages are ignored. YouTube does not expose every subscriber action; private subscribers and likes are not alerts in this service. If multiple broadcasts are live on your channel, this version uses the first active broadcast returned by YouTube.

The DreamHost version makes short server-side requests at least 15 seconds apart, or longer if YouTube asks. Live YouTube alerts may arrive with that delay. Polling consumes your Google project's quota; check usage in Cloud Console, request additional quota if needed, and close the studio/disable the source when not streaming. No-active-broadcast checks run at most once a minute. Quota errors appear in Connections and back off for an hour. Google Testing-mode permissions can require periodic reconnection; review Google's consent publishing requirements for long-term use.

For collection while both OBS and the studio are closed, optionally add this DreamHost cron command every minute:

/usr/local/php84/bin/php /home/nabner/overlay-private/poll.php

Confirm the PHP executable path in your DreamHost panel first. Cron is optional; with only cron running YouTube checks occur roughly once a minute. Twitch and Kick send webhooks even when the studio is closed.

Official references: Google OAuth setup, live chat event types, polling requirements.

3. Add it to OBS

In the studio choose Copy OBS link.
In OBS, add a Browser Source and paste that link as its URL.
Set Width and Height to the numbers shown in the studio. The default is 688 × 542.
Place the browser source above your webcam source in the Sources list.
For the default layout, position the webcam 24 px right and 86 px down from the browser source's top-left corner. Size the webcam to 640 × 360. Use a matching corner mask/crop if you want the webcam itself to have rounded corners, or choose Square corners in the studio.
Leave Shutdown source when not visible unchecked. The overlay itself is transparent; the camera placeholder appears only in the studio preview.
Send a test alert. Confirm the bottom alert, its platform color, the return of your handle, and the looping highlight above the camera.
Start a new session to remove test history before going live.

If you resize the webcam frame in the studio, also update OBS's Browser Source dimensions and camera size. Group the camera and overlay in OBS so moving/scaling the group preserves alignment. The overlay has no audio by default.

Sessions and reliability

The server saves all alerts in the current session, including labeled tests, and preserves them across a browser refresh.
Start a new session manually before each stream. Export first if you want a copy; starting a new session clears that session's display history.
Alerts use a common server timeline. When OBS is online, queued alerts receive eight seconds each. If the source is offline or the connection stalls, elapsed alerts remain in the history loop rather than replaying a large backlog below the camera.
The top loop contains completed alerts only. It starts with the first completed alert and advances every ten seconds. New entries join the loop without cutting short the currently displayed highlight.
Duplicate provider messages remain suppressed for seven days, including across a session reset.
A session holds up to 10,000 alerts. Export and start a new session before reaching that limit.
The studio's test button creates simulated tests. A successful test is not proof that an account connection or external webhook is working. Verify a real event on each connected platform before relying on it for a stream.
An OBS link can display handles and session alerts, but cannot read app credentials or edit settings. Replace it in Connections if it was shared accidentally.
Disconnect removes this service's saved channel tokens. Also revoke the app in the platform's account settings if you want to remove permission at the platform.
Back up the private folder securely. Never put it inside a public website folder.

Validation included

PHP event normalization and signature tests, JavaScript timing tests, and local HTTP tests cover access controls, CSRF protection, OBS key rotation, saved settings, webhook deduplication, and simultaneous alert delivery. Real platform OAuth/alert delivery requires your registered apps and has to be verified after connection.

Font controls and Hype Trains (November 8 update)

In Overlay studio → Type, your way, set separate sizes for handles, alert headings, and details, then choose Save changes. Larger fonts increase the height of the alert bars. Copy the new Browser Source dimensions and webcam position shown in the studio into OBS. Refresh the studio and refresh the OBS browser source once after this update.

Below the camera, normal rotation shows the official platform logo, your handle, and a live viewer badge. Above it, each completed alert reads viewer name – alert detail on one line, wrapping when needed. There is no separate alert-type label or repeated detail line. The platform-name captions and “Find me on…” text have been removed. Official platform logos also appear in the studio's handle fields, connections, and session history.

Reconnect Twitch once in Connections to grant channel:read:hype_train. The service registers Twitch's current v2 Hype Train begin, progress, and end events. The lower bar shows an animated train, its level/progress, and a countdown based on Twitch's expiry time. Level-ups update the countdown. Other alerts wait during the train and resume afterward for a full eight seconds each. Out-of-order or repeated notifications cannot restart an ended train.

To try it, choose Twitch → Hype Train · 60-second test → Send test alert. The bar is visibly marked TEST. Use End Hype Train test to finish early, or let the minute expire. Test trains cannot replace a real active train. A real Twitch train takes precedence over a test.

The local tests cover lifecycle timing, paused/resumed queues, duplicate delivery, out-of-order events, expired trains, fonts, and test controls. A genuine live Hype Train still requires your Twitch authorization and an eligible channel; a test does not trigger a Hype Train on Twitch.

Reference: Twitch Hype Train EventSub v2.

Live viewer counts

The right side of each rotating handle now shows an eye icon and the number currently watching your connected channel. Twitch and Kick refresh about every 30 seconds; YouTube about every 60 seconds, while OBS or the studio is open. Counts can lag behind the platform dashboard. Connect the same account as the handle you display; editing a handle does not switch the authorized channel.

Offline means the platform reports no active broadcast. — means disconnected, pending, hidden, unavailable, or older than three minutes. A real reported zero displays 0. YouTube counts are combined if the connected channel has multiple active broadcasts. TikTok displays — because this service has no official TikTok LIVE viewer-count integration; video view totals are not live viewers.

New alerts and Hype Trains still replace the handle/count area temporarily. Refresh the OBS Browser Source once after this update; its URL and dimensions stay the same for unchanged font settings.

Provider references: Twitch Get Streams, Kick official API, YouTube concurrent viewers, TikTok video metrics.

Camera height and appearance controls

Open Overlay studio → Make it yours. Set camera width and height independently; editing height chooses Custom width & height. Selecting 16:9, 4:3, or 1:1 recalculates height from width.

Under Logos & backgrounds, adjust logo size (16–72 px) and separate top/bottom background opacity (0–100%). Only the background fades. Text, logos, borders, and alert progress stay visible, including during Hype Trains.

Under Type, your way, set the Viewer count size (10–40 px) or uncheck Show viewer counts. Turning counts off hides their icon and number and pauses viewer-count polling; alerts continue normally.

Under Before the first alert, enter your Welcome text only. Leave it blank to hide it. This replaces the default welcome message until the first completed alert of the session. Event history still shows viewer name – alert detail afterward.

Choose Save changes. Your OBS source updates automatically. If you change camera height, logo size, or text size, enter the new Browser Source dimensions and webcam position shown in the studio into OBS. Refresh the studio and the OBS source once after installing this update to load the new controls.

Top and bottom bar heights

The optional second welcome line has been removed from the overlay and studio. Existing saved second-line text is no longer displayed.

In Logos & backgrounds, set Top bar height (px) and Bottom bar height (px) independently, then choose Save changes. Each setting is a minimum between 32 and 240 px; the bar grows if larger text or logos need more room. The bottom setting also applies to new alerts and Hype Trains. Existing bar sizes are preserved on upgrade.

After changing bar heights, use the new Browser Source dimensions and webcam position shown in the studio. Refresh the studio and OBS browser source once after this update; keep the same OBS URL.