SIGN UP
Navigation

Migration Guide

Our team is glad to introduce a new version of React Native SDK – 1.0.0. If you're using any of previous versions (from now on "Legacy"), we recommend to start using the new version due to its new handy features:

  1. Extended control for audio devices and camera with the ability to handle events about new audio devices, audio device changes, camera errors
  2. Ability to indicate video directions on call creation or answering
  3. New APIs for mid-call operations: hold and start receive video during the call
  4. Promises support
  5. An easy way to subscribe to Voximplant React Native SDK events with on/off APIs instead of DeviceEventEmitter 
  6. Video resize modes for android
  7. Support for multiple video streams and easy control for them
  8. Endpoints, VideoStream and VideoView

This guide inherits the structure of the Using React Native SDK guide, showing what has changed in each section.

Add Voximplant React Native SDK to the project

iOS

No changes.

Android

It is required to add Java 8 support. 

  1. Open the android/app/build.gradle file and add the following lines to the ‘android’ section: 
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
  2. If you're using gradle version < 3.0.0, do this step and the next one OR run the gradle sync command in Android Studio, then follow the provided hints.
    Open the android/build.gradle file and update the Android plugin for gradle: 
    dependencies {
        // use the latest available version
        classpath 'com.android.tools.build:gradle:3.1.3'
    }
  3. Open the android/gradle/wrapper/gradle-wrapper.properties file and edit the distributionUrl to gradle-4.4-all.zip: 
    distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

Initialization

Legacy

There were no classes, just:

VoxImplant.SDK.init();

Current

Voximplant.Client is a singleton and the main class of the SDK that provides access to Voximplant’s functions, Voximplant.getInstance method is used to get its instance:

let clientConfig = {};
clientConfig.enableVideo = true; // Android only option
clientConfig.saveLogsToFile = true; // iOS only option
let client = Voximplant.getInstance(clientConfig);

We also replaced the VoxImplantClientConfig object with the brand new Voximplant.ClientConfig, which contains more options. Note that the settings are platform dependent, i.e., some parameters work only for iOS, others – for Android.

Connect and Login

Legacy

Previously the connection to the Voximplant cloud looked like this:

VoxImplant.SDK.connect({connectivityCheck: false});

