Find more info about Voice/Video Calls and WebRTC features in Infobip docs.

• Intro
• Quick start guide Android
• Quick start guide iOS
• Configuration setup
• Enabling and disabling calls
• Important iOS notes

Intro

WebRTCUI is an easy to use, plug-and-play component, that allows you to connect to Infobip RTC by just invoking one single method. This assumes, though, that the initial setups of Mobile Push Notifications and the Infobip RTC exists in both, your account and your mobile app profile.

WebRTCUI takes care of everything: the registration of your device (in order to receive and trigger calls), the handle of the calls themselves, and offers you a powerful user interface with all the features your customer may need: ability to capture video through both, front and back camera, option to mute and use the speaker, ability to capture and share the screen of your mobile device, option to minimise the call UI in a picture-in-picture mode, and more.

Quick start guide Android

1. Make sure you have setup Mobile Messaging SDK and that you are able to successfully receive push registration ids (the console debug logs will give you a hint about it).

2. In your application android/build.gradle add following boolean flag:

   buildscript {
      ext {
         withWebRTCUI = true
      }
   }
   

See Example/android/build.gradle.

Quick start guide iOS

1. Make sure you have setup the core of Mobile Messaging SDK and that you are able to successfully receive push registration ids (the console debug logs will give you a hint about it).

2. Enable, in your Xcode target, under "Signing & Capabilities", the background modes: "Voice over IP", "Background fetch" and "Remote notifications".

3. Then, you will need to add few lines in your Podfile. The first is to declare, within the definition of your Pod Target, a variable called WebRTCUIEnabled, needed for downloading the required dependencies when triggering pod install (or pod update):

   $WebRTCUIEnabled = true
   

The second change, as important, is to set a preprocessor macro/flag for all your pod targets, as seen below:

if (target.name&.eql?('infobip-mobile-messaging-react-native-plugin'))
      target.build_configurations.each do |config|
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] = '$(inherited) COCOAPODS=1 WEBRTCUI_ENABLED=1'
        config.build_settings['OTHER_SWIFT_FLAGS'] = '$(inherited) -D WEBRTCUI_ENABLED'
      end
end

We offer, within the app in Example/ios, a podfile example with all the needed changes in the proper place, as guidance.

Configuration Setup

In a similar manner as MobileMessaging requires from you to set the applicationCode in the configuration, WebRTCUI requires a WebRTC configurationId. You need to define it as described below:

1. Create your WebRTC configuration in Infobip's Portal, inside the Voice and WebRTC section. Alternatively, you can deal with the creation and maintenance of your configuration using the dedicated Rest API.

2. • iOS only:
     • Enable "iOS notifications" in your configuration, and upload the APNS certificate (p12) file belonging to your iOS application. You are free to reuse the same p12 you used in the step 1 of the Quick start guide. Very important: keep in mind the nature of the environment you need: production p12 is to be used for the Apple Store (and TestFlight), and a debug/sandboxing one is meant only for your local development. Also, remember that the certificate will need to be updated before its expiration.
     • The APNS password here is entirely optional, but recommended as it increases the security (i.e: if your Infobip credentials are compromised, the certificate's won't). Adding a configuration name is also recommended, as it can help avoiding mistakes when you create multiple applications and environments.
     • If you want to create the configuration using the REST API, the apnsCertificateFileContent value is the string base64 value of your p12 certificate. There are many ways to convert from p12 to base64 formats. An easy one is with the following command, adapted to your file name:

cat mySandboxCert.p12 | base64 > myCertTextfile

3. • Android only:
     • fcmServerKey you can obtain your Firebase Cloud Messaging server key by this guide

4. Copy the configurationId you received in the steps above into your code, as seen here:

   configuration = {
       applicationCode: 'your mobile push profile application code',
       webRTCUI: {
           configurationId: 'your webrtc push configuration id'
       },
       ios: {
           notificationTypes: ['alert', 'badge', 'sound'],
           logging: true,
       },
       loggingEnabled: true
   };
   

Enabling and disabling calls

Once you are done with the quick start guide above, and have copied the configurationId, you are ready to enable calls.

