React Video Chat App | WebRTC Video Chat Zoom Clone

Get 10,000 free mins with ZEGOCLOUD video chat API: bit.ly/438OzKM
Pre-built UIKits to build video call apps faster: bit.ly/3OFu8ke
How to Build WebRTC video call apps: bit.ly/43pejSL
Top 10 video chat API: bit.ly/3Oyfewa
Hey Everyone, My name is Piyush and in this video, we will create a video call application using React and WebRTC.
⚠️ Bug Resolved Video: • React Video Chat App |...
WebRTC Explained: • WebRTC Tutorial - How ...
For Code and Open Source Contributions: • Open Source Contributi...
Quick Links
► Starter Code: drive.google.com/drive/folder...
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

[@piyushgargdev]

Hey Everyone, To all people facing bug in this video, I have uploaded a new video on "Video Calling with React" and all on screen debugging done. Checkout video at kzbin.info/www/bejne/kHXMgoqsYs2dqtk

[@sdexstarlord]

Can multiple users can connect in this application ??

[@Darshan_jain15]

in last part negotiation not working you just manually negotiate🤣🤣🤣

[@amanranarana684]

Piyush bhai bhut advance level pe padhate ho ap!!!!!1 Fresher level se padhao like socket ke litne function hone h on,off etc or konse function kb use krne hote hai or kese !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@niteshtudu6449]

Nice tutorial bruh... Every steps explained well 👍

[@piyushgargdev]

Thanks ✌️

[@zafariqbal92]

Kyu nhe acha laga bhai - WebRTC sekhne aye the char chezen or bataden. Thank you Piyush!!! ✌🏾

[@mostakahamed6169]

Awesome explanation . Thanks a lot.💞

[@piyushgargdev]

Most welcome!

[@samyakjain4715]

Great Work piyush , just a small suggestion your video was really in depth, so it was kind off hard to keep up with it , it would be good if lengthy videos like these are either time stamped or broken in like a playlist. Other than that great work.

[@piyushgargdev]

Thats a great suggestion, I am sorry for the issue you faced. I'll surely add timestamps to all the possible videos. Thanks for your suggestion and kind words. 😄

[@henrymunoz2035]

Love the video , Could you make the videos in English if posible , I live in the USA and i belive you will get thousands of subsctriptions , your english is exelent. Thank You so much

[@piyushgargdev]

Thanks a lot Henry for your kind words ✨ I was planning to create separate channel for English Tutorials. Hope to launch it soon 🚀

[@henrymunoz2035]

@@piyushgargdev thank you

[@pixel631me]

Sir you are Awesome & your intro 🤩

[@shrikantjha5630]

Explained well.

[@jbrocksfellas4147]

awesome video mate

[@ritikbhushanyadav4685]

I am little confused about ice candidate connection because when you were showing the connection of webrtc there was no connection of ice candidate while in your webrtc intro video you also mentioned that we need a public ip of two diffrent connection .

[@adityarawat4964]

i think this is because he is working on the same machine , if this is not the answer than what is ? you probably figured it out

[@mustang9951]

is there any other way to solve that bug I don't want to use classbased components that you have used in your other video.

[@socialhub2508]

thanks for your video ,i had a great learning experience can you just make a vedio of adding audio to the same application ................

[@syedwasimahmed28]

Hello Piyush, I have been looking for a react tutorial where you don't need a subscription for using an API and looks like this is the one. Could you link the source code because whatever changes you have made to the code after 1:14:04 is unclear. Thanks for this tutorial but I am not able to complete the project because of the issues

[@euhansarkar]

today i just completed. sorry uncompleted the project for the issue. are you get any solution?

[@piyushgargdev]

​@@euhansarkar Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@piyushgargdev]

​ Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@udittomar3225]

Hey Piyush, it was a great video for an hour no doubt about that but at the end u also know how the proect started working, u didnt even used remote stream variable , ig u just used my stream var in both react players, it was really not very professional of you. But nonetheless great work and maybe we can get a new vid on this topic again. Thanks.

[@piyushgargdev]

Hey, Don’t worry, I am re creating this tutorial soon

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@udittomar3225]

@@piyushgargdev means a lot piyush i was just about to drop this project after trying to debug for a week, really thanks a lot.... 👐👐

[@piyushgargdev]

@@udittomar3225 Thank God you didn’t gave up. Good luck 🤞 😉

[@euhansarkar]

hello piyush, thank you for providing the awesome tutorial. it was great. And when you got an error in the last time. how you debug the error. please provide a solution.

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@aannaassalam]

Hi Piyush, Thanks for this awesome video... so far so good but the error you faced regarding rtcpeerconnection, I am also facing the same issue and I would be glad if you can provide a help to come over this bug or atleast share the code that you have created in this video. Hope to listen soon from you....😊😊

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@jomfawad9255]

Is there a way to make it automatically match with random people who are using the website?

[@TechnicalYarana]

brother kya ham websocket api bana sakte hai amazon ka free account ka use kar ke

[@Ayusharma114]

does it take screenshot of your screen

[@amazingeffects200]

sir we can add voice call

[@namesare4fools]

