Web apps (browser)

Unlike the Python examples, which are single self-contained scripts, the SDK ships two small browser apps built with Vite, React and TypeScript:

• an RCSP console for sending commands to devices and the driver, and
• an RGMP v2 viewer for watching the live motion/sensor stream, including a 3D hand visualization.

They live together in a single pnpm workspace under $ROKOKO_SDK_HOME/examples/web, alongside a shared bridge-web-core library. This page covers everything common to both: the architecture, one-time setup, and the order you start things in. Each app then has its own short page for the app-specific details.

How it fits together

A browser can’t open raw TCP sockets, so a web page can’t talk to the SDK driver directly. A small relay (the rkk-ws-bridge binary, shipped in $ROKOKO_SDK_HOME/bin) accepts WebSocket connections from the browser and forwards them to the driver’s TCP endpoints, translating only the framing, not the content. So there are always three processes in the chain:

flowchart LR
    RCSP["RCSP console<br/>:5180"]
    RGMP["RGMP v2 viewer<br/>:5181"]
    Bridge["rkk-ws-bridge"]
    Driver["SDK Driver"]
    Device["Device"]

    RCSP <-->|"WebSocket :8137"| Bridge
    RGMP <-->|"WebSocket :8138"| Bridge
    Bridge <-->|"TCP :45451 (RCSP)"| Driver
    Bridge <-->|"TCP :12276 (RGMP)"| Driver
    Driver <--> Device

Hop	RCSP console	RGMP v2 viewer
Web app dev server	http://localhost:5180	http://localhost:5181
Bridge WebSocket endpoint	ws://127.0.0.1:8137	ws://127.0.0.1:8138
Driver TCP endpoint (behind the bridge)	:45451	:12276

Caution

All three must be running, and they must be started in order — driver first, then the bridge, then the web app. The app connects to the bridge, and the bridge connects to the driver, so starting them out of order means nothing shows up.

Prerequisites

• A working SDK driver installation with $ROKOKO_SDK_HOME/bin on your PATH (see Quick Start). This is also where the rkk-ws-bridge binary lives.
• Node.js (18 or newer) and the pnpm package manager, to install dependencies and run the dev server.

One-time setup

Install the workspace dependencies once. From a terminal:

cd $ROKOKO_SDK_HOME/examples/web
pnpm install

This installs both apps and the shared library in a single step.

Running an app

Start the three processes in order, each in its own terminal.

1. Start the SDK driver (and connect a device). See Run the SDK driver for details:

rokoko-sdk --pipeline_formatter rgmp_v2

The --pipeline_formatter rgmp_v2 part is what makes the RGMP v2 stream available — it is required for the RGMP viewer, and harmless for the RCSP console.

2. Start the bridge. With no flags it hosts both bridges at once, so a single instance serves either app:

rkk-ws-bridge                 # RCSP on :8137 and RGMP on :8138

You can run just one with --rcsp-only or --rgmp-only, or point the bridge at a non-default driver address with --rcsp-addr / --rgmp-addr. Pass --help for the full list.

3. Start the web app you want, from the workspace folder:

cd $ROKOKO_SDK_HOME/examples/web
pnpm --filter rcsp-ws-bridge-web dev   # RCSP console → http://localhost:5180
# or
pnpm --filter rgmp-ws-bridge-web dev   # RGMP viewer  → http://localhost:5181

4. Open the app at the URL it prints, confirm the bridge URL shown in the connection bar at the top, and click Connect.

Tip

Leave the driver and bridge running while you work — you only need to restart the app’s dev server, and Vite hot-reloads code changes automatically.

Troubleshooting

Symptom	Likely cause	Fix
The app shows a bridge_error like “cannot reach RCSP server …”	The driver isn’t running (or is on another host/port)	Start the driver first; if it’s remote, point the bridge at it with --rcsp-addr / --rgmp-addr
Connects, but the RGMP viewer stays empty	The driver wasn’t started with --pipeline_formatter rgmp_v2, or no device is streaming	Restart the driver with the formatter flag and make sure a device is connected
The connection bar can’t reach the bridge	The bridge isn’t running, or the app is pointed at the wrong URL	Start rkk-ws-bridge and confirm the URL in the connection bar matches (:8137 RCSP / :8138 RGMP)
pnpm dev fails to bind its port	Port 5180/5181 already in use	Stop the other process, or let Vite pick the next free port

The apps

• RCSP Console (Web) — browser console for driving an RCSP server: send commands and watch responses and events live.
• RGMP v2 Viewer (Web) — browser viewer for the live RGMP v2 stream, with per-device cards, measured update rates, and a 3D hand visualization.