OTAcceleratorCore

Syntax sugar of OpenTok iOS SDK with Audio/Video communication including screen sharing

Code Quality Rank: L4

Programming language: Objective-C

License: MIT License

Tags: Media     Streaming    

Latest version: v3.0.0

README

Accelerator Core iOS

The Accelerator Core is a solution to integrate audio/video communication to any iOS applications via OpenTok platform. Accelerator TextChat and Accelerator Annotation have been deprecated and are now part of Accelerator Core.

Accelerator Core helps you with:

Core:

• one to one audio/video call
• multiparty audio/video call
• one to one screen sharing
• multiparty screen sharing
• UI components for handling audio/video enable&disable

TextChat:

• one to one text chat

Annotation:

• one to one audio/video call with annotations

Configure, build and run the sample apps

The Accelerator Core workspace contains 3 sample apps, one for the Core, TextChat and Annotation components.

1. Get values for API Key, Session ID, and Token. See Obtaining OpenTok Credentials for important information.

2. Install CocoaPods as described in CocoaPods Getting Started.

3. In Terminal, cd to your project directory and type pod install.

4. Reopen your project in Xcode using the new *.xcworkspace file.

5. Replace the following empty strings with the corresponding API Key, Session ID, and Token values:

   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
       // Override point for customization after application launch.
       sharedSession = [[OTAcceleratorSession alloc] initWithOpenTokApiKey:@"apikey" sessionId:@"sessionid" token:@"token"];
       return YES;
   }
   

6. Use Xcode to build and run the app on an iOS simulator or device.

7. For testing audio/video communication, we include a simple web app to make it easier: Browser-Demo. Simply open it and replace the corresponding API Key, Session ID, and Token values. Then save and load it to the browser. For multiparty, you can achieve by opening up multiple tabs.

8. You might want to run on other platforms:

Accelerator Core Javascript

Accelerator Core Android

Core Sample Code

Each communicator instance will take the OpenTok session from OTOneToOneCommunicatorDataSource, so this applies to each communicator instance:

• Passing the session

  - (OTAcceleratorSession *)sessionOfOTOneToOneCommunicator:(OTOneToOneCommunicator *)oneToOneCommunicator {
      return <#OTAcceleratorSession#>;
  }
  

• One-to-One

  self.communicator = [[OTOneToOneCommunicator alloc] init];
  self.communicator.dataSource = self;
  [self.communicator connectWithHandler:^(OTCommunicationSignal signal, NSError *error) {
      if (signal == OTPublisherCreated && !error) {
          weakSelf.communicator.publisherView.frame = CGRectMake(0, 0, 100, 100);
          [self.publisherView addSubview:weakSelf.communicator.publisherView];
      }
      else if (signal == OTSubscriberReady && !error) {
          weakSelf.communicator.subscriberView.frame = CGRectMake(0, 0, 100, 100);
          [self.subscriberView addSubview:weakSelf.communicator.subscriberView];
      }
  }];
  

• Multiparty

  self.communicator = [[OTMultiPartyCommunicator alloc] init];
  self.communicator.dataSource = self;
  [self.communicator connectWithHandler:^(OTCommunicationSignal signal, OTMultiPartyRemote *subscriber, NSError *error) {
      if (signal == OTPublisherCreated && !error) {
          weakSelf.communicator.publisherView.frame = CGRectMake(0, 0, 100, 100);
          [self.publisherView addSubview:weakSelf.communicator.publisherView];
      }
      else if (signal == OTSubscriberReady && !error) {
          subscriber.subscriberView.frame = <#your desired frame for this remote subscriberview#>;
          // your logic to handle multiple remote subscriberview(s)
      }
  }];
  

• Screen Sharing

  Use - (instancetype)initWithView: or - (instancetype)initWithView:name: like so

  self.screenSharer = [[OTOneToOneCommunicator alloc] initWithView:[UIApplication sharedApplication].keyWindow.rootViewController.view];
  

  or

  self.screenSharer = [[OTMultiPartyCommunicator alloc] initWithView:[UIApplication sharedApplication].keyWindow.rootViewController.view];
  

• Pre-defined UI

  Enable audio&video control

  self.communicator.publisherView.controlView.isVerticalAlignment = YES;
  self.communicator.publisherView.controlView.frame = CGRectMake(10, 10, CGRectGetWidth(self.publisherView.frame) * 0.1, CGRectGetHeight(self.publisherView.frame) * 0.3);
  

  Handle video enable/disable control

  // default
  // enable handleAudioVideo property, the publisherView will be covered by a silhouette automatically.
  self.communicator.publisherView.handleAudioVideo = YES;
  
  // disable handleAudioVideo property, the publisherView will do nothing for enabling/disabling publishVideo.
  self.communicator.publisherView.handleAudioVideo = NO;
  

Core Ready-to-Use Components

• One-to-One communication

[ready-in-use-2](./ready-in-use-2.png) [ready-in-use-3](./ready-in-use-3.png)

