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.

• React Native 0.60 or higher
• iOS 12.0 or higher
• Android 5.0 (API level 21) or higher
• Sendbird Calls SDK for iOS
• Sendbird Calls SDK for Android

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.

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

yarn add @sendbird/calls-react-native
npx pod-install

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

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, 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);

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);

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({
    userId: 'USER_ID',
    accessToken: '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.

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.

import { SendbirdCalls } from '@sendbird/calls-react-native';
import RNVoipPushNotification from 'react-native-voip-push-notification';

// 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.

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.

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

// 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.
}

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();

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({
 // ...
});

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();
  }
});

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
});

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