ruby = 2.7.6
node >= v16
react >= 0.71.x
yarn >= 1.22.17

Execute the following commands from the repository root folder

yarn
yarn prepack
yarn link
cd example
# nano .env use your own keys
yarn link @kaleyra/video-react-native-module
yarn pods
yarn ios
yarn android

react-native start --reset-cache

Open the terminal in your React-Native-App folder and run the following commands

npm install @kaleyra/video-react-native-module

• add tools:replace="android:allowBackup" to AndroidManifest.xml. See here for an example
• add maven { url 'https://maven.bandyer.com/releases' } in build.gradle. See here for an example

In case your application already provides the WebRTC framework in a third party module, a conflict may arise when trying to install the dependencies through Cocoapods. In order to resolve the conflict you can download and install the Kaleyra Video iOS framework as a standalone package. To enable the standalone framework you must change your application's Podfile declaring the $KaleyraNoWebRTC variable before the first target definition. You can give whatever value you want to the variable as long as it is defined before the target definitions.

platform :ios, min_ios_version_supported
prepare_react_native_project!

$KaleyraNoWebRTC = ''

target 'KaleyraVideoReact' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()
[...]
end

npm uninstall @kaleyra/video-react-native-module

You can refer to the Kaleyra Video module in your React Native app via

KaleyraVideo

The first thing you need to do is to configure the module specifying your keys and your options.

var kaleyraVideo = KaleyraVideo.configure({
    environment: Environments.sandbox(), // production()
    appID: 'mAppId_xxx', // your mobile appId
    region: Regions.europe(), // india(), us()
    logEnabled: true, // enable the logger
    tools: { // by default no tools will be set
        chat: {
            audioCallOption: {
                type: AudioCallType.AUDIO, // AUDIO or AUDIO_UPGRADABLE
                recordingType: RecordingType.NONE, // NONE, MANUAL or AUTOMATIC
            },
            videoCallOption: {
                recordingType: RecordingType.NONE, // NONE, MANUAL or AUTOMATIC
            }
        },
        fileShare: true,
        whiteboard: true,
        screenShare: {
            inApp: true, // screenshare only the app
            wholeDevice: true // screenshare the whole device
        },
        feedback: true
    },

    // optional you can set one or more of the following capabilities, by default callkit is enabled
    iosConfig: {
        voipHandlingStrategy: VoipHandlingStrategy.AUTOMATIC, // implement to be able to receive voips
        callkit: {
            enabled: true, // enable callkit on iOS 10+
            appIconName: "logo_transparent", // optional but recommended
            ringtoneSoundName: "custom_ringtone.mp3" // optional
        }
    }
});

If screenShare.wholeDevice is set to true look here for the required additional setup.

To listen for events and/or errors register Check the documentation here for a complete list.

Example:

kaleyraVideo.events.onCallModuleStatusChanged = (status: String) => {};

If you desire to use VoIP notifications on iOS platform as first thing you should configure kaleyraVideo passing a config object as follow:

var kaleyraVideo = KaleyraVideo.configure({
    [...]
    iosConfig: {
        voipHandlingStrategy: VoipHandlingStrategy.AUTOMATIC,
        [...]
    }
});

The iOS project requires a little setup for use VoIP notifications. Here you can find a description of how the project should be configured.

In order to get your device push token, you must listen for the KaleyraVideo.events.iOSVoipPushTokenUpdated event registering a callback as follows:

// The token is received in this listener only after calling kaleyraVideo.connect(_)
kaleyraVideo.events.oniOSVoipPushTokenUpdated = (token: string) => {
    // register the VoIP push token on your server
};

Warning: Make sure this listener is attached before calling kaleyraVideo.connect(_), otherwise the event reporting the device token could be missed.

The token provided in the callback is the string representation of your device token. Here's an example of a device token: dec105f879924349fd2fa9aa8bb8b70431d5f41d57bfa8e31a5d80a629774fd9

Here you can find an example of how your VoIP notifications payload should be structured.

To connect the plugin to the Kaleyra Video system you will need to provide a Session object. The session needs a userID and a function returning a promise with the access token for that user.

kaleyraVideo.connect({
    userID: "usr_xxx",
    accessTokenProvider(userId: string): Promise<string> {
        // get token for user_xxx and invoke success or error depending on the result
        return Promise.resolve("jwt_xxx");
    },
});

To make a call you need to specify some params.

kaleyraVideo.startCall({
    callees: ['usr_yyy','usr_zzz'], //  an array of user ids of the users you want to call
    callType: CallType.AUDIO_VIDEO, // AUDIO, AUDIO_UPGRADABLE or AUDIO_VIDEO - the type of the call you want to start
    recordingType: RecordingType.NONE // NONE, MANUAL or AUTOMATIC
});

