UXKit Voxeet React Native

react-native-voxeet-conferencekit

Add the react-native-voxeet-firebase library to enable a Firebase on Android (for push notifications).

Getting started

Use the following commands to install and configure the UXKit on React Native:

$ npm install @voxeet/react-native-voxeet-conferencekit --save

$ react-native link @voxeet/react-native-voxeet-conferencekit

Note: For Android, please also update the Mandatory Modification.

Manual installation

Installation on iOS

1. Open your Xcode project from YOURPROJECT/ios/YOURPROJECT.xcworkspace (or .xcodeproj if there is no .xcworkspace).

2. Go to your target settings (path: 'Capabilities' ▸ 'Background Modes').

  • Enable background mode.
  • Turn on 'Audio, AirPlay and Picture in Picture'.
  • Turn on 'Voice over IP'.

If you want to support CallKit (receive incoming calls when application is killed) with VoIP push notifications, enable 'Push Notifications'. To do that, upload your VoIP push certificate to the Voxeet developer portal.

3. Add two new keys in the Info.plist to set proper privacy permissions:

  • privacy: Microphone Usage Description
  • privacy: Camera Usage Description

4. Open a Finder and go to YOURPROJECT/nodemodules/@voxeet/react-native-voxeet-conferencekit/ios/Carthage/Build/iOS.

5. Drag and drop VoxeetSDK.framework, WebRTC.framework, VoxeetConferenceKit.framework, and Kingfisher.framework into the Frameworks folder from Xcode project (deselect Copy items if needed and select your targets).

6. Go to your target settings.

7. Add a New Run Script Phase to the 'Build Phases'.

/usr/local/bin/carthage copy-frameworks

Input files:

  • $(PROJECT_DIR)/../node_modules/@voxeet/react-native-voxeet-conferencekit/ios/Carthage/Build/iOS/Kingfisher.framework
  • $(PROJECT_DIR)/../node_modules/@voxeet/react-native-voxeet-conferencekit/ios/Carthage/Build/iOS/VoxeetSDK.framework
  • $(PROJECT_DIR)/../node_modules/@voxeet/react-native-voxeet-conferencekit/ios/Carthage/Build/iOS/WebRTC.framework
  • $(PROJECT_DIR)/../node_modules/@voxeet/react-native-voxeet-conferencekit/ios/Carthage/Build/iOS/VoxeetConferenceKit.framework

8. Go to your target settings ('Build Settings' in the All, the default view is in Basic mode) and inclue the following content:

  • FRAMEWORKSEARCHPATHS = $(PROJECTDIR)/../nodemodules/@voxeet/react-native-voxeet-conferencekit/ios/Carthage/Build/iOS
  • ALWAYSEMBEDSWIFTSTANDARDLIBRARIES = YES

9. If you use the ExpoKit it requires an additional configuration: Select RNVoxeetConferencekit.xcodeproj and go to the target settings ('Build Settings') Include there the following content:

  • HEADERSEARCHPATHS = $(PROJECT_DIR)/../../../../ios/Pods/Headers/Public (in recursive)

Installation on Android

1. Open the android/app/src/main/java/[...]/MainActivity.java.

  • Add the import com.reactlibrary.RNReactNativeVoxeetConferencekitPackage; to the imports at the top of the file.
  • Add voxeet to the list returned by the getPackages() method.
  • Add a field in the MainApplication class named voxeet: private RNReactNativeVoxeetConferencekitPackage voxeet;.
  • In the onCreate method, instantiate the voxeet field to a new instance of the RNReactNativeVoxeetConferencekitPackage class: voxeet = new RNReactNativeVoxeetConferencekitPackage(MainApplication.this);.

2. Append the following lines to the android/settings.gradle:

include ':@voxeet_react-native-voxeet-conferencekit'
project(':@voxeet_react-native-voxeet-conferencekit').projectDir = new File(rootProject.projectDir, 	'../node_modules/@voxeet/react-native-voxeet-conferencekit/android')

