Build video chat application with WebRTC
Hey reader, welcome back to my blog, in this article we would be building a real-time video calling application using something known as WebRTC.
Now, what is webRTC? In simple terms, webRTC refers to as web real-time communications. You can use webRTC to design video calling, audio calling, and chatting applications on the web.
Do you know what's the best part about WebRTC? The answer is, you don't need any backend to handle the communications. This means that two or more people are having video calls without any server, how? because WebRTC is implemented inside your browser. Isn't interesting? So, let's build our own video call application.
Note: As I have mentioned we don't need any backend, that does not mean that we are not going to have any type of backend. We need a backend at an initial point just to connect them both initially. after that, you can even stop your server but the video call would go on. I hope you got the point.
Technologies we would be using
Node.js & Express
Socket.io
A good browser (Chrome, Firefox)
Setup
Let's begin to set up our project. Create an empty folder naming video-app and initialize package.json by running npm init -y.
Now, let's install express and socket.io by running
npm install express socket.io
Copy
Copy
{
"name": "video-call",
"version": "1.0.0",
"description": "A simple video calling application",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "Piyush Garg",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"socket.io": "^4.1.2"
}
}
don't forget to add the start script in package.json.
Good going, now let's create a index.js file on the server and start coding along with me.
Copy
Copy
// index.js
const http = require('http');
const express = require('express');
const { Server: SocketIO } = require('socket.io');
const path = require('path');
const app = express();
const server = http.createServer(app);
const io = new SocketIO(server);
const PORT = process.env.PORT || 8000;
app.use(express.static( path.resolve('./public') ));
server.listen(PORT, () => console.log(`Server started at PORT:${PORT}`));
let's try to run our server with npm start.
Copy
Copy
Server started at PORT:8000
Cool 😎
Now let's start adding event listeners to our socket.io
Copy
Copy
// index.js
const http = require('http');
const express = require('express');
const { Server: SocketIO } = require('socket.io');
const path = require('path');
const app = express();
const server = http.createServer(app);
const io = new SocketIO(server);
const PORT = process.env.PORT || 8000;
io.on('connection', socket => {
console.log(`user connected: ${socket.id}`);
socket.on('disconnect', () => {
console.log(`user disconnected: ${socket.id}`);
});
});
app.use(express.static( path.resolve('./public') ));
server.listen(PORT, () => console.log(`Server started at PORT:${PORT}`));
Okay, you are really fast at learning. Now create a folder named public on your server and create a index.html file. This is the file where all our front-end code goes.
Copy
Copy
node_modules/
public
| index.html
index.js
package-lock.json
package.json
index.html
Copy
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Video App</title>
</head>
<body>
</body>
</html>
Now, things become a little serious, before moving further I want you to understand some basic terms
RTCPeerConnection – creates and navigates peer-to-peer connections.
RTCSessionDescription – describes one end of a connection (or a potential connection) and how it’s configured.
What is a peer? A peer is a node or a user connected to webRTC.
Flow of WebRTC
The flow of webRTC is simple, yet confusing. Once you understand this flow, whoa you know webRTC. I don't expect that you would understand this in one go, so please read this topic 2-3 times.
To understand the flow of WebRTC, let's take the real-life situations on how it works.
There are 2 online users named A and B. A wants to call B, so first of all A would create an offer and send it to B via socket.io. B would then accept the offer sent by A and after accepting the offer, B will create an answer and send back the answer to A via socket.io. This process is called signaling .
Sahil Shangloo
