Skip to main content
The official @rhombussystems/react package provides drop-in React components for streaming Rhombus cameras. Two player modes are available:
  • RhombusBufferedPlayer — MPEG-DASH live streaming via Dash.js (buffered, reliable)
  • RhombusRealtimePlayer — Low-latency H.264 over WebSocket via WebCodecs (near real-time)
Requires React 18+ and a backend endpoint that generates federated session tokens. Your Rhombus API key must never be exposed to the browser.

​
Install

npm install @rhombussystems/react
Peer dependencies: react and react-dom >= 18. The dashjs library is included automatically for DASH playback.

​
Quick Start

import { RhombusBufferedPlayer } from "@rhombussystems/react";

export function CameraView() {
  return <RhombusBufferedPlayer cameraUuid="YOUR_CAMERA_UUID" />;
}
This renders a DASH-based buffered video player. The component automatically:
  1. Requests a federated session token from your backend (POST /api/federated-token)
  2. Fetches media URIs from the Rhombus API
  3. Initializes Dash.js playback
Your backend must implement a POST /api/federated-token endpoint (or configure a custom path via the paths.federatedToken prop). See Backend Setup below.

​
Buffered Player (DASH)

The RhombusBufferedPlayer streams MPEG-DASH live video with configurable quality levels. 
import { RhombusBufferedPlayer } from "@rhombussystems/react";

export function BufferedCamera() {
  return (
    <RhombusBufferedPlayer
      cameraUuid="YOUR_CAMERA_UUID"
      bufferedStreamQuality="HIGH"
    />
  );
}

​
Stream Quality

Control server-side downscaling with the bufferedStreamQuality prop:
ValueDescription
"HIGH"Full resolution (default)
"MEDIUM"Medium downscale
"LOW"Low resolution, lowest bandwidth
Changing quality does not re-fetch the manifest or token — the Dash.js RequestModifier applies the change on the next segment request. 
import { useState } from "react";
import {
  RhombusBufferedPlayer,
  type RhombusBufferedStreamQuality,
} from "@rhombussystems/react";

export function CameraWithQuality() {
  const [quality, setQuality] = useState<RhombusBufferedStreamQuality>("HIGH");

  return (
    <>
      <select
        value={quality}
        onChange={(e) => setQuality(e.target.value as RhombusBufferedStreamQuality)}
      >
        <option value="HIGH">High</option>
        <option value="MEDIUM">Medium</option>
        <option value="LOW">Low</option>
      </select>
      <RhombusBufferedPlayer
        cameraUuid="YOUR_CAMERA_UUID"
        bufferedStreamQuality={quality}
      />
    </>
  );
}

​
Realtime Player (WebSocket)

The RhombusRealtimePlayer decodes H.264 frames over WebSocket using the browser’s WebCodecs API and renders to a <canvas>. This provides lower latency than DASH. 
import { RhombusRealtimePlayer } from "@rhombussystems/react";

export function RealtimeCamera() {
  return (
    <RhombusRealtimePlayer
      cameraUuid="YOUR_CAMERA_UUID"
      connectionMode="wan"
    />
  );
}

​
Connection Modes

ModeDescription
"wan"Uses the WAN H.264 WebSocket URI with federated token auth appended to the URL
"lan"Uses the LAN H.264 WebSocket URI. Auth is handled via an RFT cookie instead of URL parameters

​
Stream Quality

ValueDescription
"HD"Full resolution (default)
"SD"Lower resolution via /wsl path — changing this prop reconnects the WebSocket
Browser compatibility: WebCodecs with H.264 decoding is supported in Chrome, Edge, and Safari 16.4+. Firefox support is limited.

​
LAN Mode Considerations

In LAN mode, the SDK sets an RFT cookie with the federated token. This works when your app and the camera’s LAN endpoint share a compatible domain. If your app runs on localhost while the camera is on a different host, the cookie cannot be set by the browser. Use applyLanAuthCookie={false} if your integration handles the RFT cookie through a different mechanism.