oh man i wish u did this tutorial in full english

[@piyushgargdev]

Well, I can’t promise but I’ll surely try to make one in English as well 😇

[@SakethReddy-rh1zi]

is this a multipeer connection can you give this code

[@ritikthakur6270]

Nice❣❣

[@trueindian7964]

Sir I am facing the same issue at 1:13:56. It says "Failed to execute 'addTrack' on 'RTCPeerConnection': A sender already exists for the track". I am not able to debug my code sir. Can you please tell what changes you did in your code or how you debugged your code at the last part of this tutorial to get the app running smoothly..........I saw your P2P project which you uploaded on Github... But I have spent significant amount of time in this project and completing it will give me much more confidence.

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@renishsalakhana5603]

When you say that, after some debugging for while, after some changes you've made that aren't clear to us are appearing on only one client panel screen, not both, when you clicked on send a video.

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@renishsalakhana5603]

@@piyushgargdev thanks Piyushbhai

[@renishsalakhana5603]

github p push kia h code ?

[@chintakuntlasanthoshimanog3972]

hi, the last part , im gettin the same error you got at the end, can you please let me know how you fixed it

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@manishdeshmukh7238]

Facing echo issue using webrtc, can you please assist me for the same.?

[@piyushgargdev]

Add `muted` attribute to video tag and it would be resolved

[@anhdungnguyen4932]

thanks for your video. My browser still shows only one camera and gives the error Uncaught (in promise) DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable

[@piyushgargdev]

kzbin.info/www/bejne/i17LZoWKpK2qeqM

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@usmanmughal5916]

is this on to one? or 5 to 6 people can connect togather?

[@sherlockholmes6437]

This is one on one

[@ooo-cm-Prashanthi]

Bro plz provide same code with mute and vedio on off options plz plz by this week I completely done this project just small options plz explain bro

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@aldenEeaden]

Can you make a video on p2p file transfer app?

[@muhmmadali189]

i am not able to set localDescription it is returning undifined Can you please help me?

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@tapashnath6995]

Thank you sir for this video, Can you help me for discount call code.

[@sandeepnayak6497]

Dear Piyush I am facing the same issue please can you send the source code or the solution for 1:13:56

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@kdgraphics8863]

Hi @piyush where i can find the above code?

[@Aadya-Singh]

Is this also for begineers?

[@piyushgargdev]

There is a small prerequisite that you have good hold over React, Node and Socket.io

[@saurya9614]

Kya same code React native me work karega???

[@piyushgargdev]

I don't think so, because webRTC is only available in browsers

[@MdShihabUddin-dh5vc]

Can you please shared the source code?

[@Pupu-xr1ju]

❤❤

[@abdulragib6004]

video start karne se pehle prerequisite and video outcome bhi bata du

[@ooo-cm-Prashanthi]

How to monitor webrtc that website is not opening sir

[@piyushgargdev]

chrome://webrtc-internals/ Note: This will work only in chrome browser

[@sahibalam6547]

Make multiparty conferencing using SFU architecture....coz what u have created its just p2p

[@hiteshyadav7846]

At the end of video there is bug due toh which the remote video is not coming.. Can someone please tell the code.

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@pauldoyle3073]

The fact that you are aware that there are bugs with this code and magically fix it off camera from "debugging" is very poor form. And the fact you leave this video up despite being aware of the issues is even more insulting.

[@piyushgargdev]

Hey @pauldoyle3073, I am extremely sorry for the problem you faced. I am planning to recreate this video again with more explanation and debugging on screen. Thanks and Sorry again for the problem you faced.

[@Gabriel-tp8tj]

Make in english pls, u are going to the moon if u did it

[@piyushgargdev]

Sure 🚀

[@Im_RajSingh]

Do you have 2 cameras One with the laptop and 1 external(not the one you are streaming with) Because if another browser tries to use our system camera when already in use by some browser it gives error Should I open different windows of same browser and test this or I have to get two cameras only.

[@piyushgargdev]

Hi Raj, No I just have one camera in laptop which was running in both the browsers. I think there is some issue with your machine as I don't think that should cause an issue. I can easily use one camera on multiple browsers. Can you please specify your machine specs?

[@Im_RajSingh]

@@piyushgargdev Processor Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz 2.40 GHz Installed RAM 8.00 GB (7.84 GB usable) System type 64-bit operating system, x64-based processor Acer Aspire 7

[@Im_RajSingh]

@@piyushgargdev The browser says cannot start video source and somewhere i read that it shows this error when your system camera is in use with some other browser.

[@piyushgargdev]

@@Im_RajSingh Might be some driver issue then. I am not sure why this is happening. Maybe try to run your code on your ffriend's machine.

[@Im_RajSingh]

@@piyushgargdev okay thnks the reply

[@imran809]

I mean, what was the requirement of teaching hundreds of things at the same time? We are not making my next startup.

[@yeshrajawat6012]

Hey piyush awesome content, i have a request, can you please upload this project on your github, as I am stuck on the debugging part on 1:14:22 where you said that it started working after restarting the server but I am still facing the same issue in order to get the remote stream. Yes I know you have uploaded P2P github repo but it would be a easy for us to follow this particular protect and then move on to that project.

