React SDK | RelayRTC Docs

Install

pnpm add @relayrtc/react @relayrtc/client

See installation for package requirements.

Requirements

Use React 18.3.1 or 19, a supported browser, a signaling URL and a participant token from your server. Use HTTPS outside localhost.

Wrap your call in RelayProvider and RelayRoom. Hooks read the nearest provider.

Connect a room

'use client'
 
import { RelayProvider, RelayRoom } from '@relayrtc/react'
 
export function Call({ token, signalingUrl }: { token: string; signalingUrl: string }) {
  return (
    <RelayProvider signalingUrl={signalingUrl}>
      <RelayRoom token={token}>
        <div>Your call interface</div>
      </RelayRoom>
    </RelayProvider>
  )
}

The SDK handles room state and media. You choose the layout, controls and participant tiles.

Hooks

Hook	Purpose
useRoom	Room, connection state, errors, join and leave.
useParticipants	Local and remote participant list.
useLocalParticipant	Local identity, media controls and metadata.
useTracks	Filter remote publications.
useMediaTrack	Bind local or remote media to an element and track playback.
useLocalMedia	Camera, microphone and screen snapshots.
useMessages	Local message history and sending.
useConnectionQuality	Room and participant network quality.

Components

Use MediaLoader to show loading. The SDK does not include a prebuilt Zoom-style call layout.

Server work

Create rooms, issue tokens and administer participants with the Node SDK or REST API. Keep secret API keys out of this package.