Suggestions

close search

Getting started with Stringee Video Conference API using iOS SDK

Step 1: Prepare

1. Before using Stringee Video Conference 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: https://developer.stringee.com/project

Step 2: Add SDK to Project

CocoaPods (preferred)

1. Edit your project's Podfile

The simplest way to import the SDK into an iOS project is with CocoaPods. Open your project's Podfile and add this line to your app's target:

pod 'Stringee'

Then from the command line run:

pod install --repo-update

If you're new to CocoaPods, see their official documentation for info on how to create and use Podfiles.

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

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

Manual

To add the SDK in Xcode:

1. Download the SDK: https://developer.stringee.com/download
2. Unzip the archive to your project home directory.
3. Open your application's Xcode project.
4. If you don't have a Frameworks group in your project, create one.
5. Open your project home directory using Finder.
6. Drag the Stringee.framework into the Frameworks group of Xcode's Project Navigator. In the displayed dialog, choose "Create groups" and select "Copy items if needed".

7. Open Xcode's Build Settings tab in your project.
8. Add $(SRCROOT) to the project's Framework Search Paths setting.

9. Configure Xcode Project

Add the following libraries and frameworks to Target -> "Build Phases" -> "Link Binary With Libraries":

• AVFoundation.framework
• GLKit.framework
• AudioToolBox.framework
• VideoToolBox.framework
• libicucore.tbd
• libstdc++.tbd

10. In the "Build Settings" tab -> "Other linker flags" add "-ObjC" flag

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

Step 3: Edit Info.plist

1. Right-click the information property list file (Info.plist) and select Open As -> Source Code
2. 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>

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.

1. Add a line to import the Stringee library:

#import <Stringee/Stringee.h>

2. Implements the StringeeConnectionDelegate protocol

In .h file

@interface ViewController : UIViewController <StringeeConnectionDelegate>

@property(strong, nonatomic) StringeeClient * stringeeClient;

@end

In .m file

- (void)requestAccessToken:(StringeeClient *)stringeeClient {
    NSLog(@"requestAccessToken");
}

- (void)didConnect:(StringeeClient *)stringeeClient isReconnecting:(BOOL)isReconnecting {
    NSLog(@"Successfully connected to Stringee Server, user ID: %@", stringeeClient.userId);
}

- (void)didDisConnect:(StringeeClient *)stringeeClient isReconnecting:(BOOL)isReconnecting {
    NSLog(@"didDisConnect");
}

- (void)didFailWithError:(StringeeClient *)stringeeClient code:(int)code message:(NSString *)message {
    NSLog(@"Failed connection to Stringee Server with error: %@", message);
}

3. Start connecting

NSString* accessToken = @"...";

self.stringeeClient = [[StringeeClient alloc] initWithConnectionDelegate:self];
[self.stringeeClient connectWithAccessToken:accessToken];

Step 5: Make a Room

When the client connects to Stringee Server, instantiate a StringeeRoom object and call the makeRoomWithCompletionHandler method:

self.stringeeRoom = [[StringeeRoom alloc] initWithStringeeClient:self.stringeeClient];

[self.stringeeRoom makeRoomWithCompletionHandler:^(BOOL status, int code, NSString *message) {
    if (status) {
        // Sucess
    } else {
        // Fail
    }
}];

Step 6: Joining a room

When the client connects to Stringee Server, you will instantiate a StringeeRoom object and call the joinRoomWithRoomId:sompletionHandler method:

self.stringeeRoom = [[StringeeRoom alloc] initWithStringeeClient:self.stringeeClient];

[self.stringeeRoom joimRoomWithRoomId:self.roomId completionHandler:^(BOOL status, int code, NSString *message) {
    if (status) {
        // Success
    } else {
        // Fail
    }
}];

roomId is the id of the room you will join.

Step 7: Receiving Room events

Implements the StringeeRoomDelegate protocol

in .h file:

#import <Stringee/Stringee.h>

@interface ViewController : UIViewController <StringeeRoomDelegate>

@property(strong, nonatomic) StringeeClient * stringeeClient;

@end

in .m file:

- (void)didRoomConnect:(StringeeRoom *) stringeeRoom streams:(NSArray<StringeeRoomStream *>*) streams {

}

- (void)didRoomError:(StringeeRoom *) stringeeRoom code:(int) code message:(NSString *) message {

}

- (void)didRoomDisConnect:(StringeeRoom *) stringeeRoom {

}

- (void)didStreamAdd:(StringeeRoom *) stringeeRoom stream:(StringeeRoomStream *) stream {

}

- (void)didStreamRemove:(StringeeRoom *) stringeeRoom stream:(StringeeRoomStream *) stream {

}

- (void)didStreamSubscribe:(StringeeRoom *) stringeeRoom stream:(StringeeRoomStream *) stream {

}

- (void)didStreamSubscribeError:(StringeeRoom *) stringeeRoom stream:(StringeeRoomStream *) stream error:(NSString *) error {

}

- (void)didStreamPublish:(StringeeRoom *) stringeeRoom stream:(StringeeRoomStream *) stream {

}

