Calls / React Native
Calls React Native v1
Calls React Native
Calls
React Native
Home
/
Calls
/
React Native

Make first call

Sendbird Calls for React-Native enables real-time voice and video calls for 1-to-1 calls or group calls among users within your Sendbird-integrated app. Our development kit can initialize, configure, and build voice and video calling functionality in your iOS app.

Sendbird Calls supports both Direct call and Group call. Follow the guide below to make your 1-to-1 call or start a group call from scratch using TypeScript.


Requirements


Get started

You can start making a 1-to-1 call with Direct call or create a room to start a group call with Group call by installing Sendbird Calls for React Native.

Step 1 Install the SDK

You can Install Calls SDK for React Native using npm. Install @sendbird/calls-react-native to the project.

$ npm i @sendbird/calls-react-native
$ npx pod-install

Step 2 Request system permission to access camera and microphone

To access audio and video of a device, system permissions are required. The following describes ways you can acquire permission from each operating system.

For iOS

The client app needs to be configured in accordance with iOS by including the Info.plist file for media access.

To use the camera and microphone, include NSMicrophoneUsageDescription and NSCameraUsageDescription respectively in the Info.plist file of the app.

For Android

For Android, system permissions are set in the AndroidManifest.xml file in the React Native module.

Additionally, if you would like to reduce the size of the file when you build your APK with minifyEnabled true, add the following line to the module's ProGuard rules file.

# SendBird Calls SDK
-keep class com.sendbird.calls.** { *; }
-keep class org.webrtc.** { *; }
-dontwarn org.webrtc.**
-keepattributes InnerClasses

To acquire permissions for the React Native SDK, implement the react-native-permissions library.

import Permissions, { PERMISSIONS } from 'react-native-permissions';

const CALL_PERMISSIONS = Platform.select({
 android: [PERMISSIONS.ANDROID.CAMERA, PERMISSIONS.ANDROID.RECORD_AUDIO, PERMISSIONS.ANDROID.BLUETOOTH_CONNECT],
 ios: [PERMISSIONS.IOS.CAMERA, PERMISSIONS.IOS.MICROPHONE],
 default: [],
});


const result = await Permissions.requestMultiple(CALL_PERMISSIONS);

Step 3 Initialize with Application ID

After configuring the client app, initialize the SDK with your Application ID when you first launch the client app to use the Calls SDK for React Native. You can find your Application ID on Sendbird Dashboard.

import { SendbirdCalls } from '@sendbird/calls-react-native';

SendbirdCalls.initialize(APP_ID);

Step 4 Authenticate a user

Once you’ve authenticated the client app, authenticate a user by calling the SendbirdCalls.authenticate() method.

import { SendbirdCalls } from '@sendbird/calls-react-native';

SendbirdCalls.authenticate(USER_ID, ACCESS_TOKEN)
 .then((user) => {
   // The user has been authenticated successfully.
 })
 .catch((error) => {
   // Error.
 });

After authenticating a user, you can continue to either make a 1-to-1 call with Direct call or start a group call with Group call. Skip to Step 9 if you wish to start a group call.


Make 1-to-1 call

Step 5 Add push notifications

For iOS

To receive push notifications using VoIP, add CallKit and PushKit. Then, enable Background Modes on your Xcode project’s Signing & Capabilities to support background operations using VoIP. Select the Voice over IP option under the list of available modes.

Add the user’s device token to the server to receive a 1-to-1 call. Call the SendbirdCalls.ios_registerVoIPPushToken() method to register the push token for VoIP.

// Update VoIP push token.
if (Platform.OS === 'ios') {
 RNVoipPushNotification.addEventListener('register', async (voipToken) => {
   await SendbirdCalls.ios_registerVoIPPushToken(voipToken);
   // The VoIP Push Token has been registered successfully.
 });
 RNVoipPushNotification.registerVoipToken();
}

Note: To receive push notifications using remote notifications, go to add push notifications.

For Android

You can set up push notifications using FCM by adding your server key on Sendbird Dashboard and register a FCM push token to Sendbird Server. To add your certificate on the dashboard, select an application, go to Settings > Calls > Notifications > Add credential. Call the SendbirdCalls.registerPushToken() method to register the push token.

// Update FCM push token.
if (Platform.OS === 'android') {
 const fcmToken = await messaging().getToken();
 await SendbirdCalls.registerPushToken(fcmToken);
 // The FCM Push Token has been registered successfully.
}

Step 6 Add an event handler

Add event handlers for the client app to react to events that occur for the 1-to-1 call. Event handlers can detect device-specific events and call-specific events.

To detect device-specific events, add the onRinging event handler by registering the SendbirdCalls.setListener() method. After you’ve added the event handler, an incoming call is handled as shown below.

SendbirdCalls.setLisetner({
  onRinging(callProps: DirectCallProperties) {
    // Process an incoming call.
  },
});

To detect call-specific events, add the DirectCallListener event handler by using the DirectCall.addLitsener() method. To see a full list of call-related events, search DirectCallListener in the sdk api reference file.

const unsubscribe = directCall.addListener({
 onEstablished: (call: DirectCallProperties) => {},

 onConnected: (call: DirectCallProperties) => {},

 onEnded: (call: DirectCallProperties) => {},

 onRemoteAudioSettingsChanged: (call: DirectCallProperties) => {},

 onRemoteVideoSettingsChanged: (call: DirectCallProperties) => {},

 // ...
});

unsubscribe();

Step 7 Make a call

You are now ready to make your first 1-to-1 call. To make a call, pass the callee’s user ID as an argument to a parameter in the SendbirdCalls.dial() method. To choose initial call configuration such as audio or video capabilities, video settings and mute settings, use the CallOptions type.

When SendbirdCallListener.onRinging or SendbirdCalls.dial is called, call the SendbirdCalls.getDirectCall() method to get DirectCall to make a call. To minimize the time it takes to receive call-specific events in the native SDKs to JavaScript, the React Native SDK does not convert DirectCallProperties to DirectCall.

const callOptions: CallOptions = {
 audioEnabled: true,
 videoEnabled: true,
 frontCamera: true,
};

const callProps = await SendbirdCalls.dial(CALLEE_ID, IS_VIDEO_CALL, callOptions);

const directCall = await SendbirdCalls.getDirectCall(callProps.callId);
directCall.addListener({
 // ...
});

Step 8 Receive a call

Register SendbirdCallListener to receive incoming calls. Accept or decline incoming calls using the directCall.accept() or the directCall.end() methods. When you accept the call, a media session will automatically be established by the SDK.

Before accepting any calls, the DirectCall.addListener must be registered upfront in the SendbirdCallListener.onRinging. Once registered, DirectCallListener enables reacting to in-call events through listener methods.

SendbirdCalls.setListener({
  async onRinging() {
    const directCall = await SendbirdCalls.getDirectCall(callProps.callId);

    const unsubscribe = directCall.addListener({
      onEnded() {
        unsubscribe();
      },
    });

    directCall.accept();
  }
});

Start a group call

Step 9 Create a room

When creating your first room for a group call, you can choose either a room that supports up to 6 participants with video or a room that supports up to 100 participants with audio. When the room is created, a room ID is generated.

const room = await SendbirdCalls.createRoom({
    roomType: SendbirdCalls.RoomType.SMALL_ROOM_FOR_VIDEO
});

Step 10 Enter a room

Once you have created a room using SendbirdCalls.createRoom(), you can use the returned room instance without needing to get a room instance.