Docs

React and React Native

The browser half: the AvatarCall component, the useAvatarCall hook underneath it, and what changes on React Native.

Every server adapter mounts the same proxy, so the client half is the same everywhere: one component pointed at your route.

The component

import { AvatarCall, createProxyClient } from "realtime-avatar/react";

const client = createProxyClient({ proxyUrl: "/api/realtime-avatar" });

<AvatarCall client={client} avatarId={avatarId} />

// Audio only — no video track is requested, so nothing renders and
// nothing decodes.
<AvatarCall client={client} avatarId={avatarId} mode="voice" />

The hook underneath it

AvatarCall is a default surface over useAvatarCall. Reach for the hook when you want the call's state but your own layout — a custom control bar, your own video element, a call that lives inside something else.

import { createProxyClient, useAvatarCall } from "realtime-avatar/react";

const client = createProxyClient({ proxyUrl: "/api/realtime-avatar" });

function MyCall({ avatarId }: { avatarId: string }) {
  const call = useAvatarCall({ client, avatarId });
  // Drive your own UI from the call's state, and render its video surface
  // wherever your layout wants it.
}

Nothing opens a session until you ask it to. A mounted component that has not connected costs nothing — sessions are metered per second on air, so the connect is always an explicit act.

React Native

A separate entry point, because the media stack is not the browser's: it wraps LiveKit's React Native room and needs an audio session the OS has granted.

import {
  RealtimeAvatarLiveKitRoom,
  AvatarVideoSurface,
  useRealtimeAvatarAudioSession,
} from "realtime-avatar/react-native";

// Own the OS audio session while the call is up, or the room connects
// with no microphone and the call is one-way. The argument IS the
// lifecycle: pass your connected state, not `true`, so the session is
// released when the call ends.
useRealtimeAvatarAudioSession(connected);

registerGlobals from the same entry point must run once at app start — it installs the WebRTC globals React Native does not ship.

Next