TrueConf

# Examples for React Native

The examples are cross-platform React Native application projects. Each example consists of three parts: the Android part, the iOS part, and the shared JS code.

  • The Android section includes a project for the Android Studio IDE;

  • The iOS section includes a project for the Xcode IDE.

  • The JS part includes the UI, the main logic code, and the SDK usage code.

All you need to get started is to import TrueConf Mobile SDK in the App class in JS:

import TrueConfSDK from 'react-native-trueconf-sdk';

The SDK is initialized in the App class by calling the start function. After initialization, the initEventsListeners method is used to set up handling of necessary events with the addEventListener function:

initEventsListeners() {
  TrueConfSDK.addEventListener('onServerStatus', this.onServerStatus);
  TrueConfSDK.addEventListener('onInvite', this.onInvite);
  TrueConfSDK.addEventListener('onLogin', this.onLogin);
  TrueConfSDK.addEventListener('onLogout', this.onLogout);
}

Platform-dependent projects require specific configuration:

  • In the Android Studio project, you need to specify the repository address and add method calls for registerApp and setFallbackActivity (more details can be found here);

  • In the Xcode project, you need to add permissions for camera and microphone usage (more details can be found here);

# Example 1. Demonstration of the main capabilities of the SDK

A single-page application where all the main features of TrueConf Mobile SDK are implemented:

  1. Initialization and connection to the server.

  2. Client status monitoring.

  3. Connecting to the server, logging in as a user, and logging out are performed by clicking the corresponding buttons.

  4. Call another user by their TrueConf ID.

  5. Ability to receive incoming video calls and invitations to group conferences.

The App class contains the core functionality of the TrueConf Mobile SDK.

  1. Processing events:

    • onServerStatus - monitoring the connection status to the server;

    • onLogin - tracking login status;

    • onLogout - monitoring of logout status;

    • onInvite - handles incoming calls and invitations to a group conference.

  • Clicking the corresponding buttons triggers the methods:

    • start - SDK initialization;

    • loginAs - authentication with TrueConf ID and password;

    • logout - user deauthorization;

    • callTo - call to a user whose TrueConf ID is entered in the corresponding input field.

A single-page application with the following features implemented in TrueConf Mobile SDK:

  1. Initializing the SDK without specifying the server.

  2. Processing the entered trueconf link upon clicking the button.

The App class contains the core functionality of the TrueConf Mobile SDK.

  1. Processing events:

    • onServerStatus - monitoring the connection status to the server;

    • onLogin - tracking login status;

    • onLogout - monitoring of logout status;

    • onInvite - handles incoming calls and invitations to a group conference.

  • Clicking the corresponding buttons triggers the methods:

    • start - SDK initialization;

    • parseProtocolLink - execution of a sequence of commands in a TrueConf link.

# Example 3. Working with user statuses

The example provides a working code sample that allows you to track user statuses on the server, enabling connections with those users. It also allows you to monitor the statuses of any users and track their availability. In addition to the user status, it uses the standard functionality of TrueConf Mobile SDK: server connection, login, and automatic call acceptance.

The entire example is based on a single event handler block onUserStatusUpdate, which is triggered when the server sends a user's status update. The getUserStatus method is used to add any user to the watch list. The implemented code allows you to track and display changes in a specific user's status in the table, handle the addition of new users, and add any user for tracking.

The users variable, which includes the parameters userID and state, is used to store the list of users along with their statuses. The UsersList class is responsible for rendering the table of users and their statuses.

The example is a single-page application that implements the main features of TrueConf Mobile SDK:

  1. Tracking the status of users from the address book and watchlist.

  2. Adding users to the watchlist by their TrueConf ID.

  3. Connecting to the server and user login.

  4. Displaying a list of users with their statuses from the address book and watch list.

  5. Ability to receive incoming video calls and invitations to group conferences.

The App class contains the core functionality of the TrueConf Mobile SDK.

  1. Processing events:

    • onServerStatus - monitoring the connection status to the server;

    • onLogin - tracking login status;

    • onLogout - monitoring of logout status;

    • onInvite - processing incoming calls and invitations to a group conference;

    • onUserStatusUpdate - tracking changes in user statuses from the address book or watch list.

  • Clicking the corresponding buttons triggers the methods:

    • start - SDK initialization;

    • loginAs - authentication with TrueConf ID and password;

    • logout - user deauthorization;

    • getUserStatus - retrieves the user's status and adds it to the watchlist for the current session.

# Example 4. Working with group conferences

One of the key features of TrueConf Mobile SDK is the ability to create and participate in video conferences with multiple users simultaneously. Currently, the SDK only allows connection to existing conferences on the server.

