Getting started with the React Native wrapper for Stringee Video Conference SDK

Step 1: Prepare

Before you use Stringee Video Conference API to make a video conference:

Sign up for a Stringee account free here: https://developer.stringee.com/account/register
Create a project on Stringee Dashboard.

Stringee create project

Then, the best way to learn how to uses Stringee Video Conference API is to follow the following steps:

Step 2: Install stringee-react-rative 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 --save

iOS

Note Please make sure to have CocoaPods on your computer.

In you terminal, change into your ios directory.
Create a pod file by running: pod init.
Add the following to your pod file:

    platform :ios, '8.0'

    target '<YourProjectName>' do
        node_modules_path = '../node_modules'

        pod 'yoga', path: "#{node_modules_path}/react-native/ReactCommon/yoga/yoga.podspec"
        pod 'React', path: "#{node_modules_path}/react-native", :subspecs => ['DevSupport', 'RCTNetwork']

        pod 'RNStringee', path: "#{node_modules_path}/stringee-react-native/ios"
    end

    post_install do |installer|
      installer.pods_project.targets.each do |target|
        if target.name == "React"
          target.remove_from_project
        end
      end
    end

Now run, pod install
Open XCode
Open <YourProjectName>.xcworkspace file in XCode. This file can be found in the ios folder of your React Native project.
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.
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>

Android

Manual installation

Open up android/app/src/main/java/[...]/MainApplication.java
- Add import com.stringeereactnative.RNStringeeReactPackage; to the imports at the top of the file
- Add new RNStringeePackage() to the list returned by the getPackages() method

Append the following lines to android/settings.gradle:

include ':stringee-react-native'
project(':stringee-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/stringee-react-native/android')

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
  compile project(':stringee-react-native')
```
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" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
// 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" />

Step 3: 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

Import StringeeClient:

import {
StringeeClient
} from "stringee-react-native";

Initialize StringeeClient

render () {
return (
    <View>
    ...    
    <StringeeClient
        ref="client"
        eventHandlers = {this.clientEventHandlers}
    />
    ...
    </View>
)
}

class App extends Component {
constructor(props) {
    super(props);

    this.clientEventHandlers = {
    onConnect: this._clientDidConnect,
    onDisConnect: this._clientDidDisConnect,
    onFailWithError: this._clientDidFailWithError,
    onRequestAccessToken: this._clientRequestAccessToken,
    onIncomingCall: this._callIncomingCall,
    };
}

// The client connects to Stringee server
_clientDidConnect = ({userId}) => {
    console.log('_clientDidConnect - ' + userId);
}

// The client disconnects from Stringee server
_clientDidDisConnect = () => {
    console.log('_clientDidDisConnect');
}

// The client fails to connects to Stringee server
_clientDidFailWithError = () => {
    console.log('_clientDidFailWithError');
}

// Access token is expired. A new access token is required to connect to Stringee server
_clientRequestAccessToken = () => {
    console.log("_clientRequestAccessToken");
    // this.refs.client.connect('NEW_YOUR_ACCESS_TOKEN');
}

// IncomingCall event
_callIncomingCall = ({callId, from, to, fromAlias, toAlias, callType, isVideoCall}) => {
    console.log("IncomingCallId-" + callId + ' from-' + from + ' to-' + to + ' fromAlias-' + fromAlias + ' toAlias-' + toAlias + ' isVideoCall-' + isVideoCall + 'callType-' + callType);
}

render() {
    return (
    <View>
        ...
        <StringeeClient
        ref="client"
        eventHandlers = {this.clientEventHandlers}
        /> 
        ...
    </View>
    );
}
}

Connect

async componentDidMount() {
    await this.refs.client.connect('YOUR_ACCESS_TOKEN');
}

Step 4: Make or join a room

After the client connects to Stirngee server, follows these steps to make or join a room:

Import StringeeRoom:

import {
StringeeRoom
} from "stringee-react-native";

Initialize StringeeRoom

render () {
return (
    <View>
        ...
        <StringeeRoom
            ref="stringeeRoom"
            eventHandlers={this.roomEventHandlers}
        />
        ...
    </View>
);
}

class App extends Component {
    constructor(props) {
        super(props);
        this.roomEventHandlers = {
            onRoomConnect: this._onRoomConnect,
            onRoomDisConnect: this._onRoomDisConnect,
            onRoomError: this._onRoomError,
            onStreamAdd: this._onStreamAdd,
            onStreamRemove: this._onStreamRemove
        };
    }

// Invoked when the client makes/joins a room successfully.
_onRoomConnect = ({ roomId, streams }) => {
    console.log("_onRoomConnect " + roomId + ", streams:" + streams);    
};

// Invoked when the client leaves a room.
_onRoomDisConnect = ({ roomId }) => {
    console.log("_onRoomDisConnect " + roomId);    
};

_onRoomError = ({ roomId, code, message }) => {
    console.log("_onRoomError " + roomId + "--" + code + "--" + message);
};

// Invoked when a stream is published to the room.
_onStreamAdd = ({ roomId, stream }) => {
    console.log("_onStreamAdd " + roomId + "--" + stream);  
};

// Invoked when a stream is unpublished to the room.
_onStreamRemove = ({ roomId, stream }) => {
    console.log("_onStreamRemove " + roomId + "--" + stream);    
};

render() {
    return (
        <View style={styles.container}>
            ...    
            <StringeeRoom
                ref="stringeeRoom"
                eventHandlers={this.roomEventHandlers}
            />
            ...
        </View>
    );
}

Make a room

this.refs.stringeeRoom.makeRoom((status, code, message, roomId) => {
    this.setState({ roomId: roomId });
    console.log(
      "MakeRoom - status:" +
        status +
        ", code:" +
        code +
        ", message:" +
        message +
        ", roomId:" +
        roomId
    );
  });

Join a room

this.refs.stringeeRoom.joinRoom(roomId, (status, code, message, roomId) => {
    this.setState({ roomId: roomId });
    console.log(
      "joinRoom - status:" +
        status +
        ", code:" +
        code +
        ", message:" +
        message +
        ", roomId:" +
        roomId
    );
  });

Step 5: Publish the local stream

After makes/joins a room successfully, the client wants to publish the local stream to the room:

    this.refs.stringeeRoom.publishLocalStream(
      roomId,
      config,
      (status, code, message, streamId) => {
        console.log(
          "publishLocalStream -- status: " + status + ", message: " + message
        );
      }
    );

Step 6: Subscribe a stream

When another client publishes a stream to the room, the client receives the stream via onStreamAdd event. The client wants to subscribe the stream:

    this.refs.stringeeRoom.subscribe(
      roomId,
      stream.streamId,
      (status, code, message) => {
        console.log("status " + status + ", code: " +code ", message: " + message);        
      }
    );

Step 7: Leave a room

When the client wants to leave a room:

this.refs.stringeeRoom.destroy(this.state.roomId, (status, code, message) => {
      console.log("destroy " + status + "--" + code + "--" + message);
    });

Sample

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

Suggestions