<linearGradient id="sl-pl-stream-svg-grad01" linear-gradient(90deg, #ff8c59, #ffb37f 24%, #a3bf5f 49%, #7ca63a 75%, #527f32)
Integrating WebRTC video calling into any website / application

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

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

How WebRTC Signaling Simplifies Real-Time Communication

How WebRTC Signaling Simplifies Real-Time Communication

In today’s digital age, the demand for real-time communication has surged dramatically. From video conferencing tools to live streaming applications, efficient communication is more crucial than ever. WebRTC (Web Real-Time Communication) is a game-changer in this domain, allowing users to connect seamlessly with audio and video streaming. Central to WebRTC’s functionality is the signaling process, which streamlines the communication setup. This blog post will explore how WebRTC signaling simplifies real-time communication, making it approachable for developers and users alike.

WebRTC Signaling

WebRTC enables peer-to-peer connections directly between browsers, which means that users can communicate without needing an intermediary server for the media stream. However, establishing these connections requires a signaling process to enable the peers to discover each other and establish communication parameters.

Signaling is the initial exchange of information between participants. This includes details about the user’s media capabilities, network information, and connection initiation requests. WebRTC does not define a specific protocol for signaling, which allows developers the flexibility to choose and implement their own methods, whether it’s through WebSocket, HTTP, or other technologies.

A commonly used solution is the webrtc signaling server, which acts as a facilitator to establish and manage connections. It helps in exchanging session descriptions and network information, making the connection process more efficient.

The Role of Signaling in Communication

At its core, signaling accomplishes the following critical functions:

User Discovery: Signaling allows users to find each other. When one user wants to connect, they send a request to the signaling server, which informs the intended recipient of the connection attempt.

Session Description Protocol (SDP) Exchange: After discovering each other, both parties exchange SDP messages to negotiate the media parameters, like video codecs, audio codecs, and other capabilities. This exchange is essential to establish compatibility.

NAT Traversal: Most users are behind Network Address Translation (NAT) firewalls. The signaling process helps determine the most effective way to traverse these devices, ensuring smoother connections.

Connection Establishment: Once the negotiation is completed and NAT traversal techniques are applied, the actual peer-to-peer connection is established. The media then flows directly between clients, optimizing performance and reducing latency.

In essence, signaling serves as the backbone that allows WebRTC to work efficiently, simplifying the process for real-time communication.

What is the difference between STUN server and signaling server?

To understand how signaling fits into the WebRTC ecosystem, it’s important to distinguish between a signaling server and a STUN (Session Traversal Utilities for NAT) server.

A signaling server primarily handles the exchange of metadata, which includes user information, connection requests, SDP messages, and the management of signaling channels. Its primary purpose is to broach and manage the initial connection setup.

On the other hand, a STUN server is responsible for helping devices discover their public IP addresses and the type of NAT they are behind. When two devices want to connect directly, they can use the STUN server to facilitate connectivity information. The combination of these servers enhances connection reliability and efficacy.

High angle view of a STUN server in a data center

Advantages of WebRTC Signaling

The simplicity offered by WebRTC signaling comes with numerous advantages:

Flexibility

As mentioned, WebRTC does not impose a strict protocol for signaling, allowing developers to leverage various methodologies based on their application’s needs. Whether it’s using WebSocket for real-time messages or simple HTTP requests, developers have the freedom to choose the best fit for their projects.

Reduced Latency

Once the connection is established using the signaling method, media flows directly between peers. This peer-to-peer architecture minimizes latency significantly compared to traditional server-client models, improving the overall user experience.

Compatibility

Because WebRTC is designed to work across different devices and browsers, including Chrome, Firefox, and Safari, signaling methods can also be designed to support a wide array of devices, ensuring better accessibility and flexibility.

Security

WebRTC incorporates encryption for all data transmitted via peer-to-peer connections. Additionally, signaling servers can add layers of security by implementing authentication for users before allowing them to connect.

The combination of these advantages makes WebRTC signaling an essential tool for modern communication applications, enabling developers to create efficient, real-time experiences.

Eye-level view of a modern office setup with WebRTC application running

Use Cases for WebRTC Signaling

Understanding the practical applications of WebRTC signaling can further demonstrate its utility. Here are several common use cases:

Video Conferencing

Platforms like Zoom, Microsoft Teams, and Google Meet utilize WebRTC technology to simplify video conferencing. Through effective signaling, they enable users to set up meetings quickly without extensive configuration.

Live Streaming

Many live streaming services use WebRTC signaling to connect broadcasters to viewers efficiently. The near real-time interaction enhances user engagement, making it an attractive option for content creators.

Online Gaming

WebRTC is also utilized in online multiplayer games to enable real-time interactions between players. Signaling ensures that players can quickly connect and communicate with minimal latency, enhancing the overall gaming experience.

Telehealth Solutions

Telemedicine platforms are increasingly relying on WebRTC for virtual consultations between healthcare providers and patients. Signaling helps set up secure and immediate connections, facilitating easier access to medical advice.

These use cases highlight the flexibility and effectiveness of WebRTC signaling as a foundational element in various applications.

Final Thoughts

WebRTC signaling is a powerful enabler of real-time communication technologies. By simplifying connection establishment, it allows developers to focus on creating functional, user-friendly applications across various domains—from teleconferences to online gaming. With its flexibility, robustness, and broad compatibility, WebRTC continues to serve as a vital tool for driving innovation in real-time communication.

By understanding and leveraging this technology, businesses and developers can unlock new possibilities in how we communicate online, ensuring a seamless experience that meets the demands of an increasingly interconnected world.

Cignal, is a production ready open-source WebRTC Signaling server which comes with a minimal UI for demo purposes. The server is capable of 1000s of concurrent calls when deployed on a capable server. Feel free to explore this solution as a base for your building your next production grade video calling solution. Check Samvyo, if you are looking fora commercial usage based ready to use video sdk solution for building your next video calling/video conferencing/Interactive live-streaming solution.