Examples for React Native

TrueConfAbout 12 min

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 contains a project for the Android Studio IDE;

  • The iOS section includes 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';

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 SDK features

A single-page application implementing the main features of TrueConf Mobile SDK:

  1. Initialization and connection to the server.

  2. Tracking client statuses.

  3. Connect to the server, log in as a user, and log out by pressing 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 main functionality of TrueConf Mobile SDK:

  1. Processing events:

    • onServerStatus - monitoring the server connection status;

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

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

  2. Clicking the respective buttons triggers the methods:

    • start - SDK initialization;

    • loginAs - authentication using TrueConf ID and password;

    • logout - user deauthorization;

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

Example 2. Demonstrating the use of trueconf links

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

  1. Initializing the SDK without specifying a server.

  2. Processing the entered trueconf link when the button is clicked.

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

  1. Processing events:

    • onServerStatus - monitoring the server connection status;

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

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

  2. Clicking the respective buttons triggers the methods:

    • start - SDK initialization;

    • parseProtocolLink - executes a sequence of commands for a TrueConf link.

Example 3: Working with user statuses

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

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

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 logging in as a user.

  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 main functionality of TrueConf Mobile SDK:

  1. Processing events:

    • onServerStatus - monitoring the server connection status;

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

    • onInvite - handles incoming calls and invitations to group conferences;

    • onUserStatusUpdate - tracking changes in the status of users from the address book or watchlist.

  2. Clicking the respective buttons triggers the methods:

    • start - SDK initialization;

    • loginAs - authentication using TrueConf ID and password;

    • logout - user deauthorization;

    • getUserStatus - retrieve the user's status and add it to the watch list in 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 allows connecting only to existing conferences on the server.

There are four ways to connect:

  1. Receiving an invitation via an incoming call, 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 method parseProtocolLink.

  4. Use the scheduleLoginAs method, passing the conference ID as the callToUser parameter and specifying 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:

    • onServerStatus - monitoring the server connection status;

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

    • onInvite - handles incoming calls and invitations to group conferences;

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

    • onConferenceEnd - handles the moment of exiting the conference.

  2. Clicking the respective buttons triggers the methods:

    • start - SDK initialization;

    • loginAs - authentication using TrueConf ID and password;

    • logout - user deauthorization;

    • joinConf - joining a conference by its ID.

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 window on top of the conference window.

The general part duplicates the functionality of Example 1:

  • connection to the server;

  • authorization and deauthorization;

  • call to user via TrueConf ID;

  • Handling of key events and client status monitoring.

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 implementing the main features of TrueConf Mobile SDK:

  1. Initialization and connection to the server.

  2. Tracking client statuses.

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

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

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

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

  1. Processing events:

    • onServerStatus - monitoring the server connection status;

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

    • onInvite - handles incoming calls and invitations to group conferences;

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

  2. Clicking the respective buttons triggers the methods:

    • start - SDK initialization;

    • loginAs - authentication using 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 main functionality of TrueConf Mobile SDK:

  1. Processing events:

    • onServerStatus - monitoring the server connection status;

    • onLogin - tracking login status;

    • onLogout - tracking logout status;

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

  2. Clicking the respective buttons triggers the methods:

    • start - SDK initialization;

    • loginAs - authentication using TrueConf ID and password;

    • logout - user deauthorization;

    • joinConf - joining a conference by its ID.