How to build a production ready 1:1 video conferencing application in 15 minutes

Introduction

I might be a bit late to the party as I was away from the real-time communication world when it was most relevant (pandemic time). I was exploring product development in the retail/fashion industry for a year and thoroughly enjoyed acquiring new ideas, processes, and skills.

Objective

In this blog, I will try to show you how to build a “production ready” 1:1 video conferencing application within 15 minutes. Even if you don’t manage to complete the “development” in 15 minutes, I hope you would enjoy building your first production ready video conferencing application.

Environment

I am using the following environment.

1. Computer /OS— MacBook Pro with Big Sur
2. Browser — Chrome 89
3. Code Editor — Sublime text editor
4. A Vonage account — for video APIs — create one for free here (and stay signed in)
5. A Heroku account — for authentication server — create one for free here ( and stay signed in)

Getting started

Please follow the steps below for a smooth experience.

Step1

I will be using Vonage video APIs for building this video application.

1. Login to Vonage Video API account.
2. Give a name to your account.
3. Create a project — (I am using chemmagate.eu)
4. Select Vonage Video API (not the embedding one, that’s too easy :))
5. Make a note of the API Key and Secret.

Step 2

1. Open a terminal in your Mac.
2. Create a folder for your project and create the following subfolders for JS and CSS

Folder structure of your video conferencing website

3. Commands for users who are new to UNIX

4. Copy the following code to index.html, this would add the OpenTok JS lib to your HTML page and link to CSS and JS.

Breakdown of index.html

5. Copy the following code to app.js for authenticating with OpenTok server and creating a publisher (one who sends the video) & subscriber (one who receives the video).

Breakdown of app.js

6. Copy the following code to app.css for styling your video website

Step 3

We will now deploy the authentication server for getting the OpenTok credentials.

1. Click the link here ( make sure you are signed in your Heroku account)to create the authentication server.

2. Give a name to your authentication server and choose either US or Europe as location.

3. Go to your project in your Vonage account by clicking on the left panel to access the API Key and Secret.

4. Copy the API Key and Secret.

Where to find the API Key and Secret

5. Enter the API Key and Secret in Heroku app config.

TokBox credentials in Heroku

6. Deploy the app and you are done :)

7. Important : Copy your server URL and replace it in the app.js file

Step 4

1. Double click on the index. html file to open it in the browser, allow necessary permissions for camera and mic.
2. Open the file in another browser or in incognito mode and you should see yourself :)

1. Note: If you get CORS errors then deploy your website in public domain and access the main page (index. html) again

Thanks

I hope you enjoyed this little tutorial :) I can write a blog about creating a video application in Android or iOS if there is enough interest.

Stay safe and stay healthy!

Reference — https://tokbox.com/developer/tutorials/