OTOneToOneCommunicationController *vc = [OTOneToOneCommunicationController oneToOneCommunicationControllerWithSession:<#OTAcceleratorSession#>];
[self.navigationController pushViewController:vc animated:YES];

TextChat Sample Code

• Passing the session

  - (OTAcceleratorSession *)sessionOfOTOneToOneCommunicator:(OTOneToOneCommunicator *)oneToOneCommunicator {
      return <#OTAcceleratorSession#>;
  }
  

• Start signaling text chat data

  // we assume self owns a table tableView
  [self.textChat connectWithHandler:^(OTTextChatConnectionEventSignal signal, OTConnection *connection, NSError *error) {
      if (signal == OTTextChatConnectionEventSignalDidConnect) {
          NSLog(@"Text Chat starts");
      }
      else if (signal == OTTextChatConnectionEventSignalDidDisconnect) {
          NSLog(@"Text Chat stops");
      }
  } messageHandler:^(OTTextChatMessageEventSignal signal, OTTextMessage *message, NSError *error) {
      if (signal == OTTextChatMessageEventSignalDidSendMessage || signal == OTTextChatMessageEventSignalDidReceiveMessage) {
          if (!error) {
              [weakSelf.textMessages addObject:message];
              [weakSelf.tableView reloadData];
          }
      }
  }];
  

• Stop signaling text chat data

  [self.textchat disconnect];
  

JSON Requirements for Text Chat Signaling

The JSON used when using the OpenTok signaling API with the OpenTok Text Chat component describes the information used when submitting a chat message. This information includes the date, chat message text, sender alias, and sender ID. The JSON is formatted as shown in this example:

// var type = "text-chat"

{
    "sentOn" : 1462396461923.305,
    "text" : "Hi",
    "sender" : {
        "alias" : "Tokboxer",
        "id" : "16FEB40D-C09B-4491-A983-44677B7EBB3E"
    }
}

This formatted JSON is converted to a string, which is submitted to the OpenTok signaling API. For more information, see:

• Signaling - JavaScript
• Signaling - iOS
• Signaling - Android

For testing text chat, we include a simple web app to make it easier: Browser-Demo-TextChat. Simply open it and replace the corresponding API Key, Session ID, and Token values. Then save and load it to the browser.

Annotation sample code

The OTAnnotationScrollView class is the backbone of the annotation features in this Sample.

self.annotationView = [[OTAnnotationScrollView alloc] init];
self.annotationView.frame = <# desired frame #>;
[self.annotationView initializeToolbarView];
self.annotationView.toolbarView.frame = <# desired frame #>;

If you would like to be annotated on either the entire screen or a specified portion of the screen:

self.annotator = [[OTAnnotator alloc] init];
[self.annotator connectForReceivingAnnotationWithSize:<# desired size #>
                                    completionHandler:^(OTAnnotationSignal signal, NSError *error) {
                                        if (signal == OTAnnotationSessionDidConnect){
                                            self.annotator.annotationScrollView.frame = self.view.bounds;
                                            [self.view addSubview:self.annotator.annotationScrollView];
                                        }
                                    }];

self.annotator.dataReceivingHandler = ^(NSArray *data) {
    NSLog(@"%@", data);
};

If you would like to annotate on a remote client's screen:

self.annotator = [[OTAnnotator alloc] init];
[self.annotator connectForSendingAnnotationWithSize:self.sharer.subscriberView.frame.size
                                completionHandler:^(OTAnnotationSignal signal, NSError *error) {

                                    if (signal == OTAnnotationSessionDidConnect){

                                        // configure annotation view
                                        self.annotator.annotationScrollView.frame = self.view.bounds;
                                        [self.view addSubview:self.annotator.annotationScrollView];

                                        // self.sharer.subscriberView is the screen shared from a remote client.
                                        // It does not make sense to `connectForSendingAnnotationWithSize` if you don't receive a screen sharing.
                                        [self.annotator.annotationScrollView addContentView:self.sharer.subscriberView];

                                        // configure annotation feature
                                        self.annotator.annotationScrollView.annotatable = YES;
                                        self.annotator.annotationScrollView.annotationView.currentAnnotatable = [OTAnnotationPath pathWithStrokeColor:[UIColor yellowColor]];
                                    }
                                }];

self.annotator.dataSendingHandler = ^(NSArray *data, NSError *error) {
    NSLog(@"%@", data);
};

Class design

The following classes represent the software design for the OpenTok Annotations Accelerator Pack.

Class	Description
OTAnnotator	The core component for enabling remote annotation across devices and platforms.
OTAnnotationScrollView	Provides essentials components for annotating on either the entire screen or a specified portion of the screen.
OTAnnotationToolbarView	A convenient annotation toolbar that is optionally available for your development. As an alternative, you can create your own toolbar using OTAnnotationScrollView.
OTFullScreenAnnotationViewController	A convenient view controller enables you to annotate the whole screen immediately.

3rd Party Libraries

• LHToolbar

Sample Apps that uses the Core

The following sample apps use Accelerator Core:

• Accelerator Sample Apps

The accelerator and sample app access the OpenTok session through the Accelerator Session Pack layer, which allows them to share a single OpenTok session:

[architecture](./accpackarch.png)

On the Android and iOS mobile platforms, when you try to set a listener (Android) or delegate (iOS), it is not normally possible to set multiple listeners or delegates for the same event. For example, on these mobile platforms you can only set one OpenTok signal listener. The Common Accelerator Session Pack, however, allows you to set up several listeners for the same event.

Obtaining OpenTok Credentials

To use OpenTok's framework you need a Session ID, a Token, and an API Key. You can get these values at the OpenTok Developer Dashboard . For production deployment, you must generate the Session ID and Token values using one of the OpenTok Server SDKs.

Development and Contributing

Interested in contributing? We :heart: pull requests! See the [Contribution](CONTRIBUTING.md) guidelines.

Getting Help

We love to hear from you so if you have questions, comments or find a bug in the project, let us know! You can either:

• Open an issue on this repository
• See https://support.tokbox.com/ for support options
• Tweet at us! We're @VonageDev on Twitter
• Or join the Vonage Developer Community Slack

Further Reading

• Check out the Developer Documentation at https://tokbox.com/developer/