Suggestions

close search

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

  1. 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

  2. Create a Project on Stringee Dashboard

    Stringee create Project

  3. Buy a Number (optional)

  4. For app-to-phone, phone-to-app calling, buy a Number from Dashboard. If you only need app-to-app calling, skip this step.

    Stringee buy Number

  5. 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

    Stringee Project 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

    Stringee Number 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

  1. In your terminal (Command Prompt in Windows), change into your React Native project's directory

  2. In your terminal (Command Prompt in Windows), run $ npm install stringee-react-native-v2 --save

Step 3: Setup

Android

  1. Permissions

    The Stringee Android SDK requires some permissions from your AndroidManifest

    • Open up android/app/src/main/AndroidManifest.xml
    • Add the following lines:
    // for internet access
    <uses-permission android:name="android.permission.INTERNET" />
    // for audio access
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    // for camera access
    <uses-permission android:name="android.permission.CAMERA" />
    // for bluetooth
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
  2. 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'
            }
        }
    }
  3. Add volley library

    In your file build.gradle add this line:

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

iOS

  1. In you terminal, change into your ios directory, from the command line run following command:

    pod install --repo-update
  2. After run cocoapods command, open project file .xcworkspace

  3. In the "Build Settings" tab -> "Other linker flags" add "$(inherited)" flag

  4. In the "Build Settings" tab -> "Enable bitcode" select "NO"

  5. 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>
  6. 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

  1. Initialize StringeeClient:

    import {StringeeClient} from 'stringee-react-native-v2';
    ...
    const stringeeClient: StringeeClient = new StringeeClient();
  2. Register the client's events

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

  1. 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
    });
  2. Register the call's events

    // 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);
  3. 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:

  1. Initialize the answer

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

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

Step 7: Make a video call

  1. 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;
  2. 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