Примеры для React Native

Примеры являются проектами кроссплатформенных приложений React Native. Каждый пример состоит из 3 частей: Android части, iOS части и общего кода JS.

• Android часть содержит проект для IDE Android Studio;

• iOS часть содержит проект для IDE Xcode;

• JS часть содержит UI, основной код логики работы, и код использования SDK.

Всё что нужно для начала работы – это импортировать TrueConf Mobile SDK в классе App в JS:

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

Инициализация SDK выполняется в классе App вызовом функции start. Следом за инициализацией в методе initEventsListeners настраивается обработка необходимых событий с помощью функции addEventListener:

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

Платформозависимые проекты нуждаются в определённой настройке:

• в проекте для Android Studio необходимо прописать адрес репозитория, а также добавить вызовы методов registerApp и setFallbackActivity (подробнее описано здесь);

• в проекте для Xcode необходимо добавить разрешения на использование камеры и микрофона (подробнее описано здесь);

Пример 1. Демонстрация основных возможностей SDK

Одностраничное приложение, в котором реализованы основные функции TrueConf Mobile SDK:

1. Инициализация и подключение к серверу.

2. Отслеживание статусов клиента.

3. Подключение к серверу, логин пользователем и логаут по нажатию соотвествующих кнопок.

4. Звонок другому пользователю по его TrueConf ID.

5. Возможность принимать входящие видеозвонки и приглашения в групповую конференцию.

Класс App содержит основной функционал работы TrueConf Mobile SDK:

1. Обрабатываются события:

• onServerStatus - отслеживание статуса подключения к серверу;

• onLogin - отслеживание статуса логина;

• onLogout - отслеживание статуса логаута;

• onInvite - обработка входящих звонков и приглашений в групповую конференцию.

2. По клику на соответствующие кнопки вызываются методы:

• start - инициализация SDK;

• loginAs - авторизация с TrueConf ID и паролем;

• logout - деавторизация пользователя;

• callTo - звонок пользователю, TrueConf ID которого введен в соответствующее поле ввода.

Пример 2. Демонстрация работы с trueconf-ссылками

Одностраничное приложение, в котором реализованы следующие функции TrueConf Mobile SDK:

1. Инициализация SDK без указания сервера.

2. Обработка введенной trueconf-ссылки по нажатию на кнопку.

Класс App содержит основной функционал работы TrueConf Mobile SDK:

1. Обрабатываются события:

• onServerStatus - отслеживание статуса подключения к серверу;

• onLogin - отслеживание статуса логина;

• onLogout - отслеживание статуса логаута;

• onInvite - обработка входящих звонков и приглашений в групповую конференцию.

2. По клику на соответствующие кнопки вызываются методы:

• start - инициализация SDK;

• parseProtocolLink - выполнение последовательности команд trueconf-ссылки.

Пример 3. Работа со статусами пользователей

В примере представлен работающий образец кода, позволяющий отслеживать статусы пользователей на сервере, с которыми можно установить связь, а также добавлять для отслеживания статусы любых пользователей и следить за их доступностью. Кроме самого статуса пользователя используется стандартный функционал TrueConf Mobile SDK: подключение к серверу, логин, автоматический прием звонка.

Вся работа примера построена на основании единственного блока обработчика события onUserStatusUpdate, который выполняется, когда сервер присылает статус какого-либо пользователя. Для добавления любого пользователя в отслеживаемые используется метод getUserStatus. При этом реализованный код позволяет отслеживать и отображать в таблице изменения статуса конкретного пользователя, обрабатывать добавление новых пользователей и добавление любого пользователя для отслеживания.

Для хранения списка пользователей со статусами используется переменная users с параметрами userID и state. За отрисовку таблицы со списком пользователей и их статусами отвечает класс UsersList.

Пример является одностраничным приложением, в котором реализованы основные функции TrueConf Mobile SDK:

1. Отслеживание статусов пользователей из адресной книги и списка отслеживания.

2. Добавление пользователей в список отслеживания по их TrueConf ID.

3. Подключение к серверу и логин пользователем.

4. Отображение списка пользователей с их статусами из адресной книги и списка отслеживания.

5. Возможность принимать входящие видеозвонки и приглашения в групповую конференцию.

Класс App содержит основной функционал работы TrueConf Mobile SDK:

1. Обрабатываются события:

• onServerStatus - отслеживание статуса подключения к серверу;

• onLogin - отслеживание статуса логина;

• onLogout - отслеживание статуса логаута;

• onInvite - обработка входящих звонков и приглашений в групповую конференцию;

• onUserStatusUpdate - отслеживание изменения статусов пользователей из адресной книги или списка отслеживания.

2. По клику на соответствующие кнопки вызываются методы:

• start - инициализация SDK;

• loginAs - авторизация с TrueConf ID и паролем;

• logout - деавторизация пользователя;

• getUserStatus - получение статуса пользователя и добавление его в список отслеживания в текущей сессии.

Пример 4. Работа с групповыми конференциями

Одной из важнейших возможностей TrueConf Mobile SDK является возможность создания и участия в видеоконференциях с несколькими пользователями одновременно. На данный момент в SDK возможно подключение только к уже существующим конференциям на сервере.

Подключение возможно 4 способами:

