Integrating WebRTC video calling into any website / application

WebRTC is a very popular technology these days to integrate video calling in to any kind application. It is primarily very helpful for websites / applications who provide online teaching / learning services, doctor / patient video consultation services. It also is very helpful in video customer support applications for a real time video support agent / customer conversations where the agent can see things in real time in the customer's end and can take quick decisions. A very good example use case would motor insurance claims where the agent can see in real time the damage to vehicles and estimate in real time the amount of damage to quicken up the claim settlement process. There can be many other use cases as well. In this post, we are going to explore various strategies to build a scalable peer to peer (p2p) video calling system which can be integrated to any website/application with ease. Building a scalable multi party video conferencing / live streaming applications are out of scope of this post.

Concurrency & state-fullness

Understanding concurrency & state-fullness is important before moving on because these 2 buzz words makes developing a WebRTC signaling server more complex.

• Concurrency: The no of user using you app simultaneously, not one after another. Example: If there are 1000 p2p video calls currently going on in your website, then there are 2000 concurrent users connected to the signalling server used by your website / application.

• State-fullness: State-fullness is about maintaining a socket connection through the lifetime of a connection(from the time it connected to the signalling server for the 1st time until it disconnects from it). From the above example, if 1000 p2p video calls of 1 hour each, are currently going on your website, then the signalling server has to maintain the connection for whole 1 hour without disconnecting even for 1 second! Maintaining a consistent connection for 1 hour though seems easy, is actually not a very easy thing to achieve considering that a network can break any time due to any random reason. As soon as the network breaks, different strategies like a timeout based re-connection attempts is used to maintain the connection without letting the user know. There other issues with maintaining a socket connection for so long time. For the above mentioned reasons, state-fullness adds a lot of complexity to any application.

Building a simple WebRTC video calling application involves multiple steps with skill-set requirement of more than one technology. Building a scalable WebRTC application is even more complex which has a diversified skill-set requirement. A certain amount of expertise in stateful application development(socket programming) with WebRTC is necessary to build a scalable WebRTC video calling app. Let's first understand the building blocks of a scalable WebRTC app before proceeding to build it.

The building blocks are

• A signalling server, Nodejs

• A signalling protocol, WebSockets

• A in-memory data store, JS hash maps

• A client side application capable of running inside a browser, HTML,CSS & JS

With the above ingredients, we can build a scalable WebRTC video calling app which can be used by 100s / 1000s of simultaneous/concurrent users. The first 3 are needed to handle the server side things of our WebRTC application. The combined form of all of these is known as a signalling server. It is not mandatory that we need to build our own signalling server to build a WebRTC app from scratch. There are a couple of capable (open source!)signalling servers out there which can be used to build a WebRTC video calling application. After a careful consideration of all of them, if none of them satisfy your requirements, you can choose to build one from scratch. But keep in mind that building a WebRTC signalling server from scratch is not a very easy thing to do and you exactly need to know what and how you intend to build your signalling server before starting off on that journey.

Here are the 3 open source WebRTC signalling servers currently available which you can use to integrate video calling in to your application / website. They are

• simple peer

• peerjs

• cignal

Lets explore the strength / weakness of each of them.

simple peer: It is a stable signalling server used by many applications today. It has been started in the early days of WebRTC and matured with time. As it was started in the early days, it has some old style implementations for WebRTC still there which were needed in the early days but may not be needed today. Those extra things doesn't create any troubles though.

strength:

• An matured signalling server with developer ecosystem

• A good user base

• Covers more use case (Both in browser / nodejs)

weakness:

• There is no official option for paid support

• No official alternative to pay for custom development

• Need some level of WebRTC understanding to work with it(getUserMedia)

peerjs: It is as old as WebRTC itself. As it also is there from the early days of WebRTC. All it's other characteristics are very similar to simple-peer along with some additional points to be considered. It has changed maintainer hands couple of time since it's inception and was not maintained very well until 1 - 2 years ago.

strength:

• An matured signalling server

• A good user base

weakness:

• There is no official option for paid support

• No official alternative to pay for custom development

• Need some level of WebRTC understanding to work with it(getUserMedia)

cignal: It is the latest signalling server made open source in the month of September 2022 as a community edition of a fully featured commercial WebRTC signalling server made for enterprise usage. It has the necessary features for scaling and it has been designed for developers with zero knowledge of WebRTC intending to integrate it with other applications/websites. The core philosophy of cignal is to abstract away all things related WebRTC and expose a very easy to use APIs to integrate video calling capabilities to any other application / Website.

strength:

• Latest signalling server with inbuilt scalability (up to 1000s of concurrent users!)

• Community edition of fully featured commercial WebRTC signalling server

• Official option for paid support

• Official option for custom development

weakness:

• Very new to the open source scenario(1st release on September 2022)

• The open source version yet to be used by many

Now we are going to explore how to build a video calling app using cignal as it is the latest one with scalability and easy to integrate it into any application / website. You should be able to get examples for the other 2 by searching over google or github for example projects.

Prerequisites: Basic web development experience(HTML,CSS & JS). If you don't know what these are, then you shouldn't be doing this by yourself. It is better to hire a web developer, who can do the job for you.

Steps:

• Go to the cignal github repo and clone it in your local machine, using the below command.

git clone https://github.com/sauravkp/cignal.git

• Follow the steps as mentioned in the readme file to run the app in your localhost. If you followed all the steps correctly, you can now have a video call between any two devices in the same network where the application is running.

• Follow the steps mentioned in the hosting section of the readme file to host your application with a cloud service provider like digitalocean. You can use the same steps to host it in some other cloud service provider as well. Keep in mind that you need a domain name and ssl certificate like any other regular web application to host the cignal signaling server.

• As cignal comes with a default minimalistic UI, you can choose to enhance it or replace it with your own UI. The cignal client triggers all the necessary events to manage pre-call, in-call, and post-call changes. All other necessary data points are mentioned in the readme document for extending the existing capabilities for other functionalities like providing a chat functionality.

For any issues/bugs in cignal, you can send a mail to support@centedge.io for support.

In case you want paid support / custom development using cignal, feel free to reach us out at hello@centedge.io.

This is the community version of Cp2p, a fully featured production grade commercial video calling application developed by Centedge for it's customers with edu-tech, health-tech, customer support tech related use cases. This community version has been made open source so that the development teams get a solid foundation for building their video calling system without having to deal with deep WebRTC related things.

If you have requirement for a multiparty video conferencing solution / live streaming solution, do take a look at CWLB. It is a general purpose WebRTC load balancer with scalable signalling server, scalable media server, and scalable recording server integrated into it. You can easily host gmeet like video conferences upto(50 participants) and large scale private live streaming events (up to 500 participants) with detailed call analytics.

Feel free to schedule a 30 mins discussion with a video solution design expert to get a free assessment of your use case using the Talk to expert button available here.