Suggestions

close search

Getting started with Stringee Video Conferencing API using React native

Step 1: Prepare

  1. To begin using Stringee Video Conferencing API, you need to 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

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

  2. Proguard

    Open up android/app/proguard-rules.pro and add following lines:

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

iOS

  1. In you terminal, change into your ios directory.

  2. Create a pod file by running: pod init.

  3. Add the following to your pod file:

    pod 'RNStringee', path: "../node_modules/stringee-react-native/ios"

  4. Now run, pod install

  5. Open XCode

  6. Open <YourProjectName>.xcworkspace file in XCode. This file can be found in the ios folder of your React Native project.

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

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

  9. Right-click the information property list file (Info.plist) and select Open As -> Source Code.

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

  11. 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 generate 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. Import StringeeClient: 
    import {StringeeClient} from "stringee-react-native";

  2. Initialize StringeeClient and register the client's events

    ...
constructor(props) {
super(props);
...
this.client = React.createRef();
this.clientEventHandlers = {
    onConnect: this.clientDidConnect,
    onDisConnect: this.clientDidDisConnect,
    onFailWithError: this.clientDidFailWithError,
    onRequestAccessToken: this.clientRequestAccessToken,
    onCustomMessage: this.clientReceiveCustomMessage,
    };
}
...
// 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');
}

// Receive custom message
clientReceiveCustomMessage = ({data}) => {
    console.log('clientReceiveCustomMessage: ' + data);
};
...
render () {
    return (
        <View>
        ...    
            <StringeeClient
            ref= {this.client}
            eventHandlers = {this.clientEventHandlers}
            />
        ...
        </View>
    )
}
  3. Connect 
    this.client.current.connect('YOUR_ACCESS_TOKEN');

Step 5: Connect to room

After the client connects to Stirngee server, follow below steps to connect to room:

  1. Initialize StringeeVideo, StringeeRoom 
    import {StringeeRoom, StringeeVideo} from 'stringee-react-native';
...
stringeeVideo: StringeeVideo;
stringeeRoom: StringeeRoom;
...
constructor(props) {
    super(props);
    this.stringeeVideo = new StringeeVideo(clientId);
}
  2. Create and connect to room

In order to create room, you will need to use rest api, described here: https://developer.stringee.com/docs/rest-api-reference/room-management.

In order to connect to room, you will need token to the room credential : room_token. In production application, the room_token should be generated by your server sample code for generating room token here: https://developer.stringee.com/docs/room-token

```
this.stringeeVideo.connect(
  'YOUR_ROOM_TOKEN',
  (status, code, message, data) => {
    if (status) {
        this.stringeeRoom = data.room;
        const tracks = data.videoTracks;
        const users = data.users;
        }
    },
);
```

In which:

  1. Register the room's events

    constructor(props) {
super(props);
...
this.roomEvents = {
    didJoinRoom: this.handleJoinRoom,
    didLeaveRoom: this.handleLeaveRoom,
    didAddVideoTrack: this.handleAddVideoTrack,
    didRemoveVideoTrack: this.handleRemoveVideoTrack,
    didReceiveRoomMessage: this.handleReceiveRoomMessage,
    };
}

...
this.stringeeRoom.registerRoomEven(this.roomEvents);
...

/// Invoked when the another user join room
handleJoinRoom = user => {
    console.log('handleJoinRoom - ' + JSON.stringify(user));
};

/// Invoked when the another user leave room
handleLeaveRoom = user => {
    console.log('handleLeaveRoom - ' + JSON.stringify(user));
};

/// Invoked when the add track to room
handleAddVideoTrack = videoTrack => {
    console.log('handleAddVideoTrack - ' + JSON.stringify(videoTrack));
};

/// Invoked when the remove track from room
handleRemoveVideoTrack = videoTrack => {
    console.log('handleRemoveVideoTrack - ' + JSON.stringify(videoTrack));
};