// result of connect
DeviceEventEmitter.addListener(
    VoxImplant.SDK.Events.ConnectionSuccessful,
    () => {
        console.log('Connection successful’);
    }
);

VoxImplant.SDK.login("user", "password");

// result of login
DeviceEventEmitter.addListener(
    VoxImplant.SDK.Events.LoginSuccessful,
    (loginSuccessful) => {
        console.log('Login successful ' + loginSuccessful.displayName);
    }
);

Note that the connectivityCheck option in Legacy was true by default.

Current

Now React Native SDK supports promises, and currently, there is no need for DeviceEventEmitter.

Actually, you can use:

  • both promises and on/off API
  • only on/off API
  • only promises

to handle Voximplant events.

Once you got the Voximplant.Client class instance, you can call its methods to connect and login.

To check the status of the connection to the Voximplant cloud, you can use the new Voximplant.Client.getClientState method.

async function login() {
    try {
        let state = await client.getClientState();
        if (state === Voximplant.ClientState.DISCONNECTED) {
            await client.connect();
        } 
        let authResult = await client.login("userName", "password");
    } catch (e) {
        console.log(e.name + e.message);
    }
}

Note that the connectivityCheck option now is false by default.

Make calls

Legacy

The call processing was available via a unique call identification (call id).

// Make a video call – the second argument is true
VoxImplant.SDK.createCall("number", true, null, function(callId) {
    VoxImplant.SDK.startCall(callId);   
}.bind(this));

DeviceEventEmitter.addListener(
    VoxImplant.SDK.Events.CallConnected,
    (callConnected) => {
        console.log('Call connected. Call id = ' + callConnected.callId);
    }
);

Current

Now there is the Voximplant.Call class with all methods for call management.

All events related to a call now are grouped in the Voximplant.CallEvents enum; you can subscribe to them via Voximplant.Call.on/off. The Voximplant.Client.call method has replaced both VoxImplant.SDK.createCall and VoxImplant.SDK.startCall methods; it also returns the created call as a promise. 

NOTIFICATION

There is a difference between resolving the Voximplant.Client.call promise and handling Voximplant.CallEvents. 

If the promise is resolved, the SDK sends a call to the cloud. However, it doesn't mean that a call is connected; to catch this call state, subscribe to the Voximplant.CallEvents.Connected event.

If the promise is rejected, that indicates the issues in the application's code (e.g., a try to make a call without login to the Voximplant cloud); in case of the CallFailed event is triggered, that means a telecom-related issue (e.g., another participant rejects a call).

 
async function makeCall() {
    const callSettings = {
        video: {
            sendVideo: true,
            receiveVideo: true,
        }
    };
    // create and start a call
    let call = await client.call("number", callSettings); 
    call.on(Voximplant.CallEvents.Connected, _onCallConnected);
}
function _onCallConnected(event) {
    // 'event' here is the instance of
    // the Voximplant.CallEvents.Connected object;
    // use event.call to get the instance of Voximplant.Call
}

Receiving calls

Legacy

Handling an incoming call:

DeviceEventEmitter.addListener(
    VoxImplant.SDK.Events.IncomingCall,
    (incomingCall) => {
        const isVideo = incomingCall.videoCall;
        console.log(`Incoming call: is video ${isVideo}`);
        VoxImplant.SDK.answerCall(incomingCall.callId);
    }
);

Current

To handle an incoming call, you have to subscribe to the Voximplant.ClientEvents.IncomingCall event, which contains the Voximplant.Call object. Additionally, now you have control over video directions:

client.on(Voximplant.ClientEvents.IncomingCall, _incomingCall);
function _incomingCall(event) {
    const callSettings = {
        video: {
            sendVideo: event.video,
            receiveVideo: event.video
        }
    };
    event.call.answer(callSettings);
}

Endpoints

Legacy

Previously, the RemoteView component and callId were used to show remote video.

Current

The Voximplant.Endpoint class represents any remote media unit in a call. When an endpoint is added, the appropriate event is triggered – Voximplant.CallEvents.EndpointAdded.

We added the event to catch when a remote video was added and removed. These events are in the Voximplant.EndpointsEvents enum; use Voximplant.Endpoint.on/off for subscribing.

NOTIFICATION

The subscribing to the Voximplant.EndpointsEvents is strictly required in order to render a remote video in your application. See the next section for details on rendering.

 
call.on(Voximplant.CallEvents.EndpointAdded, _onCallEndpointAdded);

function _onCallEndpointAdded(event) {
    console.log('_onCallEndpointAdded');
    event.endpoint.on(
        Voximplant.EndpointEvents.RemoteVideoStreamAdded,
        _onRemoteVideoStreamAdded
    );
};​

function _onRemoteVideoStreamAdded(event) {
    this.setState({remoteVideoStreamId: event.videoStream.id});
};

Video streams and video views

Legacy

There were two components for rendering of the local and remote video; video and its rendering were linked via the callid:

<VoxImplant.Preview style={styles.selfview} />

<VoxImplant.RemoteView 
    style={styles.remotevideo}
    callId={currentCallId} />

Current

Now both local and remote renderings are performed via the VideoView component; video stream and its rendering are linked via Voximplant.VideoStream.id. It allows strictly define what video stream should be rendered and where. Moreover, we implemented the render scaling functionality for both platforms. You can pass scaleType through the VideoView component's props (possible values are SCALE_FIT, SCALE_FILL).

Due to the link between the VideoView component and video stream id, you have to handle the Voximplant.CallEvents.LocalVideoStreamAdded event to render local video.

<Voximplant.VideoView 
         style={styles.selfview} 
         videoStreamId={this.state.localVideoStreamId} 
         scaleType={Voximplant.RenderScaleType.SCALE_FIT}/>
<Voximplant.VideoView 
        style={styles.remotevideo} 
        videoStreamId={this.state.remoteVideoStreamId} 
        scaleType={Voximplant.RenderScaleType.SCALE_FIT}/>

Mid-call operations

Legacy

Legacy API has sendVideo API that enables or disables video during the call. It doesn't provide the changes to video status (successful or not, what was the error).

VoxImplant.SDK.sendVideo(doSend);

Current

New Voximplant.Call.sendVideo API is promise-based, so it either successfully resolves or provides the error code and description:

async function sendVideo(doSend) {
    try {
        await call.sendVideo(doSend);
    } catch (e) {
        // e.code is one of the Voximplant.CallError enum constants
        console.warn(`${e.code} ${e.message}`);
    }
}

Audio device management

Legacy

It is possible to enable/disable only speaker:

VoxImplant.SDK.setUseLoudspeaker(true);

Current

The device management is implemented in the separate module – Voximplant.Hardware.AudioDeviceManager.  Current version supports not only speaker, but Bluetooth headset and wired headset; they are represented in the Voximplant.Hardware.AudioDevice enum. 

Voximplant.Hardware.AudioDeviceManager.getInstance()
    .selectAudioDevice(Voximplant.Hardware.AudioDevice.SPEAKER);

In case of success an audio device changes, and the Voximplant.Hardware.AudioDeviceEvents.DeviceChanged event is triggered.

Camera management

Legacy

The methods for camera management are VoxImplant.SDK.switchToCamera and VoxImplant.SDK.setCameraResolution.

Current

The camera management methods are represented in the Voximplant.CameraManager class; the class provides the ability to handle the result of camera switch and camera errors (currently on Android only).

 


Legacy API support

Legacy API will be supported till the end of 2018; then it will be completely removed. The support includes only the bug fixes in the master branch; there will be no new functionality added.

How to continue using of Legacy API

In order to keep using Legacy API, please do the following:

  1. Change imports from 
    import VoxImplant from 'react-native-voximplant';
    to 
    import {
        VoximplantLegacy,
        Preview,
        RemoteView
    } from 'react-native-voximplant';
  2. Replace all occurrences of
    1. VoxImplant.SDK to VoximplantLegacy
    2. VoxImplant.RemoteView to RemoteView
    3. VoxImplant.Preview to Preview
  3. Don't forget to add Java 8 support for Android