To make a chat you need to specify some params.

kaleyraVideo.startChat('usr_yyy');// the user_id of the user you want to create a chat with

This method will allow you to set your user details DB from which the sdk will read when needed to show the information.

Be sure to have this always up to date, otherwise if an incoming call is received and the user is missing in this set the user ids will be printed on the UI.

kaleyraVideo.addUsersDetails([
    {userID: "usr_yyy", firstName: "User1Name", lastName: "User1Surname"},
    {userID: "usr_zzz", firstName: "User2Name", lastName: "User2Surname"},
]);

This method will allow you to remove all the user info from the local app DB.

kaleyraVideo.removeUsersDetails();

This method will allow you to specify how you want your user details to be displayed.

Be aware that you can specify only keywords which exist in the UserDetails type.

For example: if you wish to show only the firstName while your dataset contains also the lastName you may change it here.

kaleyraVideo.setUserDetailsFormat({
    default: "${firstName} ${lastName}",
    androidNotification: "${firstName} ${lastName}" // optional if you wish to personalize the details in the notification.
});

kaleyraVideo.clearUserCache();

This method is useful for use-cases where you need to show a prompt and don't want it to be invalidated by the call going into pip. For example: if you wish to show fingerprint dialog you should first put the current call in background, execute the fingerprint validation and then put back the call in foreground.

kaleyraVideo.setDisplayModeForCurrentCall(CallDisplayMode.FOREGROUND); // FOREGROUND, FOREGROUND_PICTURE_IN_PICTURE or CallDisplayMode.BACKGROUND

To verify a user for the current call.

kaleyraVideo.verifyCurrentCall(true);

To enable whole device screen share is required and additional setup. Open the iOS Xcode project of your React Native application and follow this guide. After completing the procedure described in the guide above you need to add to your Podfile this lines:

target 'KaleyraVideoReact' do
  pod 'BandyerBroadcastExtension'
  ...
end

target 'BroadcastExtension' do
  pod 'BandyerBroadcastExtension'
end

Furthermore, to allow a correct configuration of the SDK it is necessary to:

• create a file called "KaleyraVideoConfig.plist"
• add it to the same target of the application. (and NOT to the Extension)
• set Extension Minimum Deployments to match the version of the Application

This file must have the following content:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>broadcast</key>
	<dict>
		<key>appGroupIdentifier</key>
		<string><!-- PUT HERE THE BUNDLE ID OF YOUR APP GROUP --></string>
		<key>extensionBundleIdentifier</key>
		<string><!-- PUT HERE THE BUNDLE ID OF YOUR BROADCAST EXTENSION --></string>
	</dict>
</dict>
</plist>

The module supports on_call_incoming notification. You will need to set the voipHandlingStrategy and subscribe to iOSVoipPushTokenUpdated event to receive the voip token to use on your backend to notify the plugin.

Be aware that notifications VOIP notifications are different compared to push. They must be always handled by ensuring the invocation of the configure and connect methods in index.js or App.js.

Supports only on_call_incoming and on_message_sent notification types.

Be aware that notifications require HIGH priority

kaleyraVideo.handlePushNotificationPayload(payload);

Example of acceptable payload

{
  "google.delivered_priority":"high",
  "content-available":"1",
  "google.sent_time":1663347601917,
  "google.ttl":60,
  "google.original_priority":"high",
  "from":"320",
  "title":"",
  "google.message_id":"0:1123%ac212d7bf9fd7ecd",
  "message":"{\"kaleyra\":{\"payload\":{\"event\":\"on_call_incoming\",\"room_id\":\"room_b36f162\",\"data\":{\"initiator\":\"user1\",\"users\":[{\"user\":{\"userAlias\":\"user2\"},\"status\":\"invited\"},{\"user\":{\"userAlias\":\"user1\"},\"status\":\"invited\"}],\"roomAlias\":\"room_b37a64c6f162\",\"options\":{\"duration\":0,\"record\":true,\"recordingType\":\"manual\",\"recording\":\"manual\",\"creationDate\":\"2022-09-16T17:00:01.457Z\",\"callType\":\"audio_upgradable\",\"live\":true}}},\"user_token\":\"eyJhtokenksadfjoiasdjfoaidjfsoasidjfoi\"}}",
  "google.c.sender.id":"320"
}

# Bandyer now Kaleyra proprietary SDK
-keep class com.bandyer.** { *; }
-keep interface com.bandyer.** { *; }
-keep enum com.bandyer.** { *; }

-keep class com.kaleyra.** { *; }
-keep interface com.kaleyra.** { *; }
-keep enum com.kaleyra.** { *; }

The API documentation is available on the github pages link: https://kaleyravideo.github.io/VideoReactNativeModule/