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

4 Comments

Follow
  • 0
    Avatar
    Vishak Muthukumar

    I see a black rectangle when I click the Start button.

    I do not get my camera preview.

    I made sure I have

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

    in the AndroidManifest.xml.

    Is there anything I missed.
  • 0
    Avatar
    Marco Foi

    There is a chance last (or recent) version does not support Android 4.4. I am getting the same black screen in Android 4.4 while exact same code is working in Android 7.1.

  • 0
    Avatar
    Naveen Mukundan Ravindran

    Even im seeing a black rectangle instead of camera.. i have followed all the instructions and coded accordingly. I have executed with kitkat, nougat, and api 26 also. What to do?? Please help me

  • 0
    Avatar
    Marco Foi

    @Naveen: I suggest you to take a look at the sample in the Android SDK: https://static.vidyo.io/4.1.17.5/package/VidyoClient-AndroidSDK.zip

     It is definitely a bit more complete than this article but, please, note that it still does not properly handle runtime-permission requests.. ..so to make it work un Android 6+ you have to manually grant camera and mic permissions in your phone's settings->apps.

    If you run it on Android 5.0/5.1 will work flawlessly!

Please sign in to leave a comment.