React Video Chat App | WebRTC Video Chat Zoom Clone

Подписаться 144 тыс.

Просмотров 112 тыс.

50% 1

Hey Everyone, My name is Piyush and in this video, we will create a video call application using React and WebRTC.
Source Code: github.com/piyushgarg-dev/Rea...
WebRTC Explained: • WebRTC Tutorial - How ...
For Code and Open Source Contributions: • Open Source Contributi...
Quick Links
► Starter Code: drive.google.com/drive/folder...
► WebRTC Tutorial - How does WebRTC work? • WebRTC Tutorial - How ...
My Gears
► My Girlfriend: amzn.to/3WD6FRp
► Apple MacBook Laptop: amzn.to/3WBJgQn
► Blue Yeti Microphone: amzn.to/3YKZ9FT
► External 27” Monitor: amzn.to/3Vp3xaO
► Logitech MK295 Wireless Keyboard and Mouse: amzn.to/3DuL1bB
► Seagate Expansion 1TB External HDD: amzn.to/3QMm5Q8
► Tripod: amzn.to/3S4OwK4
► Ring Light: amzn.to/3YLf8DR
Disclaimer: All the links above are affiliate links.
Featured Playlists
► Complete Java Tutorial Series - • Java Tutorial Series i...
► Complete ReactJS Tutorial Series - • Complete React Tutoria...
► Complete Firebase & React Tutorial Series - • Firebase with Reactjs ...
► Website - piyushgarg.dev
Social Links
► Instagram - / piyushgarg_dev
► Facebook - / piyushgarg.dev
► LinkedIn - / piyushgarg195
► Telegram Channel Link t.me/codewithpiyushgarg
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

Опубликовано:

31 мар 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 144

@aryanrahman3212 6 месяцев назад

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

@pritamkumar6454 11 месяцев назад

A big hug from myside for your hard work Piyush

@anjuk3593 7 месяцев назад

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

@shivammaisuriya365 3 дня назад

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

@harshitagupta8641 11 месяцев назад

Well explained sir this is very helpful and informative video ❤ Thank you so much sir❤🙏🙏

@nirmesh44 9 месяцев назад

Mindblowing content. Thanks a lot

@kiranjadhav7329 Год назад

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 ❤

@user-xm2yh1cv4n 7 месяцев назад

great work, luv from bangladesh

@codewithsameer 11 месяцев назад

Thank bhaiya for this open sourse video calling functionality

@appstuff6565 Год назад

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

@Anthony-wg7fn 8 месяцев назад

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.

@brosgaming108 Год назад

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

@abdur786_ Год назад

Amazing sir

@appstuff6565 Год назад

I followed this and understood well, however can you do a diagram of this as to what is happening where using a excalidraw or any other diagrams?

@realstriver 2 месяца назад

great work man !!

@abdussamad0348 Год назад

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

@gauravpatel96 Год назад

Bro can u tell me what does that mean actually coz I need to implement this

@shivambhushan9028 3 месяца назад

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

@RavikantPandey-iv2jr 3 месяца назад

Bro can you send you contact details because I am also creating this type of applications

@chiggy7 2 месяца назад

Hey , I need help

@aryanrahman3212 6 месяцев назад

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?

@50sudha 11 месяцев назад

Well done bro

@timepass-sy5um Год назад

great video

@kunalgrover1434 9 месяцев назад

1 no 🔥🔥🔥🔥🔥🔥

@shubhamgupta-bl1tr Год назад

Nice video..sir koi clone banao like teams in mern Stack

@harpic949 11 месяцев назад

I did not get one thing, where do you exchanged the ice candidates , you exchanged the offer but not the ice candidate?

@madhavsingh9591 Месяц назад

Amazing video

@shivanshsharma6378 9 месяцев назад

if we need to create for multiple users do we need to add some code in peerservices?

@raghavm79 6 месяцев назад

Hi can you help me with vercel deployment. Server app is showing not found even after adding vercel.json

@PawitSahare Год назад

Sir screen sharing bana do ,,, in webrtc

@chandrapratap4700 10 месяцев назад

Why are we assigning the answer as a local description instead of a remote description in the handleNegoNeedFinal function? Shouldn't we be setting the answer as a remote description?

@arpandeepsingh9049 Год назад

Piyush Gurudev!

@appstuff6565 Год назад

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

@kedarvyas7134 Год назад

lol but it stands for cross-origin-resource-sharing

@user-is4fh5pw7g 11 месяцев назад

Awesome Video Sir , Thank You !! One more question It is not work on Safari & Ios phone any browser...🧡🧡🧡

@namanjain1684 3 месяца назад

How can we connect two peers which are on differnet networks room id can we same at a time

@fintechtrader4077 Год назад

your terminal color is diffrent . can you tell me how you customize it.

@shivamkumarraut9682 6 месяцев назад