- (void)didStreamPublishError:(StringeeRoom *) stringeeRoom stream:(StringeeRoomStream *) stream error:(NSString *) error {

}

- (void)didStreamUnPublish:(StringeeRoom *) stringeeRoom stream:(StringeeRoomStream *) stream {

}

- (void)didStreamUnPublishError:(StringeeRoom *) stringeeRoom stream:(StringeeRoomStream *) stream error:(NSString *) error {

}

- (void)didStreamUnSubscribe:(StringeeRoom *) stringeeRoom stream:(StringeeRoomStream *) stream {

}

- (void)didStreamUnSubscribeError:(StringeeRoom *) stringeeRoom stream:(StringeeRoomStream *) stream error:(NSString *) error {

}

and set delegate for stringeeRoom:

stringeeRoom.delegate = self;

Step 8: Publish a stream

When the client joins the room, in order to publish the local audio/video stream to the room, instantiate a StringeeRoomStream object and call the publish method of the StringeeRoom instance.

StringeeRoomStreamConfig * config = [[StringeeRoomStreamConfig alloc] init];
config.streamVideoResolution = StreamVideoResolution_Normal;
StringeeRoomStream * localStream = [[StringeeRoomStream alloc] initLocalStreamWithConfig:config];

[self.stringeeRoom publish:localStream];

Step 9: SubScribe a stream

When the client joins the room, you will receive participants' streams. In order to subscribe these streams, call the subscribe method of the StringeeRoom instance.

- (void)didRoomConnect:(StringeeRoom *)stringeeRoom streams:(NSArray<StringeeRoomStream *> *)streams {
    for (StringeeRoomStream * stream in streams) {
        [self.stringeeRoom subscribe:stream];
    }   
}

When a new client joins the room, you will receive the didStreamAdd event with the client's stream. You can subscribe the stream as described above.

-(void) didStreamAdd:(StringeeRoom *)stringeeRoom stream:(StringeeRoomStream *)stream {
    [self.stringeeRoom subscribe:stream];
}

Step 10: Display local and remote video stream

Stringee iOS SDK renders a video stream to a view. Then you can add this view to your UI. After the local stream has been initialzied,display the stream:

localStream = [[StringeeRoomStream alloc] initLocalStreamWithConfig:config];
localStream.localVideoView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
[self.view insertSubview:localStream.localVideoView atIndex:0];

After a stream has been subscribed, display the stream:

-(void) didStreamSubscribe:(StringeeRoom *)stringeeRoom stream:(StringeeRoomStream *)stream {
    [stream.remoteVideoView setFrame:CGRectMake(0, 0, 100, 100)];
    stream.remoteVideoView.delegate = self;
    [self.view addSubview:stream.remoteVideoView];
}

Note 1:

The size of the remote streams'views can be changed when rendering. You need caculate the remoteVideoView size to display it correctly:

1. In .h file, Implements the StringeeRemoteViewDelegate protocol:

#import <Stringee/Stringee.h>

@interface ViewController : UIViewController <StringeeRemoteViewDelegate>

@property(strong, nonatomic) StringeeClient * stringeeClient;

@end

2. Set delegate for remoteVideoView before adding the remoteVideoView to your UI:

[stream.remoteVideoView setFrame:CGRectMake(0, 0, 100, 100)];
stream.remoteVideoView.delegate = self;
[self.view addSubview:stream.remoteVideoView];

3. Caculate the remoteVideoView size:

-(void)videoView:(StringeeRemoteVideoView *)videoView didChangeVideoSize:(CGSize)size {
    // Get width and height of superview
    CGFloat superWidth = videoView.superview.bounds.size.width;
    CGFloat superHeight = videoView.superview.bounds.size.height;

    CGFloat newWidth;
    CGFloat newHeight;

    if (size.width > size.height) {
        newWidth = superWidth;
        newHeight = newWidth * size.height / size.width;
        [videoView setFrame:CGRectMake(0, (superHeight - newHeight) / 2, newWidth, newHeight)];
    } else {
        newHeight = superHeight;
        newWidth = newHeight * size.width / size.height;
        [videoView setFrame:CGRectMake((superWidth - newWidth) / 2, 0, newWidth, newHeight)];
    }
}

Note 2:

When your app supports auto-orientation, you need implement the following method of your ViewController:

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
    [localStream autoOrientationOfLocalVideoViewWithSize:size withTransitionCoordinator:coordinator];
}

Then call the autoOrientationOfLocalVideoViewWithSize: withTransitionCoordinator: method of the StringeeRoomStream instance.

Step 11: Leaving a room

When the client leaves a room, you will remove all video views:

// remove localVideoView
if (localStream.localVideoView.superview) {
    [localStream.localVideoView removeFromSuperview];
}
// remove remoteVideoView
for (StringeeRoomStream * stream in arrayRemoteStreams) {
    if (stream.remoteVideoView.superview) {
        [stream.remoteVideoView removeFromSuperview];
    }
}
Then call the destroy method of StringeeRoom instance.
// destroy room
[self.stringeeRoom destroy];

Step 12: Sample

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