With the outbreak of the Corona Virus, everyone is forced to stay at home and socialize or work from home. This has become astonishingly important. People have been using Zoom for these tasks, but for a few months now, Zoom has been criticized a lot for its poor privacy and security, so we are here to help you create your own clone video chat app. In this article, we will tell you everything you need to know to build your own video chat application that will back chat rooms, video chat, etc.
With the arrival of WebRTC and the rising capacity of the web browsers to shaft peer-to-peer connections in real-time, it has become easier than ever to create real-time apps.
What is WebRTC?
WebRTC (Web Real-Time Communication) is a free, open-source project that provides web browsers and mobile applications with real-time communication (RTC) via simple application programming interfaces (APIs). It allows audio and video communication to work inside web pages by allowing direct peer-to-peer communication, avoiding the need to install plugins or download native apps. This is the textbook definition of WebRTC.
A challenge that the web always faced was to let humans communicate via video or voice without having to install any plugins or pay for these services. The very first WebRTC application was created by Ericsson in May of 2011. Now, a lot of web services use RTC but depend upon native apps, downloads, or plugins. You must be familiar with most of them like Skype, Facebook, Google Hangouts. These require complex installation, downloads, and regular updates of plugins. Convincing people to download plugins has always been difficult in the first place, besides they are error-prone and quite annoying if you ask me.
How does WebRTC work?
Any application that is WebRTC-enabled requires to
- Attain a video, audio, or another data stream;
- Collect information on the network such as IP addresses and ports, swap this information with other WebRTC clients;
- Errors are reported using signaling communication, also to initiate or close sessions;
- Clients are required to interchange information about media like codecs and resolution;
- Stream the video, audio, or data
WebRTC uses three API implementations
- MediaStream: this allows the clients to get access to the stream via WebCam or mic.
- RTCPeerConnection: this allows video or audio data to transfer, backed by bandwidth management and encryption.
- RTCDataChannel: this allows peer-to-peer communication considering any comprehensive data.
Major Advantages and Disadvantages of WebRTC?
Advantages of WebRTC
Open-source code
It is an open-source code based project designed for the streaming of data between browsers and apps. WebRTC is supported using peer-to-peer communication technology. It was originally developed by Google. As of now, it is supported by Opera, Yandex, and Firefox browsers as well. Other browsers are able to support WebRTC too, except they need to install the plugin extension webrtc4all.
A strong competitor to classic telephony
Even though it is still considered new experimental technology, after a few improvements and standardization, WebRTC is said to pressurize the market of classic telephony. There is a serious competition between classic telephony and WebRTC’s better and cheaper VoIP service like Skype, Viber, and many more refined web communication solutions.
Better stability along with more security
Despite WebRTC still being in the process of development and refinement, it still has a clear advantage over the Flash technology. WebRTC is considered more logical. The market was dominated by Flash until recently, but it does not serve the main web browsers like Google Chrome and Mozilla Firefox. Choosing WebRTC over Flash is better when it comes to security and stability.
Sound quality is better
Among other benefits of WebRTC is also included the case that, specifically because of adjustable built-in microphone settings, it offers better sound quality than Flash. It uses G.711 and Opus codecs in order to transfer audio.
Supported by the leading web browsers
WebRTC, today, is supported by all the leading web browsers such as Google Chrome, Yandex, Firefox, and Opera beta. Chrome for Android support was declared in the spring of 2013. WebRTC API is available in the C++ library too, this lets third-party developers use this technology in autonomous solutions as well.
Supports SIP solutions
WebRTC supporting SIP solutions are also starting to make an appearance. Amidst them, callbacker.com has established commercial use. Another service, webcamtoy.com enables the application of different effects on photos taken with a webcam and uploaded on the web. A project, peercdn.com backed by WebRTC communication standard allows the creation of a network specialized in passing on multimedia content.
Disadvantages of WebRTC
It is still under development
The fact that this communication standard is under development is the main disadvantage of WebRTC. It comes across as the main challenge of WebRTC, as the code that the developers use now might go through important changes in the coming years. The version of WebRTC (1.0) that exists right now is a working draft.
Skepticism regarding the future codes
One more challenge faced by WebRTC is the list of necessary codes. All the companies that are participating in this technology have agreed upon the same thing that its main codec is going to be cross-platform and will be backed by all browsers. Till date, the royalty-free VP8 codec is being used. But companies like Cisco press on using codecs that are non-free like H.264 and H.265. If this proposal gets accepted, it will be a problem for third-party software developers.
Despite its prevailing disadvantages, WebRTC has a lot of budding potential and soon will earn a huge share of the communication market. Granted that this idea has a lot of critics at present, it has a great probability for future development. The possibility that WebRTC technology will become the dominant communication standard is strong. We have such few examples in the history of communication technologies, like back in 2005, Skype was not well received by the providers. In fact, they even contemplated the idea of introducing laws to limit Skype. Nevertheless, the progress cannot be readily blocked, the same might be the case with WebRTC.
What are we exactly creating here?
We are going to create a very simple app that lets us stream video and audio to the connected device, basically a simple video chat application.
This is what we are going to use:
- An express file so that we can serve static files like HTML file which stands for the UI;
- AWS Websockets for real-time web applications to build a connection between two devices with WebSockets;
- WebRTC to let media devices stream video and audio between connected devices
How to Create a Clone Video Chat Web App using WebRTC?
If you are planning on creating apps that are Skype-like on web browsers or even Android and iOS platforms, WebRTC will make it ten times easier for you to build video and voice chat app clones for video or audio streaming. It is easy to use, and amazing for web and mobile apps development.
1. Client Application
We will implement this by using a simple HTML page and JavaScript. No WebRTC helper libraries will be used so that we can keep things simple and under control without getting lost in all the frameworks.
2. Signaling Machine (Web Sockets)
We will use AWS Websockets. This mechanism is used to create a simple chat application.
3. Stun/Turn Server
We will use a very popular Stun/Turn server open-source project known as Coturn which will be hosted in an Ubuntu AWS EC2 instance.
4. Project Deployment
We will use a serverless framework in the deployment of the infrastructure (Websocket Server).
1. Deploying The AWS Websocket
This project consists of a serverless framework project configuration for an AWS WebSocket which broadcasts received messages to all the devices that are connected.
- We will get the source code from Github Repo & go into the project directory from the CLI.
- Install all the required npm packages.
- Install the Serverless Framework globally.
- Deploy into AWS.
After deploying the AWS Websocket, we will get the AWS Websocket endpoint, copy the URL as it is required for web client app configuration.
2. Hosting The Stun/Turn Server
We will host this in an AWS EC2 Ubuntu virtual machine instance.
- We will create an AWS EC2 instance using ami-02df9ea15c1778c9c keeping the default settings.
- Moving ahead by going to EC2 group security settings and opening all in-bound UDP ports. This is essential for the Stun/Turn server so that it functions properly.
- Connect your instance using SSH. Then, execute the following given commands:
- Acquire super user environment
- Install needed libraries
- Install Coturn project
- Exit the superuser environment
- Start the coturn turn server
- Do not forget to replace your username and password with the ones that you want. Also, replace EC2_Public_IP and EC2_Private_IP with your own EC2 instance’s IP addresses.
- Double-check Coturn is running by this command: netstat -lnp | grep 3478
3. The client app build
When the page loads, the user will be asked to grant permission to give access to the camera and mic using the getUserMedia method. Upon giving the access, web socket connection and setup event handlers are established to handle Offer/Answer and ICE candidates.
Video and audio streams are added here to the RTCPeerConnection so that the stream can go through upon the establishment of a peer-to-peer connection. This execution for creating web sockets and WebRTC peer-to-peer connections would be the same for both callers and receivers.
Flow for executing a peer-to-peer connection
- Both the peer (caller and receiver) will open the file WebRTCChat.html in their respective browser. This will execute connect to WebSocket & createRTCPeerConnection in both the devices.
- Upon clicking the call button by the caller, an offer will be built and will be saved in the caller's session with the setLocalDescription function. Later, the offer would be sent to the receiver over the web socket.
- Once the offer has been created, onicecandidate event handler is fired and the generated ICE candidates are sent to the receiver through the web socket.
- hanldeoffer function will be executed on the receiver’s end, once this is established, the offer that the caller sent will be saved in the receiver's session with the setRemoteDescription function.
- After handlecandidate function is executed, ICE candidates received from the caller are added to the receiver’s RTCPeerConnection.
Deploying to AWS S3 Bucket
- Go to AWS console and create an S3 bucket
- Make it public
- Upload the WebRTCChat.html file to the created S3 bucket and make that public too
Testing
- Open the WebRTCChat.html file using public URL in both the peer’s browsers
- The caller will click on the call button
- The receiver will click on the answer button
- You can then have a video call with each other
Compatibility
Currently, this app is tested in Google Chrome version 77.0.3865.90 (official build) and iOS Safaris browser. In iOS, WebRTC is only supported in the Safari browser.
Final Words:
The several advantages of using WebRTC’s open-source code maintains and raises the interest of different businesses in this technology. Several organizations prefer using an independent solution as it is considered strategically profitable. This technology is soon to be implemented by WebRTC developers into currently existing online businesses.
At Cypherox, we have a team of developers who are expert in developing Video chat app clones using WebRTC. We are a Web Development company that thrives to satisfy our customers’ needs and develop applications as per their requirement.