hey Piyush I am not able to access camera and audio in chrome browser, i have searched over but didn't got the solution, so doing testing in FireFox but how it is working on your chrome Please help

@astronautischilling 10 месяцев назад

thank you for this amazing tutorial, however, pls add subtitles 😥😥

@user-gu2mv3wq1w 3 месяца назад

this remote stream should show immediately right when connected why to click on send streams can you fix that

@kshirodhati4093 4 месяца назад

Can we add multiple node

@appstuff6565 Год назад

Thanks Piyush, CRA seems to be an outdated one, what would you recommend to use this technology with instead, going with Vite with React or NextJS as a whole since its a react framework? Thanks!

@ameer6168 11 месяцев назад

yup use vite

@akuma_168 8 месяцев назад

Use vote. We too switched to vite. It was painful to do but worth all of the effort.

@chinmayanand896 9 месяцев назад

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 RU-vid 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.

@hemu2723 21 день назад

Worderful explanation!!. could you provide any good document for this ??

@bhargavpatel5208 29 дней назад

How We can get the real time transmit like subtitle visible

@saitamasensie2865 8 месяцев назад

In your explain video, you have mentioned IP address, ICE. But in this video, you didn't mentioned or used that. Why? Because it's in same computer having same IP address, that's why we don't need it? Or computer automatically do that? I don't understand that. Can you explain?

@aadarshgurug 5 месяцев назад

still confusing why we have to call sendStream function on click of btn to send semote streams it should be automatic

@vaibhavnimkar6252 8 месяцев назад

bhaiya can we get a tutorial on mediasoup or any media server which can allow us to create multiparty apps?

@WaqarIqbal-kv6hx 2 месяца назад

how to host this will you please make a video on it??

@Water089 9 дней назад

can we make game inbuilt with facetime

@ibeingsmart 11 месяцев назад

If I have 5 person in room and I got 10 call from user so how to show rest 5 user in que

@Digitalbyfaiyaz Год назад

How to leave call for specific user during call

@xpanda7112 8 месяцев назад

hey there is problem > how we can send audio with our video

@joonsdance1322 7 месяцев назад

3:44 npm i isn't working in my vscode what do i do

@shashankjaiswal5731 7 месяцев назад

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

@deadshot4263 7 месяцев назад

Bro does the given code works for you? When i am clicking on send stream it's showing A sender already exists for the track.

@asitkumar3164 8 месяцев назад

Piyush, plz make video on multiple users in a romm

@user-cn5or3qy8o 4 месяца назад

Can someone tell me ,will this work for multiple users instead of P2P?

@yehudahimelfarb5935 Год назад

Hi Piyush! Why do I hear the self when I speak?

@chaudharyaakash7198 6 месяцев назад

Is it one to one video calling app??

@skullhunter7342 11 месяцев назад

Sir apne bas upar upar se samjha Diya socket wala part I know, but peer wala part aur depth mei samjhana chaiye tha 😢

@pushpakbhoite7638 2 месяца назад

Hello piyush, Really it's great content. Just wanted to know, how can we implement this to group video call. I'm striving to do .If possible ,u can make group video call ,basis on this video. Have a good day.

@kartikking7 10 месяцев назад

Bhaiya.. jab localhost pe chalate hai toh yellow screen aa jati hai stream mei, instead of showing video. Pls help someone

@sachinsharma9416 3 месяца назад

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

@omgnaladkar1148 8 месяцев назад

coulld you please tell me how to do things without id and all just 2 random peoples

@radhikathakkar8881 11 месяцев назад

Thank Piyush, But when i'm connecting to this the video streams are connecting properly but nothing happening with audio. Can you please help?

@KazHachiOreki 4 месяца назад

that's because audio source is same for both streams here, try running in mobile and laptop then also remove the muted option from reactPlayer

@user-xm5jf8qn3c 4 месяца назад

sir ham ye kese identify kar le ki ye video app webrtc enable he ?

@user-bh3oz6db8e 6 месяцев назад

where is the link for provider ?

@prakhar266 Год назад

Hey Piyush, just wanna ask , I tried to add microphone functionality in my webRtc project, the microphone on/off button is working, but no sound is coming , is there any way to fix this

@codewithkashanadnan 22 дня назад

Is the React Player is muted ?

@alfiyashaikh8044 5 месяцев назад

How many people can it connect?

@shiblu4095 6 месяцев назад

Could you make videos for multiple

@Aditya_sharma09 Год назад

next js pr or project lao brother...

@ettaftafiachraf2085 11 месяцев назад

hey guys do you listen the sound of micro ?

@shivammaisuriya365 4 дня назад

17:00 implementing room joining logic

@UdayChauhan-zl3tr 2 месяца назад

bhaiya , using simple peer npm and webrtc , if possible please make video call app with react and server side also

