How we built a video conferencing app in hours!

A step-by-step guide to building your own video conferencing app!

QUICK SUMMARY: In this article, Aydan Kirk will tell you the pros and cons of various commercial and open-source video conferencing solutions and step-by-step instructions of building your own. By the end, you’ll have your own fully-featured video conferencing app which you can customize and brand to your needs.

Image by Alexandra_Koch from Pixabay

The pandemic has made all of us move indoors and we are no exception. As we transitioned to remote work, video conferencing has become indispensable for our day to day work.

We used some of the popular conferencing apps like Zoom, Google Meet, Microsoft Teams, and WebEx when things were normal. However, as we started relying more and more on video conferencing for our day-to-day work, custom requirements started emerging which were not met by these tools.This forced us to look for options to build our own conferencing solution which can be integrated with our website, CRM, and employee management system.

This article describes how we went through various commercial and open source options & how we created our own video conferencing solution which turned out to be far better than any other solutions.

Requirements

Here’s what we needed:

• HD video conferencing that works smoothly even with a large group of participants
• Multiple Screen Sharing
• Group chat and admin controls
• API-driven so that we can integrate it with our Employee Management System
• A simple and easy UI without too much of a learning curve
• Guaranteed security and privacy

Popular Choices — Zoom Vs Teams Vs Meet Vs WebEx

We first evaluated some of the more popular choices like Zoom, Google Meet, Webex, etc for our needs. Zoom appeared to be the natural choice as many employees were already familiar with it. However, it turned out that Zoom does not offer HD calls for more than two participants. This is from Zoom website

For the time being, standard video, not HD video, will be activated when 3 or more participants join a group meeting. HD video (720p) will be activated for 2 participants ….

There were some security concerns too. Zoom was also expensive and we could not integrate it with our website. We just needed something as good or better and a tighter integration with our system.

Microsoft Teams appeared to be one of the popular choices. But, it was tightly integrated with Office365. So, we were not too keen on using it as we did not use a whole lot of Microsoft’s enterprise tools. We also tried Google Meet, Cisco Webex, and other solutions, which did not completely meet our expectations in terms of the requirements we had.

Open Source Choices — Jitsi vs Kurento vs Janus

Since popular choices did not meet our requirements, we started exploring open-source alternatives. This is where we spent over a month deploying and trying various open-source solutions. Jitsi, the most popular one turned out to be a CPU hog and couldn’t sustain load especially with HD calls. We felt Jitsi had a lot of features but the architectural choice made it heavy and complex. We also looked at Kurento. However, it is no longer in active development after being bought over by Twilio and hence was ruled out. Another open-source option that we considered was Janus, which we (and many users on their Google group) found to be buggy, crashing and unstable.

In all the above choices, Jitsi turned out to be the most stable. Although the inability to cope with high load especially with the HD calls was a big concern, we almost decided to go with it till we got an email invite from mesibo to try their new open-source conferencing app. This changed the course completely.

We tried their open-source video conferencing demo which was quite impressive for most parts — some interesting features like HD calling without limitations, Multiple screen sharing, Talk detection, etc. caught our eye. There were some rough UI edges but being an open-source app, we could fix that. Although it’s a new platform, it’s coming from mesibo was a big assurance. We were already using mesibo chat APIs for our clients. It was a familiar territory and the Open source video conferencing API was easy to use. We suddenly found ourselves walking in the cake after spending months evaluating other options and struggling with them.

It’s Coding Time

Since everything we wanted was available in the demo, all that was required was to download the source code from GitHub, deploy and try, and then modify it to suit our website.

This section describes the entire process step-by-step which you can follow to create your own conferencing app. Before we move further, we suggest that you first try mesibo conferencing app so you know what you are doing. Below are some of the screenshots from the demo.

Download Source Code

Download the conferencing app source code from GitHub.

$ git clone https://github.com/mesibo/conferencing.git

You will see two folders. Open the live-demo folder. You will find the complete source code for the conferencing app here — for both backend and frontend.

Set up Database

The conferencing app requires a database to store all the users, conference rooms, and participants. The backend code comes with a SQL file that you can use to create a database or use any existing database if you wish.

The database schema is available in an SQL file mysql-schema.sql. Run the following command to create the database schema for the backend.

$ cd backend
$ mysql -h <host> -u <username> -p <password> <dbname> < mysql-schema.sql

Set up REST API

The next step is to set up REST APIs which will be used by the frontend for login, setting up conference rooms, participants joining conferences, etc. The REST API code is available in the backend folder which you need to host on your webserver. If you are not familiar with hosting a web server, refer to any of the excellent tutorials available online, with step-by-step instructions on hosting a web server backend.

Before you can go live with your REST API, you need to configure the following:

1. Database Credentials
2. mesibo App Token — since the conferencing app uses mesibo API, you need to sign up with mesibo and get an App token. You can sign-up here — https://mesibo.com/console. Once you signup and login, create an application that will give you a mesibo App token. Refer a tutorial here if you need help
3. [OPTIONAL] Google Captcha Key

Now edit config.php and enter your database credentials & mesibo app token. If you plan to use Captcha, you need to get Google Captcha Key as well and configure it here.

<?php
$db_host = “dbhost”;
$db_name = “confdemo”; // the name of the database to connect to
$db_user = “confuser”; // the username to connect with
$db_pass = “confpass”; // the user’s password
// OBTAINED BY SIGNING AT mesibo.com
$apptoken = “<get yours from https://mesibo.com/console >”;
// google recaptcha secret [optional]
$captcha_secret = ‘’;

Mesibo Console — Get App Token

Once the REST API is live, you need to set up the frontend so that it can access the REST API.

Set up Frontend

The frontend is easy to understand — it is written in HTML, JavaScript, and AngularJS. It has both; a desktop and a mobile version. In the most likelihood, this is the only code you need to change for any customization, branding, etc.

Before you go live, edit web/mesibo/config.js and set the REST API URL which you have set up in the previous step:

const MESIBO_API_BACKEND = ‘https://conference.example.com/api.php';

That’s it! You have just created your own conferencing app! Host it on your web server and open index.html from your browser.

There is no restrictive license or exclusive branding restriction. We modified some parts of the index.html and login.html file and used our own company colors, banners, and logo. We have also removed the email-based login auth and replaced it with our company user-id.

To be continued..

We are very pleased with the solution we built and deployed. One problem we had was that there was no native mobile app available. We also reached out to mesibo regarding this and we were informed that Android and iOS native API was to be released shortly. Nevertheless, we have started developing a hybrid app with mesibo JavaScript SDK and React Native which we plan to deploy on Android & iOS. More on this in the upcoming post.

Everything is running smoothly so far. But, we will watch how it goes in the long run. We will soon write a follow-up article to this with usage updates and a more detailed breakdown of the features we are developing.

Please follow me to get notified on the follow-up article in this series.