README
Voxeet UXKit React Native
SDK License agreement
Before using the react-native plugin, please review and accept the Dolby Software License Agreement.
Getting started
Use the following commands to install and configure the UXKit on React Native:
npm install @voxeet/react-native-voxeet-conferencekit --save
npx react-native link @voxeet/react-native-voxeet-conferencekit
Note: For iOS and Android, you must perform some mandatory modifications to your project.
Mandatory modifications
iOS (react-native >= 0.60)
Open your Xcode workspace from YOUR_PROJECT/ios/YOUR_PROJECT.xcworkspace
Go to your target settings and select 'Signing & Capabilities', then click '+ Capability', and click 'Background Modes'.
- Turn on 'Audio, AirPlay and Picture in Picture'
- Turn on 'Voice over IP'
If you want to support CallKit (receiving incoming call when application is killed) with VoIP push notification, enable 'Push Notifications' (you will need to upload your VoIP push certificate to the Dolby.io Dashboard).
For privacy permissions, add two new keys in the Info.plist:
- Privacy - Microphone Usage Description
- Privacy - Camera Usage Description
Open a terminal and go to YOUR_PROJECT/ios.
pod install
If you are using react-native 0.64, there is a known bug from the FBReactNativeSpec library. You have to go into your Pods project in Xcode workspace, select FBReactNativeSpec target, and in the "Build Phases" section, drag and drop the "[CP-User] Generate Specs" step just under the "Dependencies" step (2nd position). You have to do this step after every pod install or pod update.
Open your .xcworkspace project, navigate to Product > Scheme > Edit scheme > Build > and uncheck "Parallelize Build".
Android
In
android/app/build.gradle
, add the maven repository and set theminSdkVersion
to at least 21.Insert the following lines inside the dependencies block in
android/app/build.gradle
: Warning: the SDK is only compatible with the Hermes engineproject.ext.react = [ enableHermes: true, // clean and rebuild if changing ]
use gradle configuration's pickFirst for the libc++_shared.so in the
android/app/build.gradle
fileandroid { compileSdkVersion rootProject.ext.compileSdkVersion //just for reference ... packagingOptions { pickFirst "**/libc++_shared.so" } ... }
Open the
android/app/src/main/java/[...]/MainActivity.java
file:If you are using
Expo
you can skip this step.If your
MainActivity
extendsReactActivity
, change fromMainActivity extends ReactActivity
toMainActivity extends RNVoxeetActivity
. With the following import:import com.voxeet.reactnative.specifics.RNVoxeetActivity
Update the
android/build.gradle
and update the allProjects block with the following :
allprojects {
repositories {
maven { url "https://android-sdk.voxeet.com/release" }
maven { url "https://dl.bintray.com/voxeet/maven" }
... // keep the other lines below
}
}
Note : if crashes occurs in debug mode, remove
debugImplementation
for any flipper library from the android/app/build.gradle + remove the java file in your debug/ folder. (the initializeFlipper method from the MainApplication can be removed as well)Bump the application environment to target Android API Level 31. Note: outdated libraries could be incompatible due to lack of android:exported flag (build errors)
ext {
buildToolsVersion = "31.0.0"
minSdkVersion = 21
compileSdkVersion = 31
targetSdkVersion = 31
}
Usage
import { VoxeetSDK } from "@voxeet/react-native-voxeet-conferencekit";
Note: The VoxeetEvents is now deprecated and will disappear from the library itself.
Initialization
VoxeetSDK.initialize(appKey, appSecret);
or
VoxeetSDK.initializeToken(accessToken, () => {
return new Promise((resolve, reject) => {
... //get the new accessToken
resolve(theNewAccessToken);
});
});
Open a session (+ check for conference to join)
Once the SDK is initialized, try to connect your current user as soon as possible.
await VoxeetSDK.connect(new UserInfo("externalId", "name", "optAvatarUrl"));
Once the session is started, if an incoming call is accepted by the user, it is initiated right away.
Join and leave conferences
Use the corresponding method to perform the action:
const conference = await VoxeetSDK.create({ alias: "yourConferenceAlias" });
await VoxeetSDK.join(conference.conferenceId);
To leave, use the following command:
await VoxeetSDK.leave(conferenceId);
Invite participants
Events
You can subscribe to events via the addListener
(and unsubscribe via the corresponding removeListener
) method in VoxeetSDK.events
.
Example
import { VoxeetSDK } from "@voxeet/react-native-voxeet-conferencekit";
import { ConferenceStatusUpdatedEvent } from "@voxeet/react-native-voxeet-conferencekit";
const onConferenceStatus = (event: ConferenceStatusUpdatedEvent) => {
console.warn("event received", event);
}
VoxeetSDK.events.addListener("ConferenceStatusUpdatedEvent", onConferenceStatus);
ConferenceStatusUpdatedEvent
- conferenceId:
string
- conferenceAlias:
string|undefined
- status:
ConferenceStatus
Configuration
Depending on your environment, you must configure your project according to the public documentation, Voxeet UXKit iOS and Voxeet UXKit Android.
Local build
To build locally the TypeScript definition, run the following command:
npm run build-library
The typescript command line needs local dev resolutions (available in the package.json
).
npm i -D @types/react ...