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.
- 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
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.
- Create a New Folder for this project and name New Folder “VidyoIODemo”.
- Set Deployment Target to iOS 8 for backwards compatibility. And we add vidyo.io framework in vidyoIODemo project. Click “+” icon on Embedded Binaries item.
- Click “Add Other..” button.
- Select “VidyoClientIOS.framework” file and click Open button.
- 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”.
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 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.
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
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”.
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”
Implement the video chat code
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.
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”.
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.
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”
Disconnect method will call disconnect method of Connector object.
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.
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.
Video Clip - Vidyo.io | Build an iOS Video Chat App in Minutes
This sample code is used in this document. But you have to do two items previously.
- Copy the VidyoClientIOS.framework into this sample code folder.
- Set a value to token in ViewController.m