Overview

This document intends for vidyo.io beginner. You can have the knowledge for building simple video chat application.  If you have developed your application on other company solution and VidyoWorks API, you will experience how you can more easily develop video chat application than other company solution and VidyoWorks API.  

Required software

  • Xcode
  • VideyoClientIOS framework

              Download the IOS PACKAGE from https://developer.vidyo.io/packages

              Copy the VidyoClientIOS.framework in IOS PACKAGE to your project folder.

Create the new project

Xcode project

Open the Xcode and click “Create a new Xcode project” menu.

We click “Single View Application” item. 

This project name defines “VidyoIODemo”. We should set the appropriate value on the Team, Organization name, Organization Identify. We develop this application with Objective-C as language.

  1. Create a New Folder for this project and name New Folder “VidyoIODemo”.
  2. Set Deployment Target to iOS 8 for backwards compatibility. And we add vidyo.io framework in vidyoIODemo project. Click “+” icon on Embedded Binaries item.
  3. Click “Add Other..” button.
  4. Select “VidyoClientIOS.framework” file and click Open button.
  5. Select “Create folder references” and click “Finish” button.

Note   You have to download IOS PACKAGE from https://vidyo.io and copy “VidyoClientIOS.framework “ file in this package to vidyoIODemo project folder.  

IOS PACKAGE folder                                                   vidyoIODemo project folder 

 


Set Build Settings

Update some items on Build Settings.

Set the entitlement file for Code signing. It's going to be parallel to this project folder and file name is VidyoIODemo.entitlements. ( Input “$(PROJECT_DIR)/../ VidyoIODemo.entitlements”)


Note   We have to set ”Keychain Access Groups” in VidyoIODemo.entitlements. One is “VidyoLicense”. Another is App ID.


 

Update some search paths. Framework Search Paths is “$(PROJECT_DIR)/../”. We set Header Search Paths to the header path. Headers are located within the framework.  This path is “$(PROJECT_DIR)/../VidyoClientIOS.framework/Headers”.

info.plist

Update the info.plist file. Add two privacy settings. For camera call, we add “Privacy - Camera Usage Description” and set “video chat” as value. For microphone call, we add “Privacy - Microphone Usage Description” and set “video chat” as value.

UI Building

UI for video render

Start building UI that will render video in a simple UI View.

We click Main.storyboard and input “uiview” in filter. View object is displayed. And we layout it on UI.

Button UI

We layout two buttons. We Input “button” in filter. Xcode will display Button object. And we put it underneath the UI and input “Connect”. One more, we put another button object on right side of UI and input “Disconnect”. Next we click the green cycle.

Set “Reset to Suggested Constraints” in pull down menu for locking in those UI elements.

Implement source code

Define interfaces

Open the header file (ViewController.h) for linking those UI elements to code.

Set view for video render

We connect View object which video will be rendered to header file and name “videoView”.

Set Button

Next, we connect Button object to header file. And we select “Action” in Connection item and name “Connect”.

We connect another Button object to header file. And we select “Action” in Connection item and name “Disconnect”.

Our application needs to call VidyoConnector under Objective-C. So we open ViewController.h.

Next, we import “Lmi/VidyoClient/VidyoConnector_Objc.h”. And we add “<IConnect>” for inheriting an interface called “IConnect”

ViewController.h Expand source

Implement the video chat code

ViewDidLoad Function

Open “ViewController.m” and we add a member of “*c” which is variable type Connector pointer. And we initialize Vidyo Client Library in viewDidLoad function. we Input “[VidyoClientConnector Initialize];”.

Next, we call “c = [Connector alloc]” for constructing the Connector object. This first argument will be a reference to the video view object. We set ViewStyle argument to ” CONNECTORVIEWSTYLE_Default” and set RemoteParticipants argument to 16 as max remote participants. We set LogFileFilter and LogFileName arguments to blank for demo application. UserData argument  is not retrieved. So this will be 0. 

ViewController.m Expand source

viewDIdAppear function

Implement “viewDidAppear method. At first, we call base class which is “[super viewDidAppear:animated];”.

We call ShowViewAt method in Connector object. We set the reference to the videoView Object in the first argument and set X and Y argument to 0 offset. We set Width argument to “videoView.frame.size.width” and Height argument to  “videoView.frame.size.height”.

ViewController.m Expand source

Connect function

Implement “Connect” Button function. This method is called by pushing “Connect” button. We call Connect method of Connector object in this method. At the first argument is set “prod.vidyo.io as host. We set the next argument to the Token that is generated previously.  In the real applications case, back-end server will generate a Token.

(Token: https://developer.vidyo.io/documentation/4-1-14-10/getting-started#Tokens)

We set DisplayName argument to “DemoUser” and ResourceId argument to “DemoRoom”. This application connects to “DemoRoom” when the Connect method is executed. The Connect argument is expecting an IConnect object. We have already inherited @interface from IConnect object. So we can just set this argument to “self”

ViewController.m Expand source

Disconnect method will call disconnect method of Connector object. 

IConnect interface

Implement three method of IConnect interface. The first is OnSuccess method that is called when the connection is successful. The second is OnDisconnect method that is called when the connection is disconnected for any reason. The last is OnFailure method that is called when the connection has failed.

We need to implement nothing code inside of these methods for this demo. But in the real application, we need to implement something code for response to those three methods.

ViewController.m Expand source

Build and Execute the video chat application

Set the target to “Generic iOS Device” and then we start the build process (product->Build menu). We confirm that the build process has succeeded. And we load it on to an iOS device. This application will be started on iOS device. Push “Connect” button and confirm start a video session.  And push “Disconnect” button and end a video session.

Reference

Video Clip - Vidyo.io | Build an iOS Video Chat App in Minutes

https://www.youtube.com/watch?v=0YqTC4FLWcc

Sample Code

This sample code is used in this document. But you have to do two items previously.

  1.  Copy the VidyoClientIOS.framework into this sample code folder.
  2.  Set a value to token in ViewController.m

 

https://github.com/Vidyo/helloworld-vidyo.io-ios

Was this article helpful?
0 out of 1 found this helpful

0 Comments

Follow
Please sign in to leave a comment.