OBS Remote Control (Svelte)

Browser-based OBS remote control built with Svelte + Vite.
This project talks directly to OBS via obs-websocket-js (v5) and does not need a Flask backend.

Features

• Connection page for OBS host/port/password.
• Video switcher page with scene controls, studio actions, transitions, and shortcuts.
• Browser storage for connection/session data and shortcut data.
• Hash-based navigation with readable control URLs like:
  • http://localhost:5173/#ws://192.168.1.103:4455/control

Tech Stack

• Svelte 5
• Vite
• TypeScript
• obs-websocket-js

Requirements

• Node.js 18+ (recommended: latest LTS)
• OBS Studio with obs-websocket v5 enabled
• OBS host/port/password configured in OBS (Tools -> obs-websocket Settings)

Quick Start

npm install
npm run dev

Open:

• http://localhost:5173/

Live demo: http://obsremote.dcoderz.site

NPM Scripts

• npm run dev - start local dev server
• npm run build - production build
• npm run preview - preview production build
• npm run check - Svelte + TypeScript checks

Routing

This app uses hash-based routing logic in src/lib/hashNavigation.ts:

• #/ -> connection page
• #ws://<host>:<port>/control -> control page for a specific OBS target
• Legacy formats are still parsed for compatibility (#/control, #/host/port/control)

Storage

Defined in src/lib/obs/storage.ts:

• sessionStorage key obs_ws_session - active connection
• localStorage key obs_ws_persisted - optional persisted connection
• localStorage key obs_user_shortcuts - shortcut definitions

Project Structure (key files)

• src/routes/Connection.svelte - connection UI
• src/routes/Control.svelte - switcher UI
• src/lib/connection/connectionPage.ts - connection page behavior
• src/lib/control/controlPage.ts - control page behavior
• src/lib/obs/client.ts - OBS websocket connection lifecycle
• src/lib/obs/obsOperations.ts - API-like OBS operations layer
• src/styles/connection.css - connection styling
• src/styles/control.css - control styling

Notes

• The app connects directly from browser to OBS using ws://<host>:<port>.
• If you cannot connect, check firewall/network rules and OBS websocket settings.