How I Built A Simple One To One Video Chat Application

I love being a developer. It gives us freedom to create a lot of exciting things. Of course there is a lot of learning involved before we can build the simplest thing as because we are developers not magicians. Yes! for some people you will seem like a magician when they see what you have built and they have no clue about how. They will be the most beautiful moments for a developer when some one appreciates your work and simply excited about it.

Coming to the application, When i was about to start working on this, i thought it would be simple. But it was not. The worst of those is that the application works fine in local setup but when we actually deploy the application to server, comes the unexpected.

The building blocks:

1. Laravel
2. Vue
3. Web Sockets(Laravel Websockets)
4. Twilio Video
5. Laravel Echo

Before i go into technical details, my goal was to build a working prototype. So i didn’t concentrate on code organisation and optimisation. If any of you experts see my code, please excuse me. So these are the features of the application.

1. Basic signup and login
2. My profile
3. Real time text chat
4. Video/Audio

Basic Signup and Login:

Laravel is like a Swiss army knife. With a lot of awesome and useful packages built by the large community, One can build a large variety of applications easily. Laravel make it very easy to add authentication for your application. With just running two commands in a fresh installation, it will give you all the signup and login logic including UI. Laravel ships with Vue.js another awesome thing which makes working with Laravel even more fun.

composer require laravel/ui

php artisan ui vue — auth

My Profile:

I could have added more into this, then again as it is intended to be a prototype, I have only added the necessary items. From my profile page an user can update his name and set the preferred language. So that the text messages will be translated into the preferred language with the help of Google Translate API.

Real Time Text Chat:

Well, this took most of the building blocks into account in order to work. Websockets are needed for this to work. I have used Laravel Websockets, a pusher replacement, which you can host on your own server. You can follow the instructions mentioned there in repo for installation, setup and more information. We also need the Laravel Echo in the front-end to subscribe and manage the channels. The websocket server can be started with the following command.

php artisan websockets:serve

When you host the application in a server, you need to run the websocket server with the help of Supervisor. The configuration can be similar to this.

[program:laravel-worker]
process_name=%(program_name)s_%(process_num)02d
command=php /home/forge/app.com/artisan websockets:start
autostart=true
autorestart=true
user=www-data
numprocs=1
redirect_stderr=true
stdout_logfile=/home/forge/app.com/websockets.log
 

Once the websocket server is running we need to subscribe to some private and presence channels to listen for certain events like when ever some one from the friends list sent a text message. The following diagram will explain the flow.

Text Message Flow

There is also a typing feature that appears for recipient when the sender is typing some message. When ever someone from the friends list is online and when someone send a new message notifications/indications are also there. Don’t forget to add the path to your credentials json file for you google service account and project id in the .env file.

GOOGLE_APPLICATION_CREDENTIALS=””
GOOGLE_PROJECT_ID=”"

Video/Audio:

At first i have used the simple-peer library which is a wrapper around webRTC library. With the STUN method, the video transmission was working when both the users/clients are in the same network. But things turned out bad, when i tested with clients from different networks. In the symmetric NAT cases we needed the TURN servers in order for the video transmission to work. I came across Twilio Programmable Video which offered flexibility at an affordable price. Twilio video offers Peer-To-Peer, Small Group and Group(Max upto 50 members) room options. Peer-To-Peer is based on the webRTC which is ideal for upto 4 members per room. And I have used the Peer-To-Peer room option in this application as only two users will be involved in a call. You can signup for Twilio using the following link: Signup For Twilio . Twilio will give you 15 USD of promotional balance which will be useful to test out the Video feature. You can read more about the Twilio Video Here. You need to fill the values for these variables in the .env file to be able to use the Twilio Video.

TWILLIO_ACCOUNT_ID=

TWILLIO_AUTH_TOKEN=

TWILIO_ACCOUNT_SID =

TWILIO_API_KEY_SID =

TWILIO_API_KEY_SECRET =

The TWILLIO_ACCOUNT_ID and TWILLIO_AUTH_TOEKN can found at the console page of your account. In order to generate the TWILIO_ACCOUNT_SID, TWILIO_API_KEY_SID and TWILIO_API_KEY_SECRET you can go to https://www.twilio.com/console/video/project/api-keys

Github link: https://github.com/harishdurga/laravel-video-chat

Note: if you are using the application with other that localhost you need and SSL installed in order to gain access to the user’s camera and microphone.

As this is my first article I am not clear at explaining lot of things. But feel free to ask your questions in the comments section. Though i am not an expert, i will try my best to answer the queries.