Embed real-time video chat in your Xamarin Forms App using Vidyo.io

In this post, we will implement a video chat feature within your Xamarin Forms App using Vidyo.io Chat API.

Table of contents:

  • Brief Introduction about Vidyo.io
  • Development Setup
  • Actual Development

Introduction

Let’s have a short introduction about Vidyo.io. The vidyo.io platform provides high quality video with strong error resilience so you can build WebRTC, mobile, and native multiparty video chat apps.

Vidyo.io has cross platform support, they have consistent APIs and SDKs to rapdily build your video chat app on all major platforms. It has easy to use API, as you can get multiparty video chat embedded in your app in minutes. Vidyo.io also supports Xamarin Forms.

Vidyo.io offers 30-days free trial and/or free 6500 participant minutes.

Development Setup

To get started with the development, you need to do some account management with Vidyo.io:

  1. Sign Up for free trial (https://developer.vidyo.io/signup)
  2. Collect your Application ID and Developer API Key (https://developer.vidyo.io/#/dashboard/keys)

Prerequisite

During the development on this post, I’m using the following tools/libraries:

  • IDE: Visual Studio 2017 Professional
  • Android Version (Target Framework): Android 9.0
  • Android Version (Minimum OS Version): Android 6.0
  • iOS Version (Minimum OS Version): 10.0
  • Android SDK Platform-Tools: 28.0.2
  • Android SDK Build-Tools: 28.0.3
  • Xamarin.Android SDK: 9.1.7.0
  • Xamarin.iOS and Xamarin.Mac SDK: 12.4.0.64
  • Xamarin Forms: 4.1.0

Actual Development

There are two option to embed Vidyo.io to your Xamarin Forms App. At your own convenience, you can follow either of the following:

  1. The actual Vidyo.io xamarin forms connector project found on Vidyo.io Github.
  2. Or used the nuget library for Vidyo.io that I have made.

First Option (Vidyo.io Xamarin connector)

You can visit the Vidyo.io Xamarin Forms Connector project. In the README.md section, it is comprehensively explain how to integrate it to your Xamarin Forms App. But I would like to breakdown to you how you will embed the native libraries from each platform.

Xamarin.Android

Your project structure for Xamarin,Android should be like the one in the image above after acquiring and move the VidyoClient-AndroidSDK to your project.

To use the VidyoClient SDK in a Xamarin.Android app, perform the following steps:

  • In the solution toolbar, find “Show All Files” option and switch it.
  • In the solution window, expand grayed “VidyoClient-AndroidSDK” folder to “include > csharp”, right-click on “csharp” folder and choose “Include in Project” option.
  • In the solution window, expand grayed “VidyoClient-AndroidSDK” folder to “lib > android”, right-click on “android” folder and choose “Include in Project” option.
  • In the solution window, expand “android” folder, right-click on “vidyoclient.jar” and choose “Properties”.
  • In that “Properties” window, go to the “Build action” field and populate it with “AndroidJavaLibrary”.
  • In the expanded “android” folder under each of the 4 architecture folders (arm64-v8a, armeabi-v7a, x86, x86_64), right-click “libVidyoClient.so”; and choose “Properties”.
  • In that “Properties” window, go to the “Build action” field and populate it with “AndroidNativeLibrary”.

Xamarin.iOS

Your project structure for Xamarin.iOS should be like the one in the image above after acquiring and move the VidyoClient-iOSSDK to your project.

To use the VidyoClient SDK in a Xamarin.iOS app, perform the following steps:

  • In the solution toolbar, find “Show All Files” option and select it.
  • In the solution window, expand grayed “VidyoClient-iOSSDK” folder to “include > csharp”, right-click on “csharp” folder and choose “Include in Project” option.
  • In the solution window, right-click on the Xamarin.iOS project and select “Add Native Reference” > “Add Native Static Library”
  • In the file-selection dialog, browse to project subdirectory“VidyoClient-iOSSDK/lib/ios”
  • From that directory, add one by one all 6 static library files lib*.a. You have to do it 6 times as multi-include may not be allowed.
  • In the solution window, right-click on the Xamarin.iOS project and select “Add Native Reference” > “Add Native Framework Library”
  • In the folder-selection dialog, browse to project subdirectory“VidyoClient-iOSSDK/lib/ios”
  • Select VPX.framework folder. Click OK.

Second Option

If you choose the second option, you can follow the Xamarin Forms Vidyo.io Sample Project that I have made here.

If you have any questions, don’t hesitate to comment down below or file an issue to the sample github project .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s