[@yeshrajawat6012]

track event is never called by useEffect

[@piyushgargdev]

Hi, I understand your issue. Due to storage issue I deleted the project and later realised that I haven't pushed code to Github. If you can give me few days, I shall code this project again and provide link to you. Sorry for the inconvenience.

[@shi-nee7966]

@@piyushgargdev will be really helpful if you do that bro

[@yeshrajawat4657]

@@piyushgargdev Hey Piyush, it would be great, I understand you must have a lot of work besides youtube and I thank you for considering it.

[@ooo-cm-Prashanthi]

@@piyushgargdev when u will provide bro

[@abdussamad0348]

Hi, I am getting error on negotiation needed. "Uncaught (in promise) DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable" I am sending offer that is already in localDescription to remote user , setting it as remoteDescription and creating new answer from the received offer and sending it back to the current user. Then setting it as remote description. It should be the successful handshake. But somehow I am getting error. Please help I cannot find any resource on internet

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@ooo-cm-Prashanthi]

At the end of the vedio u said u have done some debug could u plz send that code plzzzzzz 🥺

[@piyushgargdev]

Sure, Just equipped with some college work 😅

[@ooo-cm-Prashanthi]

@@piyushgargdev we need urgently plz bro share...GitHub or make a vedio from that debug only plzz plzz

[@piyushgargdev]

Btw, Have you checked my ConnectMeP2P video? I have included code for that.

[@ooo-cm-Prashanthi]

@@piyushgargdev no

[@piyushgargdev]

Please checkout this video: kzbin.info/www/bejne/i17LZoWKpK2qeqM

[@maoskitchen]

Hello sir....I have a project for you on webRTC ...Kindly revert me

[@arunyadav7467]

bhai code do na github link ya or kuch

[@piyushgargdev]

kzbin.info/www/bejne/i17LZoWKpK2qeqM

[@noobcoder1687]

Code doesnt work

[@piyushgargdev]

Hey, Don’t worry, I am re creating this tutorial soon

[@pankajsuryavanshi8332]

Hard to understand 😅take time

[@bideshbanerjee5506]

Anyone solved the last bug ???

[@ujjwalpathak2640]

I was able to solve the issue by making a new offer while trying to negotiate and make new routes to the socket server for negotiation

[@piyushgargdev]

Great Work Ujjwal! Can you please share code as Github Repository in new comment post? I'll Pin your comment.

[@karankewat3071]

@@ujjwalpathak2640 bro please share the code . Need it urgently.

[@suraj.divekar]

@@ujjwalpathak2640 bro please share the code

[@hiteshyadav7846]

Can you provide the code.

[@ulhasgupta8377]

Hi Please check your Mail.

[@parasraut3282]

code toh de deta bhai

[@mustang9951]

you should remove this video if it has a bug

[@wiebuu-codes]

abey iski repo bana ke link share kr na explain to kara ni hai link to dede logon ko 🤦‍♂🤷‍♂

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@msdrd]

you are not speaking english btw

[@bungusopo]

U are soo fast like just typing the other screen. U don't know how to make tutorial video

[@skp2146]

bungu tumhare muche kaise ugg gai

[@vrandakansal5940]

@piyushgargdev please provide the solution of last error..

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.

[@reetuverma6554]

Hii,,can you please connect with me ..i have some doubts and queries.

[@shlokkumar14]

I am not able able to create "handleCallAccepted" connection due to which I'm not getting "Call got accepted" in the console of my local browser(1st person who is sending the offer) eventhough I'm getting "Incoming offer from" in the console of my 2nd browser(2nd person who is getting the offer and creating an answer). Is is it because of unsuccessfull RTCPeerConnection because in "chrome://webrtc-internals/" I am getting "P(peer-connection)" instead of "RTCPeerConnection(peer-connection)". Please, need a solution to this as soon as possible.

[@piyushgargdev]

kzbin.info/www/bejne/i17LZoWKpK2qeqM

[@shlokkumar14]

Hi Piyush, there's some issue in creating an answer on the 2nd browser. I have attached the code for creating answer below ,please let me know what went wrong, if possible. //Code in Room.jsx const handleIncomingCall = useCallback( async (data) => { //2nd person(remote peer) handles the incoming offer(or call) by creating an answer. const { from, offer } = data; setRemoteEmailId(from) console.log("Incoming offer from", from, offer); const ans = await createAnswere(offer); socket.emit("call-accepted", { emaidId: from, ans }); }, [createAnswere, socket] ); //In peer.jsx const createAnswere = async (offer) =>{ await peer.setRemoteDescription(offer) const answer = await peer.createAnswer() await peer.setLocalDescription(answer) return answer }

[@pritech8302]

@@shlokkumar14 he did many many mistakes

[@FirstnameLastname-cl4op]

i am getting the error stream and track id deprecated in chrome:// web-internals

[@piyushgargdev]

Hey, Sorry for the inconvenience caused, here is a video with bug resolved kzbin.info/www/bejne/kHXMgoqsYs2dqtk. Hope you'll like it 😄.