/// Invoked when receive message in room
handleReceiveRoomMessage = ({msg, from}) => {
    console.log(
        'handleReceiveRoomMessage - msg - ' +
        msg +
        ' - from - ' +
        JSON.stringify(from),
    );
};

    Step 6: Create local video track and publish to room

/// Create video track options
const trackOptions = new StringeeVideoTrackOption(
    true,
    true,
    false,
    stringeeVideoDimensions.dimensions_1080,
);
/// Create local video track
this.stringeeVideo.createLocalVideoTrack(
    trackOptions,
    (status, code, message, data) => {
        if (status) {
            this.stringeeRoom.publish(data, (status, code, message, data) => {});
            }
        },
    );

Step 7: Subscribe another video track

After receiver another video track, you need to subscribe track to display video

const options = new StringeeVideoTrackOption(
    videoTrack.audioEnable,
    videoTrack.videoEnable,
    videoTrack.isScreenCapture,
    stringeeVideoDimensions.dimensions_1080,
);
this.stringeeRoom.subscribe(
    videoTrack,
    options,
    (status, code, message) => {}
);

Step 8: Display track

After successfully subscribing another video track or publish your track, you can display video

render () {
    return (
        <View>
            ...
            <StringeeVideoView
                style={this.styles.trackView}
                trackId={trackId}
                overlay={true}
            />
            ...
        </View>
    );
}

Step 8: Unpublish video track

If you don't want to show your track in room anymore, you can remove your track in room by unpublishing it:

_room.unPublish(_localTrack).then((result) {
     if (result['status']) {
        }
    });

Step 9: Unsubscribe video track

If you don't want to receive another track's audio or track'svideo in room anymore, you can unsubscribe this track:

this.stringeeRoom.unpublish(
    this.state.localTrack,
    (status, code, message) => {},
);

Step 10: Leave room

After you unpublish your track in room, you need to release this and then you can leave room

this.stringeeRoom.unpublish(
    this.state.localTrack,
    (status, code, message) => {
        if (status) {
            this.state.localTrack.close((status, code, message) => {
                if (status) {
                    this.stringeeRoom.leave(false, (status, code, message) => {});
                }
            });
        }
    },
);

Step 11: Mute

Mute local sound:

```
bool mute = true; // true: mute, false: unmute
this.state.localTrack.mute(mute, (status, code, message) => {});
```

Step 12: Switch camera

Switch camera in local:

```
this.state.localTrack.switchCamera((status, code, message) => {});
```

Step 13: Turn on/off video

Turn on/off video:

```
bool enableVideo = true; // true: turn on, false: turn off
this.state.localTrack.enableVideo(enableVideo, (status, code, message) => {});
```

Step 14: Share screen (require android API >= 21)

  1. Create screen capture track:

    Before starting screen capture, you need to create and start a Foreground service with foregroundServiceType is mediaProjection.

    this.stringeeVideo.createCaptureScreenTrack(
    (status, code, message, data) => {
        console.log('createCaptureScreenTrack - ' + message);
        if (status) {
            // After successfully creating capture screen track, you can publish this track to room
            this.stringeeRoom.publish(
                data,
                (status, code, message, videoTrack) => {
                if (status) {
                    this.setState({
                        localShareTrack: videoTrack,
                        isSharing: !this.state.isSharing,
                        });
                    }
                },
            );
        }
    },
);

  2. Display captured video:

    After you have successfully done screen capturing, you will receive a StringeeVideoTrack which is your capture screen track or other screen track from didAddVideoTrack:

    render () {
    return (
        <View>
            ...
            <StringeeVideoView
                style={this.styles.trackView}
                trackId={this.state.localShareTrack.trackId}
                overlay={true}
            />
            ...
        </View>
    );
}

  3. Stop screen capturing:

    Like local track, if you don't want to share screen track anymore, you can unpublish this track by following Step 8.

Sample

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