React Native SDK

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

1import { useEffect, useState } from 'react';
2import { useBaxCloudRoom } from '@baxcloud/react-native-sdk';
3import { PermissionsAndroid, Platform } from 'react-native';
4
5function VideoCall() {
6  const [permissionsGranted, setPermissionsGranted] = useState(false);
7  const { connectionState, connect, disconnect } = useBaxCloudRoom({
8    roomName: 'my-room',
9    participant: {
10      userId: 'user-123',
11      name: 'John Doe',
12      isHost: true,
13    },
14    liveType: 'video_call',
15  });
16
17  useEffect(() => {
18    // Request permissions first
19    async function init() {
20      if (Platform.OS === 'android') {
21        await PermissionsAndroid.requestMultiple([
22          PermissionsAndroid.PERMISSIONS.CAMERA,
23          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
24        ]);
25      }
26      setPermissionsGranted(true);
27      connect();
28    }
29    
30    init();
31    return () => disconnect();
32  }, []);
33
34  if (!permissionsGranted) {
35    return <Text>Requesting permissions...</Text>;
36  }
37
38  return <Text>Connection: {connectionState}</Text>;
39}

1import { useEffect, useState } from 'react';
2import { View, Text, StyleSheet } from 'react-native';
3import { 
4  useBaxCloudRoom, 
5  useBaxCloudParticipants,
6  BaxCloudVideoView 
7} from '@baxcloud/react-native-sdk';
8
9function VideoCall() {
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    // ... permission logic
20    connect();
21    return () => disconnect();
22  }, []);
23
24  return (
25    <View style={styles.container}>
26      {participants.map((participant) => {
27        return (
28        <View key={participant.userId} style={styles.videoContainer}>
29          {/* Render video if camera is enabled */}
30          {participant.cameraEnabled && (
31            <BaxCloudVideoView
32              userId={participant.userId}
33                style={styles.video}
34              mirror={participant.isLocal}
35            />
36          )}
37          
38          {/* Participant info overlay */}
39          <View style={styles.infoOverlay}>
40            <Text style={styles.name}>{participant.name}</Text>
41            {!participant.microphoneEnabled && <Text>🔇</Text>}
42            {participant.isLocal && <Text style={styles.localTag}>(You)</Text>}
43          </View>
44        </View>
45        );
46      })}
47    </View>
48  );
49}
50
51const styles = StyleSheet.create({
52  container: {
53    flex: 1,
54    flexDirection: 'row',
55    flexWrap: 'wrap',
56    gap: 8,
57  },
58  videoContainer: {
59    width: '48%',
60    aspectRatio: 16/9,
61    backgroundColor: '#000',
62    borderRadius: 8,
63    overflow: 'hidden',
64    position: 'relative',
65  },
66  video: {
67    width: '100%',
68    height: '100%',
69  },
70  infoOverlay: {
71    position: 'absolute',
72    bottom: 8,
73    left: 8,
74    flexDirection: 'row',
75    gap: 4,
76    backgroundColor: 'rgba(0,0,0,0.6)',
77    padding: 4,
78    paddingHorizontal: 8,
79    borderRadius: 4,
80  },
81  name: {
82    color: '#fff',
83    fontSize: 12,
84  },
85  localTag: {
86    color: '#888',
87    fontSize: 12,
88  },
89});