A web application that integrates OBS Studio with the FTC Live scoring system, enabling automated scene switching, match recording, and screenshot capture based on match events.
- Automated Scene Switching: Automatically switch OBS scenes based on FTC Live match events (match load, preview, start, etc.)
- Match Recording: Control OBS recording start/stop based on configurable match events
- Replay Buffer: Automatically save replay buffer clips for each match
- Screenshots: Capture screenshots at key moments (match preview, randomization, final scores)
- YouTube Chapters: Generate video chapter markers for YouTube uploads
- Match Events Table: Track all match events with timestamps, recordings, and screenshots
- Auto-Reconnect: Automatically reconnects to OBS and FTC Live if the connection is lost
- OBS Studio with WebSocket server enabled (v5.0+)
- Access to an FTC Live scoring system
- A modern web browser (Chrome recommended)
- Open OBS Studio
- Go to Tools > WebSocket Server Settings
- Enable the WebSocket server
- Note the port number (default: 4455)
- Optionally set a password
Since the FTC Live scoring system uses HTTP (not HTTPS), you may need to allow insecure content in your browser:
- Navigate to the hosted application or
http://localhost:3000 - Click the icon next to the URL and go to "Site settings"
- Find "Insecure content" and set it to "Allow"
- Refresh the page
- Connect to FTC Live: Enter the FTC Live server IP address, fetch events, and select your event
- Connect to OBS Studio: Enter your OBS WebSocket connection details
- Configure Scene Assignments: Map your OBS scenes to each field
- Set Transition Triggers: Choose which match events trigger scene switches
- Configure Recording/Screenshots: Enable and configure automatic recording and screenshot capture
- Node.js (v18 or later recommended)
- npm
# Clone the repository
git clone https://github.com/jvens/obs-ftc.git
cd obs-ftc
# Install dependencies
npm install
# Start the development server
npm startThe app will be available at http://localhost:3000.
Runs the app in development mode using Vite. The page will hot-reload when you make edits.
Builds the app for production to the build folder using TypeScript compiler and Vite. The build is minified and optimized for best performance.
Locally preview the production build before deploying.
Builds the app and deploys it to Firebase Hosting.
Builds the app and deploys it to Cloudflare Workers (static assets). Since the app is a
pure static SPA, it is served as an assets-only Worker with a single-page-application
fallback (equivalent to the Firebase index.html rewrite). First-time setup:
npx wrangler login # authorize your Cloudflare account (one time)
npm run cf:deploy # build + deploy to https://obs-ftc.<account>.workers.devConfiguration lives in wrangler.jsonc. Firebase Hosting and Cloudflare Workers are both
supported; use whichever you prefer.
Serves the production build locally through Wrangler (default
http://localhost:8787) for a production-like preview. Run
npm run build first.
- React 18 - UI framework
- TypeScript - Type-safe JavaScript
- Vite - Fast build tool and dev server
- Redux Toolkit - State management
- obs-websocket-js - OBS WebSocket client
Contributions are welcome! Here's how to get started:
- Fork the repository on GitHub
- Clone your fork locally:
git clone https://github.com/YOUR_USERNAME/obs-ftc.git
- Create a feature branch:
git checkout -b feature/your-feature-name
- Make your changes and commit them with descriptive messages
- Push to your fork:
git push origin feature/your-feature-name
- Open a Pull Request against the
mainbranch
- Follow the existing code style
- Test your changes locally before submitting
- Keep pull requests focused on a single feature or fix
- Update documentation if needed
Found a bug or have a feature request? Please open an issue on GitHub.
This project is licensed under the MIT License.
This is not an official project of FIRST. It is independently developed and volunteer maintained.
Jeramie Vens