This is easily achieved by calling webRTCUI.enableChatCalls() after MobileMessaging is initialised, if you want to combine Infobip's LiveChat will calls, or with webRTCUI.enableCalls(identity) if your use case provides an identity out of Infobip's LiveChat. You can use mobileMessaging.init() success callback as step for enabling calls as seen below:

This can be achieved in two ways, depending on your use case:

• For LiveChat/InAppChat related calls, use the webRTCUI.enableChatCalls() method.
• Otherwise, use the webRTCUI.enableCalls(identity) method. For this case, you'll have to control the identity of the calls on your own (either a UUID provided by you, or the push registration ID.

import {mobileMessaging, webRTCUI} from 'infobip-mobile-messaging-react-native-plugin';
webRTCUI.enableChatCalls( // .enableCalls('your identity')
    () => console.log('WebRTCUI enabled calls'),
    error => console.log('WebRTCUI could not enable calls, error: ' + error),
);

And in a similar manner, you can unsubscribe from incoming calls with the webRTCUI.disableCalls() method:

webRTCUI.disableCalls(
    () => console.log('WebRTCUI disabled calls'),
    error => console.log('WebRTCUI could not disable calls, error: ' + error),
);

And if your user logs in again, you can call webRTCUI.enableCalls whenever you need. But keep in mind, due to the asynchronous nature of WebRTC events, there could be up to half a minute latency until the methods above take effect.

Important iOS notes

While WebRTCUI is plug-and-play, there are few things you should handle in your app before it is submitted to the Apple Store, in order to avoid problems:

1. Do not forget to define the permissions in your app plist, and with localised descriptions if possible, for Privacy - Microphone and Privacy - Camera, as they are needed for audio and video calls.

2. WebRTC is not allowed in the People's Republic of China. Offering it risks an Apple Store rejection. If you are releasing World wide or in that territory, you need to add, in your app release notes in AppStoreConnect, a text similar to: "In this version and onwards, we do not use CallKit features for users in China. We detect the user's region using NSLocale". Our WebRTCUI already checks the region and disable its functionality for you.

3. Currently, WebRTCUI is oriented to calls with Infobip Conversation's agents; P2P calls and channel specific call types are not yet supported (though you can still manually integrate them with Infobip RTC SDK).

4. On iOS, the ringing sounds may last only few seconds, then it becomes quiet or decreases its volume, even if the user did not hang up. This is because of an iPhone feature called Attention Aware, under Face ID & Passcode settings, in which the phone detects a user's face and silent the ringing. User needs to manually disable the feature in iOS Settings so this behaviour stops.

5. If even after all the quick start guide and following the examples provided you are not receiving a call, there is a wide range of reasons for the ringing not happening. Please consider the following:

• Your APNS certificate may not be the same in your Mobile Push App profile and the WebRTC App in Customer profile Portal, or your certificates are expired, or do not match the enviroment you are using (sandboxing vs production). You will need to recheck your setup in Apple Developer/App Profiles, Xcode and Costumer Portal.
• The device may have "Do not disturb" mode enabled. Calls will not be received in this scenario as the user volutarily excluded them.
• You app did not handled push registration properly, or someone in your team with management access in Infobip's Customer Portal changed something it should have not changed. As registrations rely on a valid installation data, this problems are usually (only) fixable by uninstalling/reinstalling the app.
• Something else is wrong. Usually, an error explaining the reason in the console should be enough to find the root cause. The logs, and comparing your own app with the Chat Example project, should be enough. It not, please contact support for further help.

Android notes

Requirements

• Android Studio
• Supported API Levels: 21 (Android 5.0 - Lollipop) - 33 (Android 13.0 - Tiramisu)
• AndroidX
• WebRTCUI library source and target compatibility is set to Java 8.

Permissions

WebRTCUI library declares following dangerous permissions:

• RECORD_AUDIO
• CAMERA
• POST_NOTIFICATIONS

Runtime check and request for dangerous permissions is handled by library UI components.

There are also another normal permissions declared in library:

• WAKE_LOCK
• FOREGROUND_SERVICE
• VIBRATE
• USE_FULL_SCREEN_INTENT
• FOREGROUND_SERVICE