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 by other company solution and VidyoWorks API, you will experience how you can more easily develop video chat application than others.

Required software

  • Android Studio
  • Android Package of Vidyo.io

          It can be downloaded from https://developer.vidyo.io/packages 

Getting Started

Create a new Android Studio Project

  1. Start Android Studio and click "Start a new Android Studio project"
  2. Set Application name and location 
  3. Select Minimum Android SDK
  4. The Vidyo.io SDK supports the Android 4.4+.
  5. Add an Empty Activity

Import the Android library

  1. Download the Android Package from https://developer.vidyo.io/packages
  2. This Package includes the Android library and a sample that can help developers to realize many features and start quickly.
  3. Copy all libraries into project libs directory: VidyoIODemo  app  "libs"

Develop the application

Configure Project

Add CAMERA and INTERNET permission in AndroidManifest.xml

Code Snippet:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />


Add source sets in the build.gradle file.

Code Snippet:
sourceSets {main { jniLibs.srcDirs = ['libs']}}

Design the UI

  1. Use "RelativeLayout" in the activity_main.xml.
  2. Change to Design View and remove "Hello World!" TextView.
  3. Add 3 Operation Buttons:
    START button with properties – Text: Start, onClick: Start
    CONNECT button with properties – Text: Connect, onClick: Connect
    DISCONNECT button with properties – Text: Disconnect, onClick: Disconnect
  4. Add Video Frame.
  5. Add the FrameLayout with properties – ID: videoFrame

Implement Source Code

  1. Import package of Vidyo.io library and add private member variable of VidyoConnector and FrameLayout.
  2. Initialize Vidyo Client.

Code Snippet:
Connector.SetApplicationUIContext(this); Connector.Initialize();
videoFrame = (FrameLayout) findViewById(R.id.videoFrame);

Implement Start method

Code Snippet:
public void Start(View v)  {    vc = new VidyoConnector(videoFrame,VidyoConnector.VidyoConnectorViewStyle.VIDYO_CONNECTORVIEWSTYLE_Default, 16, """", 0);
    vc.ShowViewAt(videoFrame, 0, 0, videoFrame.getWidth(),
    videoFrame.getHeight());

}

Implement Connect method 

Code Snippet:
public void Connect(View v) {

    String token =  "cHJvdmlzaW9uAGRlbW91c2VyX2IwOTZhNkA2OGY2MTMudmlkeW8uaW8ANjM2NjcxNjc5ODYAADI3NGEzZTUwZThkOTI2NmNlNzgyOTNmYmE2NDczYzM4NThjNGQ4OGYxMzc2MzY2MjU0ODRiMDIyZmZkMWEzY2ZmMzFkZDM0NzQ3ZjBhOGU5MTk2NjAyYzBiNGVmZDczMQ==";

    vc.Connect("prod.vidyo.io", token, "DemoUser""DemoRoom"this);

}

Get a token quickly

  1. Access to https://vidyo.io and login.
  2. Go to menu DEVELOPERS  Demo.
  3. Click "GENERATE LINK" to get a meeting link.

The meeting link is as below:

https://static.vidyo.io/latest/connector/VidyoConnector.html?host=prod.vidyo.io&resourceId=demoRoom&displayName=demoUser_90173&token=cHJvdmlzaW9uAGRlbW91c2VyX2YyZDYyZkA2OGY2MTMudmlkeW8uaW8ANjM2NjcxNjg5MzIAAGViMTMwODVmODhiZTFlYmU3MGRhNzcyZGIwOGZiZWY4YjZmNTg0YzQ5NGYwZjE4ZTNhOTA4ZGM0M2VkOThmMzUwNTBiMTBlZjBmNGI3ZTM0ZmMxNDk5ZGQ5NTM1OTM1Mg%3D%3

Note:
The "%3D" has to be replaced by "=" when use it in the code, because it is transformed from equal sign "=" as URL rule.

How to Generate a Token

Access to https://vidyo.io and login.
Go to menu DEVELOPERS  Documentation  "How to Generate a Token"

Implement Disconnect method

Code Snippet:
public void Disconnect(View v) { vc.Disconnect();}

Implement IConnect Interface

Code Snippet:
public void OnSuccess() {}

public void OnFailure(VidyoConnector.VidyoConnectorFailReason vidyoConnectorFailReason) {}

public void OnDisconnected(VidyoConnector.VidyoConnectorDisconnectReason vidyoConnectorDisconnectReason) {}


The connect listener can be register when vc.Connect(…) method is invoked, which need to implement the iConnect interface.

Build and Run the Application

At first, go to Android mobile's "Developer Options" and enable the "USB Debugging". 
And then connect mobile to the computer, which would be recognized by "Android Monitors" of Android Studio. 

  1. Click run button to execute application. 
  2. Click Start button and preview self.
  3. Click Connect button to join the meeting.
    Other participants can join meeting via above URL generated from Vidyo.io.
  4. Click Disconnect button to leave the meeting.

Note: Everyone has to join the meeting via the same resourceId.

Reference

Video Clip – Vidyo.io | Build an Android Video Chat App in Minutes
https://www.youtube.com/watch?v=tbT8EEw9wNw&t=1s

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

0 Comments

Follow
Please sign in to leave a comment.