Connection is possible in 4 ways:

  1. Receiving an invitation via an incoming call is similar to a regular onInvite call with acceptCall confirmation.

  2. By conference ID using the joinConf method.

  3. Via a TrueConf link that includes the conference ID using the parseProtocolLink method.

  4. Use the method scheduleLoginAs, passing the conference ID as the callToUser parameter and setting isPublic=true. This method is similar to the parseProtocolLink method but does not require knowledge of the command line format, providing a fixed set of parameters.

The App class contains the core functionality of the TrueConf Mobile SDK.

  1. Processing events:

    • onServerStatus - monitoring the connection status to the server;

    • onLogin - tracking login status;

    • onLogout - monitoring of logout status;

    • onInvite - processing incoming calls and invitations to a group conference;

    • onConferenceStart - handles the moment of connecting to a conference;

    • onConferenceEnd - handles the moment of exiting a conference.

  • Clicking the corresponding buttons triggers the methods:

    • start - SDK initialization;

    • loginAs - authentication with TrueConf ID and password;

    • logout - user deauthorization;

    • joinConf - joining a conference by its ID.

# Example 5. Interface Customization

The example demonstrates how you can replace the images of all buttons displayed during a call, add your own additional buttons, and open your own window over the conference window.

The general section duplicates the functionality of Example 1:

  • connecting to the server;

  • authorization and deauthorization;

  • Call the user by TrueConf ID.

  • Processing of main events and client status tracking.

In this example, the images of standard buttons in the conference control panel, as well as the buttons on the self-view, are modified. Customization is done by adding images with specific names to the resources. Lists of icon names are provided in the description of Example 5 for Android and for iOS.

Additionally, the implementation includes adding a custom button and displaying a separate window on top of the conference window. The addExtraButton function receives the name of the custom button. Then, within the onExtraButtonPressed event handler, the showAlertPage function is called to display a new window over the conference window—Activity for Android, and UIViewController for iOS. In this case, these windows are created and configured directly in the native SDK modules: for Android, it's the DialogActivity class, and for iOS, it's the DialogViewController. These classes can be edited.

# Example 6. Chat

A single-page application where all the main features of TrueConf Mobile SDK are implemented:

  1. Initialization and connection to the server.

  2. Client status monitoring.

  3. Connecting to the server, logging in as a user, and logging out are performed by clicking the corresponding buttons.

  4. Sending a message to another user by their TrueConf ID.

  5. Ability to receive incoming video calls and invitations to group conferences.

The App class contains the core functionality of the TrueConf Mobile SDK.

  1. Processing events:

    • onServerStatus - monitoring the connection status to the server;

    • onLogin - tracking login status;

    • onLogout - monitoring of logout status;

    • onInvite - processing incoming calls and invitations to a group conference;

    • onChatMessageReceived - handles incoming chat messages. When a new text message arrives, an alert appears displaying the message text and the sender's name.

  • Clicking the corresponding buttons triggers the methods:

    • start - SDK initialization;

    • loginAs - authentication with TrueConf ID and password;

    • logout - user deauthorization;

    • sendChatMessage - sends a chat message to the user whose TrueConf ID is entered in the corresponding input field.

# Example 7. Customizing the video layout in a conference

The example demonstrates the capability to place your own image and the images of conference participants in separate areas of the screen. It also shows how to implement conference control buttons in the main window.

Configuration of custom areas to display your own image and the images of conference participants is fully implemented in the native SDK modules within the initCustomViews method. This method can be called at any time after the start call and before joining a conference. If necessary, this method can be edited. Detailed instructions for setting up custom areas are provided in Example 7 for Android and correspondingly in Example 7 for iOS.

Conference management is implemented through a set of custom buttons on the main screen, which execute the corresponding SDK functions.

  • Mic - the button that changes the microphone state using the muteMicrophone method. The current microphone status is checked using the isMicrophoneMuted method.

  • Cam - a button that toggles the camera state using the muteCamera method. The current camera status is checked using the isCameraMuted method.

  • Hangup is the button that allows you to leave a conference using the hangup method.

The App class also includes the core functionality of TrueConf Mobile SDK:

  1. Processing events:

    • onServerStatus - monitoring the connection status to the server;

    • onLogin - tracking login status;

    • onLogout - monitoring of logout status;

    • onInvite - handles incoming calls and invitations to a group conference.

  • Clicking the corresponding buttons triggers the methods:

    • start - SDK initialization;

    • loginAs - authentication with TrueConf ID and password;

    • logout - user deauthorization;

    • joinConf - joining a conference by its ID.

← Cordova Functions →