My Own Video Conferencing … but How??

Ever wondered how Video Conference and Virtual Meets are made possible..?

Let’s start from a small example..

Consider you have to send your old trip photos to a friend. Now first you’ll pick out which photos you need to send. Then wrap in a nice envelope with your name and your friend’s address. Then you’ll give it to a post-service that will find your friend and deliver the envelope. After receiving your envelope, recipient will open that envelope, get nostalgia , and will reply you back following similar steps and service.
….and that’s how simple it is 😄

Now Connect like this:

For starting a Video Conference with a peer You want to send(offer) :
your video stream, audio stream and some required device info(like IP add.). You wrap these things in a special format known as SDP(Session Description Protocol).✉️

To get user’s video and audio, we will use WebRTC .(Web Real-Time Communication) is a technology which enables Web applications and sites to capture and stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary.

Now..Who will carry your letter?🤔

I no fly in rain !! kkreekk ..kkreekk

We need a signalling server for this. Signaling is the process of coordinating communication in order for a WebRTC application to set up a ‘call'. This signaling process needs a way for clients to pass messages back and forth.

That mechanism is not implemented by the WebRTC APIs: you need to build it yourself.💪 For this you can use any technology like Node.js, Django, or any other that support real time connecting socket.io .(even chrome web server will do)

Each peer(friend) connection is handled by a RTCPeerConnection object.
This object defines how the peer connection is set up and should contain information about the ICE servers to use.

RTCPeerConnection is the API used by WebRTC applications to create a connection between peers and communicate audio and video.

woah….that’s a lot of alien words…😵👽

To make it simple, think like this:
when you want to set a connection with a peer, you need to create a RTCPeerConnection object which will create an offer(letter) to be sent to your friend. That letter is session description including necessary info. Now you will send this offer to your friend via signalling server (to which your friend is also connected). After receiving the offer, he will also create a peerConnection object and create a answer in which he includes his required info. Before sending answer, he will set his remote description (i.e. your desc on his machine) accordingly and send the answer through the server.
Now you get his answer, you set your remote desc according to his answer.

Is that it….is it done 😃??.. umm no…but we’re close😁

climb is tough, but view from top is worth it..

ICE Candidates

Before two peers can communitcate using WebRTC, they need to exchange connectivity information. Since the network conditions can vary depending on a number of factors, an external service is usually used for discovering the possible candidates for connecting to a peer. This service is called ICE and is using either a STUN or a TURN server .

(You can use google’s or mozilla’s stun server for development but not recommended for production use)

You may think of this like a server to which your computer asks :
“hey server ! what’s my public IP address? ”
and you can add server’s response in your SDP to be sent to your friend enabling you to make a direct peer-to-peer connection.

Once a RTCPeerConnection object is created, the underlying framework uses the provided ICE servers to gather candidates for connectivity establishment (ICE candidates).

Once ICE candidates are being received, we should expect the state for our peer connection will eventually change to a connected state. To detect this, we add a listener to our RTC Peer Connection where we listen for Connection State Change events.

Source: Google Images

That’s it. Congrats 🎉🎉
You now know basics for developing your own Video Conference WebApp.

You Can add more features like screen-sharing, chats, etc using simple logic once you get familiar how sockets work and what all WebRTC has to offer.

Here’s what I made.. 😄

link: https://vision-connects.herokuapp.com/

Some Helpful Links To Start Developing:

1. Google Codelabs
2. WebRTC Org
3. Youtube
   a. WebRTC Ventures (Watch only till 6th part, only for concepts).
   b. Amir Eshaq (For Coding Hands-on)