React SDK API Reference

1import { BaxCloudClient } from '@baxcloud/react-sdk';
2
3const client = new BaxCloudClient({
4  projectId: 'your-project-id',
5  apiKey: 'your-api-key',
6});

1const room = await client.createRoom({
2  roomName: 'meeting-123',
3  liveType: 'video_conference',
4  maxParticipants: 50,
5});
6
7console.log('Room created:', room.roomName);

await client.deleteRoom('meeting-123');

const rooms = await client.listRooms();
console.log('Total rooms:', rooms.length);

const room = await client.getRoom('meeting-123');
console.log('Room info:', room);

1const token = await client.getToken({
2  roomName: 'meeting-123',
3  participant: {
4    userId: 'user-1',
5    name: 'Alice',
6    avatarUrl: 'https://example.com/avatar.jpg',
7    isHost: true,
8  },
9  liveType: 'video_conference',
10});
11
12console.log('Access token:', token.token);

1const room = await client.connect({
2  roomName: 'meeting-123',
3  participant: {
4    userId: 'user-1',
5    name: 'Alice',
6    isHost: true,
7  },
8  liveType: 'video_conference',
9});
10
11console.log('Connected to room');

await client.disconnect();
console.log('Disconnected from room');

const state = client.getConnectionState();
console.log('Connection state:', state);

1await client.sendRealtimeMessage({
2  roomName: 'meeting-123',
3  message: 'Hello everyone!',
4  sender: {
5    userId: 'user-1',
6    name: 'Alice',
7  },
8});

1const recording = await client.startRecording({
2  roomName: 'my-room',
3  fileType: 'MP4',
4});
5
6console.log('Recording started:', recording.egressId);

await client.stopRecording(recording.egressId);
console.log('Recording stopped');

1// List all active recordings
2const activeRecordings = await client.listActiveRecordings();
3
4// List active recordings for a specific room
5const roomRecordings = await client.listActiveRecordings('my-room');

1const recordings = await client.listRecordings({
2  status: 'COMPLETED',
3  page: 1,
4  limit: 20,
5});
6
7console.log('Recordings:', recordings.items);
8console.log('Total:', recordings.meta.total);

const recording = await client.getRecording('recording-123');
console.log('Recording status:', recording.status);
console.log('File URL:', recording.fileUrl);

1const { downloadUrl, expiresIn } = await client.getRecordingDownloadUrl('recording-123', 7200);
2console.log('Download URL (expires in 2 hours):', downloadUrl);

1import { BaxCloudProvider } from '@baxcloud/react-sdk';
2
3function App() {
4  return (
5    <BaxCloudProvider 
6      projectId="your-project-id" 
7      apiKey="your-api-key"
8    >
9      <YourApp />
10    </BaxCloudProvider>
11  );
12}

1import { useBaxCloud } from '@baxcloud/react-sdk';
2
3function MyComponent() {
4  const client = useBaxCloud();
5  
6  const createRoom = async () => {
7    await client.createRoom({
8      roomName: 'my-room',
9      liveType: 'video_call',
10    });
11  };
12  
13  return <button onClick={createRoom}>Create Room</button>;
14}

1import { useBaxCloudRoom } from '@baxcloud/react-sdk';
2import { useEffect } from 'react';
3
4function VideoRoom() {
5  const {
6    room,
7    connectionState,
8    connect,
9    disconnect,
10    enableCamera,
11    disableCamera,
12  } = useBaxCloudRoom({
13    roomName: 'my-room',
14    participant: {
15      userId: 'user-1',
16      name: 'John Doe',
17      isHost: true,
18    },
19    liveType: 'video_call',
20  });
21
22  useEffect(() => {
23    connect();
24    return () => disconnect();
25  }, []);
26
27  if (connectionState !== 'connected') {
28    return <div>Connecting...</div>;
29  }
30
31  return (
32    <div>
33      <h2>Video Call</h2>
34      <button onClick={enableCamera}>Enable Camera</button>
35      <button onClick={disableCamera}>Disable Camera</button>
36      <button onClick={disconnect}>Leave</button>
37    </div>
38  );
39}

1import { useBaxCloudRoom, useBaxCloudParticipants } from '@baxcloud/react-sdk';
2
3function ParticipantsList() {
4  const { room } = useBaxCloudRoom({
5    roomName: 'my-room',
6    participant: { userId: 'user-1', name: 'John' },
7    liveType: 'video_conference',
8  });
9  
10  const participants = useBaxCloudParticipants(room);
11  
12  return (
13    <div>
14      <h3>Participants ({participants.length})</h3>
15      <ul>
16        {participants.map((p) => (
17          <li key={p.identity}>{p.name || p.identity}</li>
18        ))}
19      </ul>
20    </div>
21  );
22}

1import { useBaxCloudRoom, useBaxCloudTracks } from '@baxcloud/react-sdk';
2
3function TracksList() {
4  const { room } = useBaxCloudRoom({
5    roomName: 'my-room',
6    participant: { userId: 'user-1', name: 'John' },
7    liveType: 'video_call',
8  });
9  
10  const tracks = useBaxCloudTracks(room);
11  
12  return (
13    <div>
14      <h3>Active Tracks: {tracks.length}</h3>
15    </div>
16  );
17}

1import { BaxCloudRoomController, useBaxCloud } from '@baxcloud/react-sdk';
2import { useEffect } from 'react';
3
4function App() {
5  const client = useBaxCloud();
6  const controller = BaxCloudRoomController.instance;
7
8  useEffect(() => {
9    controller.init(client);
10  }, [client]);
11
12  return <div>App</div>;
13}

{
  connectionQuality: 'excellent' | 'good' | 'poor' | 'unknown';
  rtt?: number;
  jitter?: number;
  packetLoss?: number;
}