React Video Chat App | WebRTC Video Chat Zoom Clone

Hey Everyone, My name is Piyush and in this video, we will create a video call application using React and WebRTC.

Quick Links

My Gears

Disclaimer: All the links above are affiliate links.

Featured Playlists

Social Links

Video Titles
- How to create a video calling application in react?
- How to use webRTC and React?
- How to create a video calling application using WebRTC and React?

Tags
- WebRTC
- Reactjs
- WebRTC Reactjs
- Video Calling Application

Hashtags
#webrtc #reactjs #nodejs #socketio #javascript #videocallapp #programming #coding

[aryanrahman]

Showing you the process of fixing the bugs has been really helpful! thanks

[the.shivam.bhushan]

I am creating an interview platform and kept running into problems with webrtc until I found this video. Thanks for the help

[anjuk]

I'm an angular developer... Even though it's react it helped me alot. Thanks ❤

[williamsmith]

00:02 Video calling app debugging from Scratch
02:06 Setting up the server and connection
07:31 Creating email and room input for user submission
10:55 Setting up a socket provider for the application.
15:39 Setting up the server and connecting to the client.
17:42 Setting up and handling socket events for joining a room and sending data
22:29 Handling errors and correcting details in the video chat app setup.
25:15 Creating a separate route for users to join a room
29:28 Setting up event handling with socket provider for user join
32:07 Creating a feature to schedule video chat for tomorrow
37:48 Creating a service and its constructor for the application
40:25 Creating and sending offers using WebRTC
45:01 Setting and sending local description for video chat
50:13 WebRTC Video Chat App Setup and Connection
57:40 The video discusses negotiation and handling offers.
1:00:17 Handling final peer negotiation and remote stream playing
1:05:50 WebRTC automatically sends streams to other users
1:09:16 Explanation of video chat app functionality
Crafted by Merlin AI.

[pritamkumar]

A big hug from myside for your hard work Piyush

[brosgaming]

Bro, ye mern series ko finish hone me kitna bhi time lage but aap please sabhi topics cover karna..😊
Thanks for this👏

[i_am_batman_.]

Sharing my experience:

This tutorial walks you through creating a one-on-one video calling app. However, it uses the outdated create-react-app. For convenience, you can switch to Vite with some minor adjustments if you're familiar with it.
The video mainly focuses on implementing WebSockets and WebRTC, so it doesn't delve into how these technologies work in detail. However, if you already have some background knowledge, you’ll be able to understand the underlying concepts.

[Anthony-wgfn]

This is a fantastic tutorial. Can you please do this one again in English? i followed along with the code as best i could, but i would love to hear you explanations in detail. Thanks.

[shivammaisuriya]

thanks you bro finally after a 2 weeks i founded a genuine understandable video

[kiranjadhav]

Hey piyush you are doing great your videos are knowledgeable and easy to understand keep going forward don't think about subscriber it is just number important is you deliver that kind of knowledge keep it up bro ❤

[shashankjaiswal]

For Audio Option in React player Muted is writen for default make it to volume={1}

[krishvadhani]

Absolutely loved this video. Very clean implementation!

[chinmayanand]

With attractive thumbnail we can just make user to "CLICK" but not to "SUSTAIN / PERSIST" for the video. There are many videos doing this on YouTube but the only I reason I clicked for that "UI design you put". I can bet if you would have made the same UI design as well then there could a lot of views than current no of views. Any ways Thank you for uploading.

[manishchahar]

Hi Piyush,
In peer service you have created a function shown below
async setLocalDescription(ans) {
if (this.peer) {
await RTCSessionDescription(ans));
}
}

function name is setLocalDescription & you are using setRemoteDescription inside i think the function name should setRemoteDescription or this is a typo or some other reason behind this. please explain

[appstuff]

loved cors explanation in one line at @16:40 ish

[Utsav-gupf]

Hey Piyush you are doing a great job. Please explain how to create a build folder to work with both client and server. Thank you!

[abdussamad]

More power to you! Add the turn server thing so we can connect with different networks .

[appstuff]

coming back from webrtc explanation video you did a few months ago, very well explained! Thank you

[sachinsharma]

Bhaiya can you explain how to deploy server as i am not able to deploy it till last month
Plzz reply. If anyone can help me out

[aryanrahman]

Thank you so much for making this. I could never have learned this in an hour without your help. I also read your blog on this topic and it didn't mention a negotiation flow over there. Do we need this step even after establishing the WebRTC connection?