1. Получение приглашения посредством входящего вызова, т.е. так же, как и обычного вызова onInvite c подтверждением acceptCall.

2. По ID конференции с использованием метода joinConf.

3. По trueconf-ссылке, включающей ID конференции с использованием метода parseProtocolLink.

4. Методом scheduleLoginAs, передавая в него ID конференции параметром callToUser и указывая isPublic=true. Этот метод аналогичен методу parseProtocolLink, но не требует знания формата командной строки, предоставляя фиксированный набор параметров.

Класс App содержит основной функционал работы TrueConf Mobile SDK:

1. Обрабатываются события:

• onServerStatus - отслеживание статуса подключения к серверу;

• onLogin - отслеживание статуса логина;

• onLogout - отслеживание статуса логаута;

• onInvite - обработка входящих звонков и приглашений в групповую конференцию;

• onConferenceStart - обработка момента подключения к конференции;

• onConferenceEnd - обработка момента выхода из конференции.

2. По клику на соответствующие кнопки вызываются методы:

• start - инициализация SDK;

• loginAs - авторизация с TrueConf ID и паролем;

• logout - деавторизация пользователя;

• joinConf - присоединение к конференции по её ID.

Пример 5. Кастомизация интерфейса

Пример показывает, каким образом можно заменить изображения всех кнопок, которые показываются при звонке, добавить свои собственные дополнительные кнопки и открыть своё окно поверх окна конференции.

Общая часть дублирует функционал Примера 1:

• подключение к серверу;

• авторизация и деавторизация;

• звонок пользователю по TrueConf ID;

• обработка основных событий и отслеживание статуса клиента.

В примере изменяются картинки стандартных кнопок в панели управления конференцией, а также кнопок на селфвью. Кастомизация производится с помощью добавления в ресурсы картинок определённых названий. Списки названий для иконок представлены в описании Примера 5 для Android, а также для iOS.

Дополнительно реализовано добавление кастомной кнопки и отображение отдельного окна поверх окна конференции. В функцию addExtraButton передаётся название кастомной кнопки, а затем в обработчике события onExtraButtonPressed вызывается функция showAlertPage, которая отображает новое окно поверх окна конференции - Activity для Android, UIViewController для iOS. В данном случае эти окна создаются и настраиваются непосредственно в нативных модулях SDK: для Android это класс DialogActivity, для iOS - DialogViewController. Эти классы можно редактировать.

Пример 6. Чат

Одностраничное приложение, в котором реализованы основные функции TrueConf Mobile SDK:

1. Инициализация и подключение к серверу.

2. Отслеживание статусов клиента.

3. Подключение к серверу, логин пользователем и логаут по нажатию соотвествующих кнопок.

4. Отправка сообщения другому пользователю по его TrueConf ID.

5. Возможность принимать входящие видеозвонки и приглашения в групповую конференцию.

Класс App содержит основной функционал работы TrueConf Mobile SDK:

1. Обрабатываются события:

• onServerStatus - отслеживание статуса подключения к серверу;

• onLogin - отслеживание статуса логина;

• onLogout - отслеживание статуса логаута;

• onInvite - обработка входящих звонков и приглашений в групповую конференцию;

• onChatMessageReceived - обработка входящих сообщений в чате. При приходе нового текстового сообщения появляется Alert с текстом сообщения и именем отправителя.

2. По клику на соответствующие кнопки вызываются методы:

• start - инициализация SDK;

• loginAs - авторизация с TrueConf ID и паролем;

• logout - деавторизация пользователя;

• sendChatMessage - отправка сообщения в чат пользователю, TrueConf ID которого введен в соответствующее поле ввода.

Пример 7. Кастомизация вывода видеоокон в конференции

В примере реализована возможность размещения собственного изображения и изображения участников конференции в отдельные области экрана. Также показана самостоятельная реализация кнопок управления конференцией на главном окне.

Настройка кастомных областей для отображения собственного изображения и изображения участников конференции полностью выполняется в нативных модулях SDK в методе initCustomViews, который достаточно вызвать в любой момент после вызова start и перед присоединением в конференцию. При необходимости этот метод можно отредактировать. Про настройку кастомных областей подробно описано в Примере 7 для Android и соответственно в Примере 7 для iOS.

Управление конференцией реализовано с помощью набора кастомных кнопок на главном экране, которые выполняют соответствующие функции SDK:

• Mic - кнопка, которая меняет состояние микрофона методом muteMicrophone. Проверка текущего состояния микрофона выполняется с помощью метода isMicrophoneMuted;

• Cam - кнопка, которая меняет состояние камеры методом muteCamera. Проверка текущего состояния камеры выполняется с помощью метода isCameraMuted;

• Hangup - кнопка, которая выполняет выход из конференции с помощью метода hangup.

Также класс App содержит основной функционал работы TrueConf Mobile SDK:

1. Обрабатываются события:

• onServerStatus - отслеживание статуса подключения к серверу;

• onLogin - отслеживание статуса логина;

• onLogout - отслеживание статуса логаута;

• onInvite - обработка входящих звонков и приглашений в групповую конференцию.

2. По клику на соответствующие кнопки вызываются методы:

• start - инициализация SDK;

• loginAs - авторизация с TrueConf ID и паролем;

• logout - деавторизация пользователя;

• joinConf - присоединение к конференции по её ID.