@bandyer/video-react-native-module v1.0.0
Kaleyra Video React Native Module
Our machine development setup
ruby = 2.7.6
node >= v16
react >= 0.71.x
yarn >= 1.22.17
How to install the module:
Open the terminal in your React-Native-App folder and run the following commands
npm install @bandyer/video-react-native-module
How to remove the module:
npm uninstall @bandyer/video-react-native-module
How to use the Kaleyra Video module in your React Native app
You can refer to the Kaleyra Video module in your React Native app via
KaleyraVideo
Module setup
The first thing you need to do is to configure the module specifying your keys and your options.
Configure params
var kaleyraVideo = KaleyraVideo.configure({
environment: KaleyraVideo.environments.sandbox(), // production()
appID: 'mAppId_xxx', // your mobile appId
region: KaleyraVideo.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.
Module listen for errors/events
To listen for events and/or errors register Check the documentation here for a complete list.
Example:
kaleyraVideo.events.onCallModuleStatusChanged = (status: String) => {};
Listening for VoIP push token
In order to get your device push token, you must listen for the KaleyraVideo.events.iOSVoipPushTokenUpdated event registering a callback as follows:
kaleyraVideo.events.oniOSVoipPushTokenUpdated = (token: string) => {
// register the VoIP push token on your server
});
The token provided in the callback is the string representation of your device token. Here's an example of a device token: dec105f879924349fd2fa9aa8bb8b70431d5f41d57bfa8e31a5d80a629774fd9
Module connect
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");
},
});
Start a call
To make a call you need to specify some params.
Start call 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
});
Start a chat
To make a chat you need to specify some params.
Start chat params
kaleyraVideo.startChat('usr_yyy');// the user_id of the user you want to create a chat with
Set user details
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"},
]);
Remove all user details
This method will allow you to remove all the user info from the local app DB.
kaleyraVideo.removeUsersDetails();
Set user details format
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.
});
Remove all the cached info in preferences and DBs
kaleyraVideo.clearUserCache();
Android change display mode
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
Verify user
To verify a user for the current call.
kaleyraVideo.verifyCurrentCall(true);
iOS Podfile Setup
Please pay attention to the Podfile setup for your iOS application. Is required to add this to your Podfile:
use_frameworks! :linkage => :static
iOS Broadcast Screen sharing
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 'BroadcastExtension' do
use_frameworks! :linkage => :dynamic
pod 'BandyerBroadcastExtension'
end
Furthermore, to allow a correct configuration of the SDK it is necessary to create a file called "KaleyraVideoConfig.plist" and add it to the same target 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>
iOS Notifications
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.
Android Notifications
Supports only on_call_incoming and on_message_sent notification types.
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"
}
TSDoc
The API documentation is available on the github pages link: https://kaleyravideo.github.io/VideoReactNativeModule/
11 months ago