​
Backend Setup

The SDK requires a server-side endpoint to generate federated session tokens. Your Rhombus API key stays on the server — it is never sent to the browser.

​
Token Endpoint

Your backend must expose a POST endpoint (default path: /api/federated-token): 
const express = require("express");
const app = express();
app.use(express.json());

app.post("/api/federated-token", async (req, res) => {
  const response = await fetch(
    "https://api2.rhombussystems.com/api/org/generateFederatedSessionToken",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-auth-scheme": "api-token",
        "x-auth-apikey": process.env.RHOMBUS_API_KEY,
      },
      body: JSON.stringify({
        durationSec: req.body.durationSec || 3600,
        domain: req.headers.origin,
      }),
    }
  );
  const data = await response.json();
  res.json(data);
});
The domain parameter in the token request must match your app’s origin. Without it, the browser will get CORS errors when fetching media URIs from api2.rhombussystems.com.

​
Override Mode (Proxy All Requests)

If you prefer to keep all Rhombus traffic server-side (the browser never talks to Rhombus directly), use apiOverrideBaseUrl: 
<RhombusBufferedPlayer
  cameraUuid="YOUR_CAMERA_UUID"
  apiOverrideBaseUrl="https://your-api.example.com"
/>
In this mode, your backend must also expose a POST /api/media-uris endpoint that proxies to Rhombus’s POST /camera/getMediaUris.

​
Props Reference

​
Shared Props

PropTypeDefaultDescription
cameraUuidstringrequiredCamera UUID to stream
apiOverrideBaseUrlstring—Route both token and media requests through your server
rhombusApiBaseUrlstringhttps://api2.rhombussystems.com/apiRhombus API base URL (when not using override)
paths.federatedTokenstring/api/federated-tokenPath to your token endpoint
paths.mediaUrisstring/camera/getMediaUris or /api/media-urisPath for media URI resolution
federatedSessionTokenstring—Skip token fetch; use this token directly
headersobject—Extra headers merged into the token request
getRequestHeaders() => object—Dynamic headers for each request
onError(error: Error) => void—Error callback

​
RhombusBufferedPlayer Props

PropTypeDefaultDescription
bufferedStreamQuality"HIGH" | "MEDIUM" | "LOW""HIGH"Server-side downscale level
applyBufferedStreamQualitybooleantrueSet false to disable quality parameter

​
RhombusRealtimePlayer Props

PropTypeDefaultDescription
connectionMode"wan" | "lan"requiredWAN (token via URL) or LAN (token via cookie)
realtimeStreamQuality"HD" | "SD""HD"Stream resolution; changing reconnects the WebSocket
applyLanAuthCookiebooleantrueSet RFT cookie for LAN mode
lanAuthCookieNamestring"RFT"Cookie name for LAN auth
lanAuthCookieDomainstring—Cookie domain for LAN auth
lanAuthCookiePathstring"/"Cookie path for LAN auth
lanAuthCookieSecurebooleantrueSecure flag on LAN auth cookie

​
Troubleshooting

Your backend does not have a token endpoint at the expected path. Either implement POST /api/federated-token or set the paths.federatedToken prop to match your route.
The federated token was generated without a domain matching your app’s origin. Pass your app’s origin as the domain parameter when calling generateFederatedSessionToken on your backend.
Check browser compatibility — WebCodecs H.264 requires Chrome, Edge, or Safari 16.4+. Check the browser console for [RhombusRealtimePlayer] messages.
The RFT cookie cannot be set across different origins. If your app runs on localhost and the camera is on a LAN host, use applyLanAuthCookie={false} and handle auth separately.

​
Resources

npm Package

Package details and version history

GitHub Repository

Source code, examples, and issues

Streaming Video Guide

Low-level streaming implementation without the SDK

Video Player Guide

Custom Dash.js player implementation