Client SDK

Web & React Native

The same API as the Flutter SDK, for the browser and React Native. connect → invite / accept → you get a LiveKit room to render however you like.

Install

terminal

1npm i @socrits/client livekit-client2# React (optional prebuilt call UI):3npm i @livekit/components-react @livekit/components-styles

Initialize & connect

Authenticate with a session token from your backend (see Server & tokens) — never put your sk_live_ key in browser code.

app.ts

1import { Socrits } from "@socrits/client";23const client = new Socrits("https://cloud.unitythink.com");45// Your backend mints the user's session token (POST /v1/session with sk_live_).6await client.connect({7  sessionEndpoint: "https://your-backend.com/socrits/session", // returns { token }8  userId: "alice",9  userName: "Alice",10});

Callbacks

app.ts

1client.onIncomingCall = (call) => {2  // show a ringing UI, then:3  // const room = await client.accept(call);4  // client.reject(call);5};6client.onCallConnected = (room, mode) => {7  // 'room' is a LiveKit Room — render it (below)8};9client.onCallRejected = (callId) => {};10client.onCallEnded    = (reason) => {};11client.onMessage      = (msg) => {};

Make & receive a call

app.ts

1// Caller2const callId = await client.invite({ toUserId: "bob", mode: "video" }); // or "voice"34// Callee (inside onIncomingCall)5const room = await client.accept(call);   // → onCallConnected fires on both sides

Option A — with a UI-Kit (React)

The web SDK hands you a standard LiveKit Room, so you can drop in LiveKit’s official React components for a complete call UI (grid, PiP, device controls) with almost no code:

CallScreen.tsx

1// React: use LiveKit's prebuilt components as your UI-Kit2import { LiveKitRoom, VideoConference } from "@livekit/components-react";3import "@livekit/components-styles";45function CallScreen({ url, token }) {6  return (7    <LiveKitRoom serverUrl={url} token={token} connect audio video>8      <VideoConference />   {/* full call UI: grid, PiP, controls */}9    </LiveKitRoom>10  );11}12// get url+token from POST /v1/token, or reuse the connected room from onCallConnected

Option B — without a UI-Kit

Render tracks yourself from the room object — works in any framework or vanilla JS:

app.ts

1// Vanilla: attach tracks from the LiveKit Room2client.onCallConnected = (room) => {3  room.on("trackSubscribed", (track) => {4    if (track.kind === "video") document.getElementById("remote").appendChild(track.attach());5  });6  room.localParticipant.setMicrophoneEnabled(true);7  room.localParticipant.setCameraEnabled(true);8};

Chat

app.ts

1client.onMessage = (m) => { /* append */ };2await client.sendMessage({ toUserId: "bob", text: "Hey!" });3const history = await client.messageHistory(conversationId, { limit: 30 });4const convos  = await client.conversations();5client.setTyping(conversationId, true);6client.markRead(conversationId);

React Native

Use the same @socrits/client package; pair it with @livekit/react-native for media rendering.
Everything else — connect, invite, accept, chat — is identical to the web examples above.

Flutter

In-app Chat