Set Up Video Calling for React Native

Updated 

Brands can integrate video calling into their mobile apps through Sprinklr Messenger. This guide explains how to integrate and configure video calling in Sprinklr Messenger for React Native using the Amazon Chime SDK.

Prerequisites

To integrate AWS Chime, ensure the following prerequisites are met:

  • AWS account with the Chime SDK enabled.

  • If you want to enable video recording, you need an S3 bucket associated with your AWS account to store Chime-side recordings.

  • AWS account number to process video call recordings​.

  • Permission to access Care Console in the Sprinklr platform​.

Note: You can enable AWS Chime account to make and receive video calls by reaching out to Sprinklr support at tickets@sprinklr.com.

Installation

1. Install the AWS Chime SDK.

Add the following package dependency to your package.json file:

"@sprinklrjs/chime-video": "2.0.1"

2. Register the video call provider.

In your application entry point, register the video call provider with the Messenger SDK before calling the takeOff method:

MessengerClient.registerVideoCallProviderConfig({  provider: 'AMAZON_CHIME',});

Configuring Push Notifications

You can configure push notification handling on Android and iOS, so that incoming calls and call notifications work properly.

Android

For Android, follow these steps:​

Step 1: Create MessengerPushService

This service is responsible for handling incoming push notifications. The implementation differs based on the notification library being used.

If using react-native-firebase, extend ReactNativeFirebaseMessagingService in your MessengerPushService.

The following is an example code. A similar Service class can be created for any other push notifications library as well.

Example:

package com.messengerexample;import android.util.Log;import com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService;import com.google.firebase.messaging.RemoteMessage;import com.sprinklr.messenger.SPRMessengerController;import java.util.Map;public class MessengerPushService extends RNPushNotificationListenerService {    private static final String TAG = "MessengerPushService";    @Override    public void onMessageReceived(RemoteMessage remoteMessage) {        Map<String, String> remoteData = remoteMessage.getData();        Log.d(TAG, remoteData.toString());        if (SPRMessengerController.shared().pusher().canHandlePushEvent(remoteData)) {            SPRMessengerController.shared().pusher().handlePushEvent(this, remoteData, MainActivity.class);        } else {            super.onMessageReceived(remoteMessage);        }    }    @Override    public void onNewToken(String token) {        super.onNewToken(token);    }}

Step 2: Register the Service in AndroidManifest.xml

Add the following to your <application> block:

<service    android:name="<your.package.name>.MessengerPushService"    android:exported="false">    <intent-filter>        <action android:name="com.google.firebase.MESSAGING_EVENT" />    </intent-filter></service>

Step 3: Link sprinklr-messenger-notifications package

In the settings.gradle file, include the following project:

include ':sprinklr-messenger-notifications'project(':sprinklr-messenger-notifications').projectDir = new File(rootProject.projectDir, '../node_modules/@sprinklrjs/chat-native-client/android/notifications')

In the app/build.gradle file, add the following dependency under the dependencies block:

implementation project(':sprinklr-messenger-notifications')

Step 4: Update the MainApplication.java file

  • Import the following:

import com.sprinklr.messenger.SPRMessengerController;import com.sprinklr.messenger.config.bean.SPRPusher;import com.sprinklr.messenger.NotificationPreferences;
  • In the onCreate() method, initialize the SPRMessengerController and optionally configure notification icons:

SPRMessengerController.initialize(SPRPusher::new, this, mReactNativeHost); // optional: to customize notification icons (should be done after SPRMessengerController.initialize)NotificationPreferences notificationPreferences = new NotificationPreferences();notificationPreferences.setSmallIcon(R.drawable.notification_icon); // for notification iconnotificationPreferences.setCallIcon(R.drawable.call_icon); // for call iconSPRMessengerController.shared().pusher().setSPRNotificationPreferences(notificationPreferences);

Step 6: Update the MainActivity.java file

