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