WebFSR - webfsr.com

Web client for managing FSR pads running the teejusb FSR firmware.

• Connect to the microcontroller using WebSerial.
• View current sensor data and adjust thresholds.
• Display heartrate monitor data using WebBluetooth.
• Installable as a PWA, allowing it to run in a dedicated window and offline.
• OBS Browser Source components of each visualization to display in recordings or streams.
• Control thresholds from an external mobile device.

PWA Installation

WebFSR is installable as a PWA. This will allow you to run it offline and in a separate window, which is more convenient than managing it in a browser tab.

To install it as a PWA, find a button in the top-right corner of your browser which says "Install WebFSR":

Managing thresholds from an external device

Note

Direct WebRTC connections may not always be possible on certain restrictive networks (e.g. universities or mobile). If you self-host, trystero allows adding a TURN server to proxy connections. Additionally, check your browser's WebRTC settings if the devices are failing to connect (for example, Helium Browser's #webrtc-ip-handling-policy flag needs to be set to "Default").

A mobile device can be paired to control the thresholds of the connected pad. This is entirely peer-to-peer, using WebRTC for communication.

The initial signaling handshake is done using trystero with the selected BitTorrent, Nostr, MQTT, and/or self-hosted WebSocket relay backend. The chosen backends provide signaling relays to match peers and exchange WebRTC SDP needed to make a connection. Per trystero documentation, all signaling communication is encrypted using the unique app and room ID.

OBS Browser Source Components

Important

Minimizing or occluding the page will likely cause the websocket connection to be heavily throttled. Until a good mitigation for this is found, bring the tab/PWA into focus, and then open ITG without focusing any other window.

Each visualization can be loaded in a separate route to display in an OBS Browser Source. This allows for high quality stream elements without resorting to using Window Capture.

This feature works by using the websocket server built into OBS. Each route connects as a client, and the main page sends data to each of the component pages through obs-websocket.

Steps to use the OBS Browser Source components:

1. Enable the OBS websocket server by going to Tools > WebSocket Server Settings > Enable WebSocket Server.
2. Copy the password under Server Password.
3. In the main page under the OBS section, paste the password.
4. Customize a component using the "Create component" button in the OBS section.
5. Copy the generated link and paste that into the source URL for an OBS Browser Source.

Components are located at the route /obs/{visualization}/.

List of the current routes:

• /obs/sensors/
• /obs/graph/
• /obs/heartrate/

Future TODO

• Integration with ITGmania
• Import profiles saved from teejusb FSR web UI.

Development

Prerequisites

• pnpm

Setup

1. Clone the repo
2. Install dependencies:

pnpm install

3. Run the dev server:

pnpm dev