WebRTC Calls and UI

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:

```javascript
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 applicationId. You will find both in the Customer Portal, as seen in the following pictures:

Each respective value needs to be included within the configuration, in your code, as seen below:

```javascript
configuration = {
    applicationCode: < your push profile application code >,
    webRTCUI: {
        applicationId: < your webrtc application id >
    },
    ios: {
    notificationTypes: ['alert', 'badge', 'sound'],
    logging: true,
    },
    loggingEnabled: true };
```

Enabling and disabling calls

Once you are done with the quick start guide above, defined the configuration, and confirmed that you are getting push registration Ids, you are now ready to enable calls.

This is easily achieved, by calling webRTCUI.enableCalls after MobileMessaging is initialised. You can use mobileMessaging.init success callback:

```javascript
import {mobileMessaging, webRTCUI} from 'infobip-mobile-messaging-react-native-plugin';
webRTCUI.enableCalls(
    () => 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 method webRTCUI.disableCalls:

```javascript
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 simply 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