📼 Twitch Clip Wall

A BRB screen overlay that automatically cycles through your recent Twitch clips. Drop it into OBS as a browser source and your highlights play on a loop whenever you step away from stream.

Live: dexteritycs.github.io/Twitch-Clips/

---

Features

• Fetches your most recent clips automatically via Twitch API
• 1×1 fullscreen clip player — one clip at a time, cycles with a progress bar
• Clips cycle in random order so repeat viewers don't see the same sequence
• Separate obs.html overlay mode — no UI chrome, just the clip
• Twitch OAuth login flow built in — one-time setup, token persists
• Client ID entry screen — no code editing required

---

Files

File	Purpose
index.html	Main clip wall with login flow and settings
obs.html	Stripped-down overlay version for OBS browser source

---

Setup

1. Create a Twitch App

1. Go to dev.twitch.tv/console
2. Register a new application
3. Set OAuth Redirect URL to: https://dexteritycs.github.io/Twitch-Clips/
4. Copy your Client ID

2. First-Time Login

1. Open https://dexteritycs.github.io/Twitch-Clips/ in Chrome
2. Enter your Client ID on the entry screen and click Continue
3. Click Continue with Twitch and authorize
4. Your clips will start loading automatically

3. Add to OBS as a BRB Screen

Option A — Use obs.html (recommended)

1. Add a Browser Source
2. URL: https://dexteritycs.github.io/Twitch-Clips/obs.html
3. Set width and height to match your stream resolution (e.g. 1920 × 1080)

Option B — Use index.html Same as above but with the main URL.

---

How Clip Cycling Works

• On load, the app fetches your top clips from the past 30 days plus all-time highlights
• Clips play one at a time with a progress bar countdown
• When a clip ends, a new random clip is selected from the pool (avoiding repeats)
• The pool refreshes automatically every session

---

Tech

• Vanilla HTML/CSS/JS
• Twitch API — clips endpoint via Helix
• Twitch GQL VideoAccessToken_Clip query for signed MP4 URLs playable natively in browser sources (no iframe embed needed)
• OAuth Implicit Grant — token persists in localStorage