Create a Omegle Clone Using Reactjs,Webrtc and socket.io
4 Jun 2023 At 03:19 PMLeave A replyPosted by: Ranjit Das
Building an Omegle Clone with React.js, WebRTC, and Socket.io
In this blog post, we'll walk you through the process of creating a real-time video chat application similar to Omegle using popular web technologies. We'll leverage React.js to handle the frontend user interface, WebRTC for real-time peer-to-peer video streaming, and Socket.io for establishing seamless connections between users.
#Server Side Setup
1) Create A server
1const express = require("express");
2const app = express();
3const http = require("http");
4const server = http.createServer(app);
5const cors = require("cors");
6
7const { Server } = require("socket.io");
8const io = new Server(server);
9const port = process.env.PORT || 5000;
10
11app.use(cors());
12
13server.listen(port, () => {
14 console.log("listening on *:5000"); // Correct the console log port number to match the actual port
15});
16
17
18
19
202) Setup the socket.io
1const updateTextChatUsers = (userid, updatedAvailable, updatedRoom) => {
2 textChatUsers = textChatUsers.map((user) => {
3 if (user.userid === userid) {
4 return {
5 ...user,
6 available: updatedAvailable,
7 room: updatedRoom,
8 };
9 }
10 return user;
11 });
12 };
13
14 const updateConnectedUser = (userid, updatedAvailable, updatedRoom) => {
15 connectedUsers = connectedUsers.map((user) => {
16 if (user.userid === userid) {
17 return {
18 ...user,
19 available: updatedAvailable,
20 room: updatedRoom,
21 };
22 }
23 return user;
24 });
25 };
26
27 socket.on("userJoined", ({ userid, type }) => {
28 try {
29 if (userid == null) {
30 return;
31 }
32 console.log(userid, type);
33 // check the type of connection either video or text and push the user accordingly
34 if (type == "video") {
35
36 connectedUsers.push({
37 userid: userid,
38 available: true,
39 room: null,
40 });
41 pair.set(userid, "video");
42
43 io.emit("videoChatCount", { length: connectedUsers.length });
44
45 // if there is morethan 2 users in the room and if they are not connected to anyone then two users will be picked and connected randomly
46 if (connectedUsers.length >= 2) {
47 const usersArray = Array.from(connectedUsers);
48 const excludeme = usersArray.filter(
49 (user) => user.userid !== userid && user.available === true
50 );
51
52 if (excludeme.length > 0) {
53 const randomIndex1 = Math.floor(Math.random() * excludeme.length);
54
55 const user1 = excludeme[randomIndex1].userid;
56 const user2 = userid;
57 const room = `room-${user1}-${user2}`;
58
59 const updateConnectedUser = (
60 userid,
61 updatedAvailable,
62 updatedRoom
63 ) => {
64 connectedUsers = connectedUsers.map((user) => {
65 if (user.userid === userid) {
66 return {
67 ...user,
68 available: updatedAvailable,
69 room: updatedRoom,
70 };
71 }
72 return user;
73 });
74 };
75
76 updateConnectedUser(user1, false, room);
77 updateConnectedUser(user2, false, room);
78
79 socket.join(room);
80 io.to(user1).emit("roomCreated", {
81 roomName: room,
82 remoteUser: user2,
83 });
84 io.to(user2).emit("roomCreated", {
85 roomName: room,
86 remoteUser: user1,
87 createPermission: true,
88 });
89 }
90 }
91 } else {
92 textChatUsers.push({
93 userid: userid,
94 available: true,
95 room: null,
96 });
97 pair.set(userid, "text");
98 io.emit("textChatCount", { length: textChatUsers.length });
99
100 if (textChatUsers.length >= 2) {
101 const usersArray = Array.from(textChatUsers);
102 const excludeme = usersArray.filter(
103 (user) => user.userid !== userid && user.available === true
104 );
105
106 if (excludeme.length > 0) {
107 const randomIndex1 = Math.floor(Math.random() * excludeme.length);
108
109 const user1 = excludeme[randomIndex1].userid;
110 const user2 = userid;
111 const room = `room-${user1}-${user2}`;
112 updateTextChatUsers(user1, false, room);
113 updateTextChatUsers(user2, false, room);
114
115 socket.join(room);
116 io.to(user1).emit("roomCreated", {
117 roomName: room,
118 remoteUser: user2,
119 });
120 io.to(user2).emit("roomCreated", {
121 roomName: room,
122 remoteUser: user1,
123 createPermission: true,
124 });
125 }
126 }
127 }
128
129 } catch (error) {
130 console.log("error", error);
131 }
132 });3) Handle the socket.io on user disconnect
1
2 socket.on("disconnect", () => {
3 try {
4 const roomType = pair.get(socket.id);
5 if (roomType == undefined) {
6 return;
7 }
8
9 console.log("Disconnected", socket.id, roomType, connectedUsers);
10
11 if (roomType == "video") {
12 const leavinguser = connectedUsers.find(
13 (user) => user.userid == socket.id
14 );
15 if (!leavinguser) {
16 return;
17 }
18 if (!leavinguser.room) {
19 connectedUsers = connectedUsers.filter(
20 (user) =>
21 user.userid !== undefined && user.userid !== leavinguser.userid
22 );
23 return;
24 }
25 connectedUsers = connectedUsers.filter(
26 (user) => user.userid !== socket.id
27 );
28 console.log(socket.id, "disconnected", leavinguser);
29
30 const findRemoteUser = connectedUsers.find(
31 (user) => user.room == leavinguser.room
32 );
33
34 updateConnectedUser(findRemoteUser.userid, true, null);
35
36 socket.to(findRemoteUser.userid).emit("userDisconnected");
37 io.emit("videoChatCount", { length: connectedUsers.length });
38 socket.disconnect();
39
40 // console.log(findUser);
41 console.log(leavinguser, connectedUsers, "here");
42 // console.log(findUser[0]);
43 // delete connectedUsers[findUser[0]];
44 } else {
45 const leavinguser = textChatUsers.find(
46 (user) => user.userid == socket.id
47 );
48 if (!leavinguser) {
49 return;
50 }
51
52 if (!leavinguser.room) {
53 textChatUsers = textChatUsers.filter(
54 (user) =>
55 user.userid !== undefined && user.userid !== leavinguser.userid
56 );
57 return;
58 }
59 textChatUsers = textChatUsers.filter(
60 (user) => user.userid !== socket.id
61 );
62 console.log(socket.id, "disconnected", leavinguser);
63 const findRemoteUser = textChatUsers.find(
64 (user) => user.room == leavinguser.room
65 );
66 updateTextChatUsers(findRemoteUser.userid, true, null);
67 console.log(findRemoteUser);
68 socket.to(findRemoteUser.userid).emit("userDisconnected");
69 io.emit("textChatCount", { length: textChatUsers.length });
70 socket.disconnect();
71 }
72 // console.log(findUser);
73 // console.log(leavinguser,connectedUsers,textChatUsers);
74 } catch (error) {
75 console.log("error", error);
76 }
77 });
78});4) Handle the webrtc connection
1 socket.on("answer", ({ ans, to }) => {
2 io.to(to).emit("answer", { ans: ans });
3 });
4 socket.on("offer", ({ offer, to }) => {
5 io.to(to).emit("offer", { offer: offer, from: socket.id });
6 });
7 socket.on("peer:nego:needed", ({ to, offer }) => {
8 console.log("peer:nego:needed", offer);
9 io.to(to).emit("peer:nego:needed", { from: socket.id, offer });
10 });
11
12 socket.on("peer:nego:done", ({ to, ans }) => {
13 console.log("peer:nego:done", ans);
14 io.to(to).emit("peer:nego:final", { from: socket.id, ans });
15 });
16
17 socket.on("iceCandidate", ({ iceCandidate, to }) => {
18 console.log(iceCandidate, to);
19 io.to(to).emit("iceCandidate", { iceCandidate: iceCandidate });
20 });
21#Client Side Setup
Hope you like this Project...
© Copyright 2023 - Made with 💓 by Ranjit Das All right reserved