@2stars/video-react

Official React bindings for the 2Stars Video Platform. A thin Provider + hooks layer on top of @2stars/video-js — none of the heavy lifting is reimplemented; this package just makes it idiomatic in React.

import { StarsProvider, useRoom, usePeers, VideoTile } from '@2stars/video-react';

function App() {
  return (
    <StarsProvider token={participantToken}>
      <Call />
    </StarsProvider>
  );
}

function Call() {
  const { room, status } = useRoom();
  const peers = usePeers();
  if (status !== 'connected') return <div>Connecting…</div>;
  return peers.map(p => <VideoTile key={p.id} peer={p} />);
}

Install

npm install @2stars/video-react @2stars/video-js react react-dom

@2stars/video-js, react, and react-dom are peer dependencies — your app controls those versions.

Quick start

You authenticate users by handing the SDK a short-lived participant token that your backend obtains from the 2Stars API. Never embed your 2Stars API key in the browser bundle.

// Backend (Node) — mint a token per participant
const res = await fetch('https://api.2stars.io/video/v1/tokens', {
  method: 'POST',
  headers: { authorization: 'Bearer hbs_live_…', 'content-type': 'application/json' },
  body: JSON.stringify({ roomCode, participantId, displayName, ttlSeconds: 3600 }),
});
const { token } = await res.json();
// Send `token` to the browser, use it as the prop below.

// Frontend (React)
<StarsProvider token={participantToken} />

What's in the box

Provider

• <StarsProvider token> — root Provider. Connects, exposes a context every hook reads.

Hooks — connection & room

• useStarsClient() — raw client (escape hatch)
• useRoom() — { room, status }
• useConnectionState() / useConnectionStatus() — fine-grained signaling status
• useRoomKeyReady() — E2E key handshake state
• useVisibility() — page-visibility tracking (for adaptive bitrate)
• useMode() — P2P / SFU current routing mode

Hooks — media

• useLocalCamera() — manage local camera + mic
• useScreenShare() — start / stop screen share
• useScreenSharers() — list peers currently sharing screens
• usePeers() — every remote peer in the room
• useActiveSpeaker() — highest-audio peer right now
• useGridLayout() — adaptive grid sizing
• useBackground() — virtual / blurred background
• useAvatar() — AI-rendered avatar mode

Hooks — chat

• useMessages() — paginated message list
• useSendMessage() — sendMessage(text) callback

Hooks — AI

• useTranscription() — live transcript
• useTranslation() / useTranslatedAudio() — real-time translation
• useCorrection() — pre-send message correction
• useFactCheck() — inline fact check
• useAIParticipant() — AI participant ("Hebbs") state
• useWakeWord() — wake-word detection state
• useWhiteboard() — AI-generated whiteboards

Hooks — control

• useModeration() — kick / mute / ban / lock
• useRemoteControl() — request / grant remote desktop control over a shared screen

Components

• <VideoTile peer> — single peer's video + audio tile
• <RoomGrid> — adaptive grid of every peer
• <ChatStrip> — message + composer strip
• <WhiteboardSurface> — AI whiteboard display

Companion SDKs

• @2stars/video-js — the core JS SDK this wraps
• com.github.2stars-io:video-android — Android client
• @2stars/verifai-web — VerifAI device-trust SDK for browsers
• OpenAPI spec — generate a client in any language

License

MIT — see LICENSE.