import android.content.Intent;import com.sprinklr.messenger.SPRMessengerController;public class MainActivity extends ReactActivity {  // other methods  @Override  public void onResume() {    SPRMessengerController.shared().removeCallNotification(this, this.getIntent());    super.onResume();  }  @Override  public void onNewIntent(Intent intent) {    super.onNewIntent(intent);    SPRMessengerController.shared().removeCallNotification(this, intent);  } }

iOS

For iOS, follow these steps:

Step 1: Add VOIP support

Add the following in your Info.plist file:

<key>UIBackgroundModes</key><array><string>remote-notification</string><string>voip</string></array>

​Step 2: Implement PKPushRegistryDelegate methods

Make the following changes in the AppDelegate.m file:

#import <PushKit/PushKit.h>#import <SPRMessenger/SPRVoipPushNotificationManager.h>@interface AppDelegate () <PKPushRegistryDelegate>@end@implementation AppDelegate  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  {       PKPushRegistry * voipRegistry = [[PKPushRegistry alloc] initWithQueue:dispatch_get_main_queue()];    voipRegistry.delegate = (AppDelegate *)[UIApplication sharedApplication].delegate;    voipRegistry.desiredPushTypes = [NSSet setWithObject:PKPushTypeVoIP];    // other initializations    return [super application:application didFinishLaunchingWithOptions:launchOptions];  }  #pragma mark - PKPushRegistryDelegate methods  - (void)pushRegistry:(PKPushRegistry *)registry didUpdatePushCredentials:(PKPushCredentials *)pushCredentials forType:(PKPushType)type {    [[SPRVoipPushNotificationManager shared] didUpdatePushCredentials:pushCredentials forType:(NSString *)type];  }  - (void)pushRegistry:(PKPushRegistry *)registry didInvalidatePushTokenForType:(PKPushType)type {    [[SPRVoipPushNotificationManager shared] didInvalidatePushTokenForType:(NSString *)type];  }  - (void)pushRegistry:(PKPushRegistry *)registry didReceiveIncomingPushWithPayload:(PKPushPayload *)payload forType:(PKPushType)type withCompletionHandler:(void (^)(void))completion {    if ([[SPRVoipPushNotificationManager shared] canHandleVoipPushEvent: payload]) {      [[SPRVoipPushNotificationManager shared] handleVoipPushEvent:payload forType:type completion:completion];      return;    }  }@end

Make the following changes in the AppDelegate.swift file:

import PushKitimport SPRMessenger@UIApplicationMainclass AppDelegate: PKPushRegistryDelegate {    func application(        _ application: UIApplication,        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil    ) -> Bool {        let voipRegistry = PKPushRegistry(queue: DispatchQueue.main)        voipRegistry.delegate = self        voipRegistry.desiredPushTypes = [PKPushType.voIP]        // other initializations        return true    }    // MARK: - PKPushRegistryDelegate    func pushRegistry(        _ registry: PKPushRegistry,        didUpdate pushCredentials: PKPushCredentials,        for type: PKPushType    ) {        SPRVoipPushNotificationManager.shared().didUpdatePushCredentials(pushCredentials, forType: type.rawValue)    }    func pushRegistry(        _ registry: PKPushRegistry,        didInvalidatePushTokenFor type: PKPushType    ) {        SPRVoipPushNotificationManager.shared().didInvalidatePushToken(forType: type.rawValue)    }    func pushRegistry(        _ registry: PKPushRegistry,        didReceiveIncomingPushWith payload: PKPushPayload,        for type: PKPushType,        completionHandler completion: @escaping () -> Void    ) {        if SPRVoipPushNotificationManager.shared().canHandleVoipPushEvent(payload) {            SPRVoipPushNotificationManager.shared().handleVoipPushEvent(payload, forType: type.rawValue, completion: completion)            return        }    }}

Support Video Continuity Outside Live Chat Interface

This feature allows users to continue a video or audio call even after they navigate away from the Live Chat interface and return to the host brand application. Without continuity, the video call must be disconnected before leaving the Live Chat interface. With continuity enabled, the call seamlessly continues outside the Live Chat interface.

Platform‑specific continuity behavior is as follows:

  • Android: Continuity works at the device level, allowing calls to persist outside the parent app.

  • iOS: Continuity works at the app level, so calls remain active only within the parent application.

Note: ​To enable Video Call Continuity, contact Sprinklr Support at tickets@sprinklr.com.