Getting started with Stringee Call API using React native

⚠ Warning
The stringee-react-native package is deprecated. We will continue to support it until the end of 2024. This document is for stringee-react-native-v2, an upgraded version of the old one.

Step 1: Prepare

Before using Stringee Call API for the first time, you must have a Stringee account.

If you do not have a Stringee account, sign up for free here: https://developer.stringee.com/account/register
Create a Project on Stringee Dashboard
Buy a Number (optional)
For app-to-phone, phone-to-app calling, buy a Number from Dashboard. If you only need app-to-app calling, skip this step.
Configure answer_url

For more information about answer_url, read Stringee Call API Overview. You can view answer_url sample code here: https://github.com/stringeecom/server-samples/tree/master/answer_url
- Configure Project's answer_url: To make an app-to-app, app-to-phone call, configure your Project's answer_url
If you do not have answer_url, you can use the following Project's answer_url to accelerate the process:

Project's answer_url for App-to-App call:
```
https://developer.stringee.com/scco_helper/simple_project_answer_url?record=false&appToPhone=false
```
Project's answer_url for App-to-Phone call:
```
https://developer.stringee.com/scco_helper/simple_project_answer_url?record=false&appToPhone=true
```
(Source code: https://github.com/stringeecom/server-samples/blob/master/answer_url/php/project_answer_url.php)

When building an application, you should use your own answer_url.
- Configure Number's answer_url: To receive a phone-to-app call, configure your Number's answer_url
If you do not have answer_url, you can use the following Number's answer_url to accelerate the process:

Number's answer_url for Phone-to-App call (The call is routed to Your App which authenticated by USER_ID):
```
https://developer.stringee.com/scco_helper/simple_number_answer_url?record=true&phoneToPhone=false&to_number=USER_ID
```
Number's answer_url for Phone-to-Phone call (The call is routed to TO_NUMBER):
```
https://developer.stringee.com/scco_helper/simple_number_answer_url?record=true&phoneToPhone=true&stringeeNumber=STRINGEE_NUMBER&to_number=TO_NUMBER
```
(Source code: https://github.com/stringeecom/server-samples/blob/master/answer_url/php/number_answer_url.php)

Step 2: stringee-react-native-v2 package

In your terminal (Command Prompt in Windows), change into your React Native project's directory
In your terminal (Command Prompt in Windows), run $ npm install stringee-react-native-v2 --save

Step 3: Setup

Android

Permissions

The Stringee Android SDK requires some permissions from your AndroidManifest

Open up android/app/src/main/AndroidManifest.xml
Add the following lines:

<!--Internet-->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

<!--Record-->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

<!--Audio-->
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<!--Camera-->
<uses-permission android:name="android.permission.CAMERA" />

<uses-feature
    android:name="android.hardware.camera"
    android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" />

<!--Bluetooth-->
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" /> <!--Require for android 12 or higher-->
<uses-feature
    android:name="android.hardware.bluetooth"
    android:required="false" />
<uses-feature
    android:name="android.hardware.bluetooth_le"
    android:required="false" />

Proguard

If your project uses ProGuard, you may have to add the following settings to the ProGuard configuration file to make sure Stringee builds correctly:

Create file proguard-rules.pro in your app/ dir and insert inside:

-dontwarn org.webrtc.**
-keep class org.webrtc.** { *; }
-keep class com.stringee.** { *; }

Add the following lines to /app/buidl.gradle :

android {
    buildTypes {
        release {
            useProguard true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

Add volley library

In your file build.gradle add this line:

dependencies {
    implementation 'com.android.volley:volley:1.2.1'
}

iOS

In you terminal, change into your ios directory, from the command line run following command:
```
pod install --repo-update
```
After run cocoapods command, open project file .xcworkspace
In the "Build Settings" tab -> "Other linker flags" add "$(inherited)" flag
In the "Build Settings" tab -> "Enable bitcode" select "NO"
Right-click the information property list file (Info.plist) and select Open As -> Source Code. Then insert the following XML snippet into the body of your file just before the final element:
```
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) uses Camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) uses Microphone</string>
```
In the "Build Settings" tab -> "Allow Non-modular includes in Framework Modules" select "YES"

Step 4: Connect to Stringee Server

In order to connect to Stringee Server, 3-parties authentication is required as described here: Client authentication

For testing purpose, go to Dashboard -> Tools -> Generate Access token and generates an access_token. In production, the access_token should be generated by your server, sample code generates access token here: https://github.com/stringeecom/server-samples/tree/master/access_token

Initialize StringeeClient:

import {StringeeClient} from 'stringee-react-native-v2';
...
const stringeeClient: StringeeClient = new StringeeClient();

// Listen for the StringeeClient event
const stringeeClientListener: StringeeClientListener = new StringeeClientListener();
// Invoked when the StringeeClient is connected
stringeeClientListener.onConnect = (stringeeClient, userId) => {
  console.log('onConnect: ', userId);
}
// Invoked when the StringeeClient is disconnected
stringeeClientListener.onDisConnect = (stringeeClient) => {
  console.log('onDisConnect');
}
// Invoked when StringeeClient connect false
stringeeClientListener.onFailWithError = (stringeeClient, code, message) => {
  console.log('onFailWithError: ', message);
}
// Invoked when your token is expired
stringeeClientListener.onRequestAccessToken = (stringeeClient) => {
  console.log('onRequestAccessToken');
}
// Invoked when receive an incoming of StringeeCall
stringeeClientListener.onIncomingCall = (stringeeClient, stringeeCall) => {
  console.log('onIncomingCall: ', JSON.stringify(stringeeCall));
}
// Invoked when receive an incoming of StringeeCall2
stringeeClientListener.onIncomingCall2 = (stringeeClient, stringeeCall2) => {
  console.log('onIncomingCall2: ', JSON.stringify(stringeeCall2));
}
stringeeClient.setListener(stringeeClientListener);

Connect

...
token: string = 'PUT YOUR TOKEN HERE'
...
stringeeClient.connect(token);

Step 5: Make a call

After the client connects to Stringee server, follows these steps to make a call:

Initialize StringeeCall

import {StringeeCall} from 'stringee-react-native-v2';
...
stringeeCall: StringeeCall = new StringeeCall({
  stringeeClient: stringeeClient, /// stringeeClient using to connect
  from: 'caller_userId', /// caller identifier
  to: 'callee_userId', /// callee identifier
});

// Listen for the StringeeCall event
const stringeeCallListener: StringeeCallListener = new StringeeCallListener();
// Invoked when the call's signaling state changes
stringeeCallListener.onChangeSignalingState = (stringeeCall, signalingState, reason, sipCode, sipReason) => {
  console.log('onChangeSignalingState', signalingState);
}
// Invoked when the call's media state changes
stringeeCallListener.onChangeMediaState = (stringeeCall, mediaState, description) => {
  console.log('onChangeMediaState', mediaState);
}
// Invoked when receive call info
stringeeCallListener.onReceiveCallInfo = (stringeeCall, callInfo) => {
  console.log('onReceiveCallInfo', callInfo);
}
// Invoked when an incoming call is handle on another device
stringeeCallListener.onHandleOnAnotherDevice = (stringeeCall, signalingState, description) => {
  console.log('onHandleOnAnotherDevice', signalingState);
}
// Invoked when local stream in video call is ready to play
stringeeCallListener.onReceiveLocalStream = (stringeeCall) => {
  console.log('onReceiveLocalStream');
}
// Invoked when remote stream in video call is ready to play
stringeeCallListener.onReceiveRemoteStream = (stringeeCall) => {
  console.log('onReceiveRemoteStream');
}
// Invoked when the current audio device changes in android
stringeeCallListener.onAudioDeviceChange = (stringeeCall, selectedAudioDevice, availableAudioDevices) => {
  console.log('onAudioDeviceChange', selectedAudioDevice);
}
stringeeCall.setListener(stringeeCallListener);

Make a call

stringeeCall.makeCall()
  .then(() => {
     console.log('makeCall success');
  })
  .catch(console.error);

Step 6: Answer a call

After the client receives an incoming call from onIncomingCall2(). Following these steps:

Initialize the answer

stringeeCall.initAnswer()
  .then(() => {
     console.log('initAnswer success');
  })
  .catch(console.error);

Answer

stringeeCall.answer()
  .then(() => {
     console.log('answer success');
  })
  .catch(console.error);

Step 7: Make a video call

A StringeeCall is a voice call by default. If you want to make a video call, you must set property isVideoCall of StringeeCall to true.
```
stringeeCall.isVideoCall = true;
```

Receive and display the local video and the remote video

Using our StringeeVideoView to display the video

...
// Invoked when local stream in video call is ready to play
stringeeCallListener.onReceiveLocalStream = (stringeeCall) => {
  console.log('onReceiveLocalStream');
  this.setState({hasReceivedLocalStream: true});
}
// Invoked when remote stream in video call is ready to play
stringeeCallListener.onReceiveRemoteStream = (stringeeCall) => {
  console.log('onReceiveRemoteStream');
  this.setState({hasReceivedRemoteStream: true});
}
...
render () {
  return (
    <View>
    ...
    {stringeeCall.isVideoCall &&
      this.state.hasReceivedLocalStream && (
        <StringeeVideoView
          style={styles.localView}
          uuid={stringeeCall.uuid}
          local={true}
        />
      )
    }
    {stringeeCall.isVideoCall &&
      this.state.hasReceivedRemoteStream && (
        <StringeeVideoView
          style={{flex: 1}}
          uuid={stringeeCall.uuid}
          local={false}
        />
      )
    }
    ...
    </View>
  );
}

Step 8: Hang up

Hang up a call:

   stringeeCall.hangup()
      .then(() => {
         console.log('hangup success');
      })
      .catch(console.error);

Step 9: Reject

Reject a call:

   stringeeCall.reject()
      .then(() => {
         console.log('reject success');
      })
      .catch(console.error);

Step 10: Mute

Mute the local sound:

   mute: boolean = true; // true: mute, false: unmute
   stringeeCall.mute(mute)
      .then(() => {
         console.log('mute success');
      })
      .catch(console.error);

Step 11: Switch speaker or bluetooth device

Switch to speakerphone or earpiece:

   isSpeaker: boolean = true; // true: speakerphone, false: earpiece
   stringeeCall.setSpeakerphoneOn(isSpeaker)
      .then(() => {
         console.log('setSpeakerphoneOn success');
      })
      .catch(console.error);

Step 12: Switch camera

Switch the local camera:

   stringeeCall.switchCamera()
      .then(() => {
         console.log('switchCamera success');
      })
      .catch(console.error);

Step 13: Turn on/off video

Turn on/off video:

   enableVideo: boolean = true; // true: turn on, false: turn off
   stringeeCall.enableVideo(enableVideo)
      .then(() => {
         console.log('enableVideo success');
      })
      .catch(console.error);

Sample

You can view a full version of this sample app on GitHub: https://github.com/stringeecom/react-native-samples/tree/master/CallSampleHook

Suggestions