React SDK

Complete documentation and API reference for the BaxCloud React SDK

Installation

Get started with the BaxCloud React SDK

1npm install @baxcloud/react-sdk

Quick Start

Get up and running in minutes

1. Setup Provider

src/App.tsx
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}

2. Connect to a Room

src/VideoRoom.tsx
1import { useEffect } from 'react';
2import { useBaxCloudRoom } from '@baxcloud/react-sdk';
3
4function VideoRoom() {
5  const { room, connectionState, connect, disconnect } = useBaxCloudRoom({
6    roomName: 'my-room',
7    participant: {
8      userId: 'user-123',
9      name: 'John Doe',
10      isHost: true,
11    },
12    liveType: 'video_call',
13  });
14
15  useEffect(() => {
16    connect();
17    return () => disconnect();
18  }, []);
19
20  return <div>Connection: {connectionState}</div>;
21}

3. Render Video

src/VideoRoom.tsx
1import { useEffect } from 'react';
2import { 
3  useBaxCloudRoom, 
4  useBaxCloudParticipants,
5  BaxCloudVideoRenderer,
6  BaxCloudAudioRenderer
7} from '@baxcloud/react-sdk';
8
9function VideoRoom() {
10  const { room, connect, disconnect } = useBaxCloudRoom({
11    roomName: 'my-room',
12    participant: { userId: 'user-123', name: 'John Doe', isHost: true },
13    liveType: 'video_call',
14  });
15
16  const participants = useBaxCloudParticipants(room);
17
18  useEffect(() => {
19    connect();
20    return () => disconnect();
21  }, []);
22
23  return (
24    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem' }}>
25      {participants.map((participant) => (
26        <div 
27          key={participant.userId} 
28          style={{ 
29            position: 'relative', 
30            aspectRatio: '16/9', 
31            backgroundColor: '#000', 
32            borderRadius: '8px', 
33            overflow: 'hidden' 
34          }}
35        >
36          {/* Render video if camera is enabled */}
37          {participant.cameraEnabled && (
38            <BaxCloudVideoRenderer
39              userId={participant.userId}
40              mirror={participant.isLocal}
41            />
42          )}
43          
44          {/* Render audio */}
45          {participant.microphoneEnabled && (
46            <BaxCloudAudioRenderer userId={participant.userId} />
47          )}
48          
49          {/* Participant info overlay */}
50          <div style={{ 
51            position: 'absolute', 
52            bottom: 10, 
53            left: 10, 
54            color: 'white', 
55            background: 'rgba(0,0,0,0.6)', 
56            padding: '4px 8px', 
57            borderRadius: '4px' 
58          }}>
59            <span>{participant.name}</span>
60            {!participant.microphoneEnabled && <span> 🔇</span>}
61            {participant.isLocal && <span> (You)</span>}
62          </div>
63        </div>
64      ))}
65    </div>
66  );
67}

Key Features

What you can build with the React SDK

Video & Audio

HD video calls, audio conferences, and live streaming

Real-time Chat

Built-in chat system with typing indicators

Host Controls

Mute participants, kick users, spotlight speakers

Advanced Features

Polls, breakout rooms, reactions, and more

API Reference

Core components and hooks

BaxCloudProvider

Context provider that makes the BaxCloud client available to all child components.

1<BaxCloudProvider projectId="..." apiKey="...">
2  <YourApp />
3</BaxCloudProvider>

useBaxCloudRoom

Hook for managing room connection state and controls.

1const {
2  room,
3  connectionState,
4  connect,
5  disconnect,
6  enableCamera,
7  disableCamera,
8  enableMicrophone,
9  disableMicrophone,
10} = useBaxCloudRoom(options);

BaxCloudRoomController

Singleton controller for centralized room management with advanced features.

1import { BaxCloudRoomController } from '@baxcloud/react-sdk';
2
3const controller = BaxCloudRoomController.instance;
4controller.init(client);
5
6// Host controls
7await controller.muteAll();
8await controller.kickParticipant(userId);
9
10// Chat
11await controller.sendChatMessage('Hello!');
12
13// Polls
14const pollId = await controller.createPoll(
15  'What is your favorite color?',
16  ['Red', 'Blue', 'Green']
17);

Usage Examples

Common implementation patterns

1function VideoCall() {
2  const { connect, disconnect, connectionState } = useBaxCloudRoom({
3    roomName: 'video-call-123',
4    participant: {
5      userId: 'user-1',
6      name: 'Alice',
7      isHost: true,
8    },
9    liveType: 'video_call',
10  });
11
12  useEffect(() => {
13    connect();
14    return () => disconnect();
15  }, []);
16
17  if (connectionState !== 'connected') {
18    return <div>Connecting...</div>;
19  }
20
21  return <div>Video call active</div>;
22}

Recording

Record your rooms and manage recordings

1// Start recording
2const recording = await client.startRecording({
3  roomName: 'my-room',
4  fileType: 'MP4',
5});
6
7console.log('Recording started:', recording.egressId);
8
9// Stop recording
10await client.stopRecording(recording.egressId);
11
12// List recordings
13const recordings = await client.listRecordings({
14  status: 'COMPLETED',
15  page: 1,
16  limit: 10,
17});
18
19// Get download URL
20const { downloadUrl } = await client.getRecordingDownloadUrl(
21  'recording-123',
22  7200 // expires in 2 hours
23);
Recording events are automatically sent to your configured webhooks

Related Resources