3. Insert the following lines inside the dependencies block in the android/app/build.gradle:

  compile (project(':@voxeet_react-native-voxeet-conferencekit')) {
      transitive = true
  }

Mandatory modification

Warning: this modification is not activated automatically by the react-native link. Set it manually.

Android

Edit the following files :

  • build.gradle
  • app/build.gradle
  • app/src/main/AndroidManifest.xml
  • MainActivity
  • MainApplication
build.gradle

At the end of the file, add this structure declaration:

ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 16
    compileSdkVersion = 28
    targetSdkVersion = 27
    supportLibVersion = "28.0.0"
    voxeetSdkVersion = "1.4.12"
    mediaSdkVersion = "0.8.2"
}
app/build.gradle

The SDK currently uses the 28.0.0 support libraries. Add dependencies to these versions to prevent conflicts with other not updated libraries. Modify your app/build.gradle by adding the following code.

    implementation "com.android.support:supportt-compat:${rootProject.ext.supportLibVersion}"
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.android.support:recyclerview-v7:${rootProject.ext.supportLibVersion}"

    //possibly this one too
    implementation "com.android.support:design:${rootProject.ext.supportLibVersion}"

Note that the list above is not limited. Although, since the first three implementations are directly dependent on the library, it is worth to use them.

In case of libraries incompatibilities, you can separate them, update and report the use of the rootProject.ext.someField, as described in the Android Developer documentation.

The Voxeet SDK uses Java 8 instructions. Edit the app/build.gradle to incorporate this compilation mode:

android {
    ...

    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }

    ...
}
MainApplication

Follow the implementation from the first step of the link documentation.

MainActivity

If your MainActivity extends the ReactActivity, change the MainActivity extends ReactActivity to the MainActivity extends RNVoxeetActivity with the following import: import com.voxeet.specifics.RNVoxeetActivity.

If you use the Expo or you perform the modification described above using Android Studio, include the following method calls in the MainActivity.java file:

  • In the imports:
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
  • In the code:
  private RNVoxeetActivityObject mActivityObject;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);

      mActivityObject = new RNVoxeetActivityObject();
      mActivityObject.onCreate(this);
  }

  @Override
  protected void onResume() {
      super.onResume();

      mActivityObject.onResume(this);
  }

  @Override
  protected void onPause() {
      mActivityObject.onPause(this);

      super.onPause();
  }

  @Override
  public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
      super.onRequestPermissionsResult(requestCode, permissions, grantResults);

      mActivityObject.onRequestPermissionsResult(requestCode, permissions, grantResults);
  }

  @Override
  public void onNewIntent(Intent intent) {
      super.onNewIntent(intent);

      mActivityObject.onNewIntent(intent);
  }

  @Override
  public void onActivityResult(int requestCode, int resultCode, Intent data) {
      if (!mActivityObject.onActivityResult(requestCode, resultCode, data)) {
          super.onActivityResult(requestCode, resultCode, data);
      }
  }

app/src/main/AndroidManifest.xml

After the required permissions, add the following xml nodes:

  <!-- VOXEET PERMISSION - WARNING : THERE MAY BE DUPLICATES - no expected issues -->

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.WAKE_LOCK" />
  <uses-permission android:name="android.permission.BLUETOOTH" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.INTERACT_ACROSS_USERS_FULL" />
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.CAMERA" />

Usage

import { VoxeetSDK, ConferenceUser } from "@voxeet/react-native-voxeet-conferencekit";
...

Configuration

Configure the project according to the public documentation.

Configuration on iOS

Please go to iOS Conferencekit.

Configuration on Android

Please go to Android SDK Sample.

Build locally

Use the following code to build the project locally:

npm run build-library

The typescript command line requires the following local development resolutions (available in the package.json):

npm i -D @types/react ...

License

   Copyright 2019 - Voxeet

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.