TrueConf

# Examples for React Native

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

  • The Android section contains a project for Android Studio IDE;

  • The iOS section contains a project for Xcode IDE;

  • The JS part includes the UI, core logic code, and 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';

Initialization of the SDK is performed in the App class by calling the start function. Following initialization, the handling of necessary events is configured in the initEventsListeners method using 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 calls to the registerApp and setFallbackActivity methods (more details are provided here);

  • in the Xcode project, you need to add permissions for using the camera and microphone (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 server connection (start).

  2. Tracking client statuses.

  3. Connect to the server, log in as a user and log out by pressing the corresponding buttons.

  4. Call a user by their TrueConf ID (callTo).

  5. Ability to receive incoming video calls.

The App class contains the main functionality of TrueConf Mobile SDK:

  1. Processing events:

    • LOGOFF (0) — the user is not connected to the server

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

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

  • By clicking on the corresponding buttons, the methods are invoked:

    • start - SDK initialization;

    • loginAs - authentication with TrueConf ID and password;

    • login – user ID (string);

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

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

  1. Initialization and server connection (start).

  2. Processing the entered trueconf link upon button click.

The App class contains the main functionality of TrueConf Mobile SDK:

  1. Processing events:

    • LOGOFF (0) — the user is not connected to the server

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

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

  • By clicking on the corresponding buttons, the methods are invoked:

    • start - SDK initialization;

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

# Example 4. Working with User Statuses

The example provides a working code sample that allows you to monitor the statuses of users on the server with whom you can establish a connection, as well as add any users to track their statuses and monitor their availability. In addition to the user status itself, the standard functionality of TrueConf Mobile SDK is used: server connection, login, and automatic call acceptance.

The entire operation of the example is based on a single event handler block, onUserStatusUpdate, which executes when the server sends the status of a user. To add any user to the tracking list, the getUserStatus method is used. The implemented code allows monitoring and displaying changes in the status of a specific user in a table, handling the addition of new users, and adding any user for tracking.

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

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

  1. Checking another user's status and receiving change notifications

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

  3. Joining a group conference.

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

  5. Ability to receive incoming video calls.

The App class contains the main functionality of TrueConf Mobile SDK:

  1. Processing events:

    • LOGOFF (0) — the user is not connected to the server

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

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

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

  • By clicking on the corresponding buttons, the methods are invoked:

    • start - SDK initialization;

    • loginAs - authentication with TrueConf ID and password;

    • login – user ID (string);

    • getUserStatus - retrieves the user status and adds it to the watch list in the current session.

# Example 3. Working with group conferences

One of the key features of TrueConf Mobile SDK is the ability to participate in video conferences with multiple users simultaneously. Currently, it only allows joining existing conferences.

Joining a group conference.

  1. Receiving an invitation via an incoming call, i.e., in the same way as a regular onInvite call with acceptCall confirmation.

  2. By conference ID using the method joinConf.

  3. By a trueconf link that includes the conference ID using the method parseProtocolLink.

  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, offering a fixed set of parameters.

The App class contains the main functionality of TrueConf Mobile SDK:

  1. Processing events:

    • LOGOFF (0) — the user is not connected to the server

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

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

    • Checking conference presence.

    • Checking conference presence.

  • By clicking on the corresponding buttons, the methods are invoked:

    • start - SDK initialization;

    • loginAs - authentication with TrueConf ID and password;

    • login – user ID (string);

    • Connecting to the selected server

# Example 5. Interface Customization

The example demonstrates how to replace the images of all buttons displayed during a call, add your own custom buttons, and open your own window on top of the conference window.

The general section duplicates the functionality of Example 1:

  • Connecting a participant.

  • Checking authorization status.

  • Call a user by their TrueConf ID (callTo).

  • Handling of key events and monitoring of client status.

In this example, the images of the 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 the addition of a custom button and the display of a separate window on top of the conference window. The addExtraButton function receives the name of the custom button, and then the onExtraButtonPressed event handler calls the showAlertPage function, which displays a new window on top of the conference window - Activity for Android, UIViewController for iOS. In this case, these windows are created and configured directly in the native SDK modules: for Android, this is the DialogActivity class, and for iOS, 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 server connection (start).

  2. Tracking client statuses.

  3. Connect to the server, log in as a user and log out by pressing the corresponding buttons.

  4. Call a user by their TrueConf ID (callTo).

  5. Ability to receive incoming video calls.

The App class contains the main functionality of TrueConf Mobile SDK:

  1. Processing events:

    • LOGOFF (0) — the user is not connected to the server

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

    • onInvite - handles incoming calls and invitations to join 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.

  • By clicking on the corresponding buttons, the methods are invoked:

    • start - SDK initialization;

    • loginAs - authentication with TrueConf ID and password;

    • login – user ID (string);

    • 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 ability to place your own image and the images of conference participants in separate screen areas. It also shows a custom implementation of conference control buttons in the main window.

Configuring custom areas to display your own image and the images of conference participants is fully handled in the native SDK modules within the initCustomViews method. This method can be called at any time after start and before joining the conference. If necessary, this method can be modified. Detailed information on setting up custom areas can be found in Example 7 for Android and in Example 7 for iOS.

Conference management is implemented using a set of custom buttons on the main screen, which perform the corresponding SDK functions:

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

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

  • Hangup - a button that enables you to leave the conference using the hangup method.

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

  1. Processing events:

    • LOGOFF (0) — the user is not connected to the server

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

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

  • By clicking on the corresponding buttons, the methods are invoked:

    • start - SDK initialization;

    • loginAs - authentication with TrueConf ID and password;

    • login – user ID (string);

    • Connecting to the selected server

← Cordova Functions →