@ahmadullahnikzad2850 4 месяца назад

can you create more videos about socket io and webrtc in English

@SheriBalak 7 дней назад

Sir maine ek chat app banaya hai usko public kaise kare Usko maine ng rok karne ki kosish ki but nahi ho raha hai Please reply 😢

@yoongishand3875 7 месяцев назад

my react server isn't displaying anything what do i do 😭

@kingyatharth2075 4 месяца назад

Hi piyush i appreciate your work but I have come to the video thinking it's about multi peer connection like zoom bhiya ye to clickbait ho Gaya still watched whole thing till stream bug resolved..😅 . Pls make video on multi peer bhi poc dena he koi idea nhi how will I make it ... Especially how I run a client on server especially on node js as it will be problem for scale I think, i might be wrong

@manishchahar9110 Год назад

Hi Piyush, In peer service you have created a function shown below async setLocalDescription(ans) { if (this.peer) { await this.peer.setRemoteDescription(new 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

@piyushgargdev Год назад

Can you please specify the timestamp, Would be easier for me to see 😄

@praveennooka675 11 месяцев назад

@@piyushgargdev it is 48:00 - 49:00

@Knowledgeduniya1432 9 месяцев назад

Toh kya y working h ya fir clone h bhai

@theycallmejatin 4 месяца назад

38:22 me wo peer wala part docs me kaha diya gya hai

@TechDecryptor 9 месяцев назад

i am getting this error Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable

@saikoushik3812 7 месяцев назад

same error for me too

@abdur786_ Год назад

Bhaiya nextjs ka latest serias with next-auth jldi laeiye na

@irakammuralikrishna2884 3 месяца назад

Please do same in react native also

@gauravpatel96 Год назад

Hey piyush can u tell me where should we host this live and how?

@S4SHERGAMING Год назад

Instagram link is not working have to connect with you😞😔

@stya0928 Год назад

How you made the server folder

@piyushgargdev Год назад

There is a template in description 🙌🏻

@khalidsayyad9887 3 месяца назад

This was hella overwhelming for me. I am dumb😀

@FirstnameLastname-cl4op Год назад

i am getting these error : Error: Failed to set local offer sdp: The order of m-lines in subsequent offer doesn't match order from previous offer/answer. Error: Failed to set remote answer sdp: Called in wrong state: stable any solution for this ?

@Gurpreetsingh-vv4ox Год назад

Same error Did u get any solution

@FirstnameLastname-cl4op Год назад

@@Gurpreetsingh-vv4ox Yes, study ice candidates and how to use them. ice-candidates are just information parameters of peer connection, it's not a big thing. whenever we create an offer, it gets new ice candidates/updates after some time which we have to send to the 2nd peer and save those ice candidates in the 2nd peer connection. if we will not send ice candidates then we get this error bcz we have an old offer that is not relevant. it is very similar to the negotiation process, set event listener on the peer-connection about ice candidates, when you will receive the ice candidates send it to the 2nd peer through the signaling server and save those candidates to the 2nd peer

@shubhgaur3740 7 месяцев назад

yeh terminal etna bada kyu kholke rakhte ho

@ayushtripathi4514 Год назад

I have watched so many webrtc video, everyone just create offer and answer, do signalling thing and show that it's working. i can see it's working, but have you considered what will happen if a user is behind a firewall? or the user is connected to a wifi network? there's issue with Peer-to-Peer video call that no one talks about. this is half knowledge, i appreciate your efforts but there's tons of videos on implementing this level of video calling app on youtube.

@softcodeacademy 4 месяца назад

TURN,STUN,ICE are not touched in this video, which are the most important parts in RTC

@Govt_and_tech 6 месяцев назад

Can i add it to my resume, This is right project for resume..?

@kartikaysharma4015 6 месяцев назад

Not for placement, but if you're looking for 3rd year internship then it's okay

@helloworld7796 3 месяца назад

Honestly, I think it's easier to clone a human than to clone some video app with webrtc.

@codingworlddrp4267 11 месяцев назад

use effect do bar call hoke Socket Connected KbJoblD6jtw2B0SzAAAS Socket Connected VNQJDcFD7BNa8MDiAAAT ye do bar kyu hota hai ham esko prevent nhi kr skte kya ki ye ek bar hi connect ho mene bhot try kra liya bhot sare jge par ye bar bar chal hi jata hai eske liye koe idea hai kya

@ratishjain2718 4 месяца назад

code main react strictmode hota woh dev do renders karta jaisi hi ye project deploy hoga ye waali issue nhi hogi :)

@shivom6116 11 месяцев назад

aapne usecontext api ka link mention nhi kiya hai discription me 😂 but i have seen that from your channel a complete masterpiece explanation❤

@shreyanshgohil8290 Год назад

caught (in promise) DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable Any solution for this error.