How to Create a ReactJS Video Chat App with WebRTC and Socket.io

[@raineypiechowski3032]

This code is so much cleaner than any other tutorial on this subject matter

[@DarwinTutorials]

Thanks a lot.

[@tenj]

Your tutorials are just awesome ! I'm really happy that I found this channel

[@DarwinTutorials]

Thanks a lot you're too kind

[@manushipandya5019]

plz make more video on that such a nice Explication thank you for make my day more knowledgeable

[@amnadhrioua9158]

Your tutorials are just awesome!

[@abhinavaggarwal8751]

when I end a call the call is just ended on one user's page but still goes on on another user. what to do about that .Do I need to manage another socket to do that?

[@Amazing_McBoss]

Hi I encountered an error where the other person are not showing for both people on the call, and when opening the localhost 5000 it has a Cannot GET error. What do you think can fix that? are they related? Thanks!

[@metaphor9480]

hi, have you solved the problem?

[@Traders-z6v]

its giving me error when i run the command npm start in last that "Permission denied by system" can you help me with that? thanks.

[@The-Empowerment-Engine]

Can you add mute and turn off the camera 📷 button?

[@adarsh-chakraborty]

all i wanted in one video. subscribed!

[@DarwinTutorials]

Thanks a lot!

[@himike3278]

Awesome! What if I just wanted to broadcast my video stream and have anyone watch? I wouldn't need to call user but I assume I still need to connect to a socket, correct?

[@kedarpednekar9582]

nice video, its similar to javascript mastery channel. but short and concise!! great work!

[@DarwinTutorials]

Thanks for watching appreciate it!

[@aleksandr5831]

Thanks for tutorial. But how about activate user's cam only after answering the call?

[@gearstop]

Great video! Can anyone tell me which vscode theme is being used here?

[@DarwinTutorials]

Theme is night owl

[@cheeseburgers4970]

good stuff, i got the concept from your on how sockets work and now i included a chat box

[@DarwinTutorials]

That's awesome, glad you were able to add to it.

[@nirmalyasaha5088]

Can you give the source code

[@aditisneh6420]

Hey, can you help me out, getting error in console - connection refused

[@cheeseburgers4970]

@@aditisneh6420 its always fun to encounter issues when coding think of it as puzzles that will help you understand the concept and eventually be better. with that here are few hints that may help you. the client connecting to the server. the sever has an address declaration on cors. the said configuration it allows the declared address for get and post requests. its a good idea to check the cors configuration, if its properly configured check your client and see what port its running on and if its running on the declared address ( port ) * since you will be running this on localhost. you just need to check to ports. if everything fails i recommend testing it on another browsers. additionally : there are people here who said that this is not working mobile. the answer is yes it can work on mobile browsers ( with some few work around )

[@cheeseburgers4970]

@@DarwinTutorials cheers , sorry i forgot to like and subscribe , but i did now.

[@aanandantma9573]

Really great tutorial... Keep going!!

[@DarwinTutorials]

Thanks a lot!

[@tanakornchanjatunat6583]

How to use on hosting server without localhost?

[@vitorgabrielrodriguesmelo3569]

I loved the video, however on my second call, after finishing the first one, it doesn't work :(

[@ShivanshuCodes]

could you do the same thing with expo cli

[@ArUnBoMbArUn]

Great video, the best video call app tutorial I've seen!

[@DarwinTutorials]

Thanks a lot!

[@aminehero9948]

can i make it one to many broadcast ?

[@ZeekStrategist]

Pls what font are you using on your vscode

[@jervx829]

Is it possible to do this but with no node server? just a react app?

[@vincent4571]

Hello bro, thanks for this tutorial! But I got some problem on the initiator's end such that it doesn't get other peer's stream after finish signaling, can u help me by any means? :/

[@himthakur619]

do you know how to remove echo noise from webcam webrtc?

[@siddhirathod6496]

Can anyone tell me how to run the project after taking it from github repo??

[@iKnowSomething319]

Hey Darwin,how can I add screen sharing feature in this?

[@shadedgecko2302]

Do I need to use ReactJS or will this code work with normal JS?

[@ucphuco9742]

your BE run on port 3000 , why you setting on your FE port 5000

[@firejaguar2098]

Hi, I downloaded your project from github and it worked. After a while I started this project again, but there was a problem. When copying the ID, the code for the call is not generated. What could be the reason? I tried to download the project from github again and restart it, the same problem. I don't know why the project worked and then stopped.

[@mrtherapy309]

Did you forget to start the nodejs server? nodemon server.js

[@judatop4147]

Hello, is it possible to video chat with many users?

[@amrhesham6383]

Awesome and in the point , thanks

[@hamednajafihaghi953]

thank you for your video it was such a good tutorial , but i had some suggestions: 1- Please do not copy/paste a bunch of code from somewhere else into the code its ok to start the video with some pre setup but the constant copy/pasting was a little annoying. 2- Please use normal font for your IDE its a little hard for viewers to read the code thanks

[@ZeekStrategist]

please how can i solved this error that is showing Uncaught ReferenceError: global is not defined at node_modules/randombytes/browser.js

[@nikhilthadani4131]

Problem is with vite, add global in vite config

[@marcogussetti3911]

Hello! Good tutorial, but i get "Cannot GET /" error. Someone can fix?

[@metaphor9480]

hi, have you solved the problem?

[@downloadfantastic3151]

how can we put domain and everybody can use it?

[@DarwinTutorials]

Shouldn't be too difficult. I generally use something like Digital Ocean for my server, and then maybe netlify for the frontend. They make it very easy to get things up and running.

[@manodeeban]

Can I able to deploy it

[@renishsalakhana5603]

Thanks a lot very helpful. If possible, add a new feature: a one-to-one chat panel with the person who joined video chat.

[@ronitviju5406]

can we have two different computers have a call with each other?

[@DarwinTutorials]

Yeah for sure

[@aslan6921]

I get an error when I press the Call button: Secure random number generation is not supported by this browser. Use Chrome, Firefox, or Internet Explorer 11. I user Vite. I tried to find a solution, but nothing helped. Any suggestions?

[@suratitechnical4682]

Thank you so much for this video now I can build my app successfuly

[@DarwinTutorials]

Awesome glad it worked for you.

[@mergmerg5156]

Thank you, very good video..... How to run this project in real IP?????

[@zeke2104]

Your video is my savior. It streamed nice at the first time; however at the next time, it says "Cannot signal after peer is destroyed". How can I do to fix this? Thank you very much

[@DarwinTutorials]

Hey I think as the app is written now you would need to refresh to page before making another connection.

[@zeke2104]

@@DarwinTutorials Thank you for your reply. But how can I make it work without refreshing the page?

[@REEEEEM_]

@@zeke2104 You can try setting the connection ref to initial value

[@SantoshLLC]

Thanks for it. However I have trouble deploying it, how can I do that, please?

[@sotech7424]

Follow the original video series and you'll find another tutorial on how to deploy it to Heroku.

[@dekcode2824]

Thanks a lot man for sharing this. This is awesome! Btw, you need 2 instances to run the backend and the frontend?

[@aishaM-g4c]

i got 'ERR_PACKAGE_PATH_NOT_EXPORTED' at yarn start command do u have any solution

[@cnstruction7844]

did you ever find a solution smh

[@jeevanstha57]

Calling from one tab/browser to another with same id is not working .How to do that...

[@BENTECHPROTV]

thanks a lot for the sharing

[@manishhazra6864]

Can you help?? The Call id is not getting copied to clipboard

[@DarwinTutorials]

Hmm I'm not sure what the specific issue would be but I would suggest trying to clone the repo from the Github link in the description and see if that works for you.

[@manishhazra6864]

@@DarwinTutorials I have cloned the repo... And I also don't find any bugs... But I don't know why it isn't working

[@louayouja2302]

fixed it?

[@manishhazra6864]

@@louayouja2302 yes... Somehow the server file got changed and was giving error

[@pradyumnacharate1194]

Your tutorial was really helpfull for my college project.Just one query, Can I pass array of ids and also at backend parse the array of ids and have a group call ?

[@weirdduck4578]

hello can this handle more than 2 users like a video call of 10 users?

[@DarwinTutorials]

This video can only handle a one to one connection but in the video the guy does a group video chat. kzbin.info/www/bejne/iGLWl3uGrKp7baM

[@faisalwaheed3324]

I can't add yarn in my terminal

[@DarwinTutorials]

You need to install yarn.

[@fun8643]

Thanks for the tutorial On minutes 6:43 to 7:30, you added a script that eliminates the io variable, yet you are still using it on line 12. Some explanation. Your code generates a GET Error

[@Amazing_McBoss]

Hi how did you fix that error? thanks

[@metaphor9480]

hi, have you solved the problem?

[@buldabang]

Let me ask you a question. const connectionRef = useRef(); .... connectionRef.current = peer; connectionRef

[@MrR3set]

afaik saves peer info between rerenders

[@musclecatnana]

really perfect, thanks !

[@DarwinTutorials]

Glad it was useful!

[@alameensamar5577]

Hey, may I know which font are you using for the editor? I was trying this tut 😁and found the font interesting

[@DarwinTutorials]

The font is Dank Mono and its the night owl theme

[@alameensamar5577]

@@DarwinTutorials thank you

[@НикитаТарасиков]

Good job, thank you!

[@DarwinTutorials]

Thanks for watching!

[@kumavatbaluram3068]

I use this code but it give me a an error which is : Identifier 'Buffer' has already been declared....... Why this error? Please reply me

[@DarwinTutorials]

Does it work if you clone the repo?

[@kumavatbaluram3068]

@@DarwinTutorials I don't try it but I'm using this video code and I also try to copy paste repo code detto (server. Js, App. Js) but it not work this error comes

[@kumavatbaluram3068]

This code work when comment the code toCalluser to leveCall then it work and show results

[@mackynikat8833]

. is this working on mobile devices ?

[@DarwinTutorials]

Haven't tried on mobile but I would think there might be some differences.

[@Akosiyawin]

Hey Darwin, I'm Darwin too😂

[@DarwinTutorials]

A couple of Darwins

[@aditisneh6420]

Hey I am getting error in console as connection refused. Someone help

[@aditisneh6420]

So my problem was solved. We are supposed to run both the server and client at the same time

[@bluesakanachan5254]

why cant i run nodemon?

[@DarwinTutorials]

Not sure really.

[@TusharJainnn]

Whenever I click Copy ID, and try to paste it, nothing is copied or pasted. Why would that be?

[@DarwinTutorials]

It could be several things have you tried copying over the code from github? Also make sure the npm package is installed.

[@tatsuya370]

@@DarwinTutorials same problem, the state text= {me} return empty string "". so copyToclipboard not copying. setMe is not setting any values to it

[@DarwinTutorials]

@@tatsuya370 Hey I just tried cloning the repo again and the copyToClipboard works for me. Maybe try cloning the repo and see if that does it. The only other thing I can think of is make sure you are also running your server with npm run dev in the root of the project.

[@tatsuya370]

@@DarwinTutorials ya ill try that and let you know. tnx

[@tatsuya370]

@@DarwinTutorials Ya i cloned it and its working!. But again i tried running it manually, also on npm run dev, but socket is not working and not getting the id from the clipboard. I guess it has to do something with the packages. When starting of your video, there is already a package.json file in your root folder, what should I install to get that folder?

[@pariabr4027]

Thanks! it was great! I followed everything you and JavaScript Mastery did and made it! Works as it should when calling yourself using a single browser as demonstrated in your tutorial. but when I call from other devices or different browsers it doesn't work! could you help me, please?

[@DarwinTutorials]

I just tried to clone the repo and it was working for me between chrome browsers and between Brave Browser and chrome. I haven't tried other browsers so not sure about those. I don't believe this will work on mobile or other devices so sorry about that. Were you getting any error messages or anything that might help debug the issue? Also, have you tried cloning the repo directly?

[@uzairghaffar2855]

@@DarwinTutorials can you guide me why it wont work on mobile phone. Can it work on mobile app by doing necessary ( react to reactnative) changes?

[@mister.z2260]

Cool!, thank you for this lesson!~

[@DarwinTutorials]

Thanks for watching!

[@_TranNgocLong-sv8iv]

I can't copy id :(

[@omarjaramillo2720]

thanks bro i love you jeje

[@devapps-uk]

This works nicely in Ubuntu; Win 10 shows errors.

[@DarwinTutorials]

hmm don't have a windows machine so I haven't tried. Not sure why that is happening.

[@alishaik8139]

👏👏

[@andrewcbuensalida]

it would be better if you showed the results of each step instead of just type through the thing in one go.

[@SherAli-fp9li]

nice

[@romansri9903]

❤🎉

[@sayujyamalkan2660]

I wanna deploy this project on netlify, hence I run this "npm run build" and served it to the server using the app.use(express.static("public")) app.get('/', function(req,res) { res.sendFile(path.join(__dirname + "/public/index.html")) }) Idk why the video is not showing up. Can someone assist me?

[@richardobiri2642]

very good but doesn't work on mobile phones

[@huuhoangnguyen3040]

In essence, your project is not really finished. What happens when user 1 calls user 2? User 1's name gets copied into User 2's name. Additionally, if one end disconnects, the other end must also do so. Finally, I'm curious if you want to restrict this software to only 2 people at once or more. There must be information to let the third person know they are on another call if the number of users is restricted to 2. Sincerity be told, you haven't really made me value your videos.

[@SS-db5uw]

pls in ts

[@soklayvann8980]

hello

[@prabhjotarora2740]

Why don't you focus on telling the "why" behind the code that needs reason for explanation? Like more on simple-peer, is peer.on() with arguments like signal is important or just could be anything? , a proper connection explanation, don't just finish the backend, try to connect the small backend portion with small building block of frontend, like for connecting "me", do it for backend first than frontend, than move to another like calling part in backend than frontend, every youtuber seems to be completing the backend part first in every video chat app, why? Your purpose is to explain, that's y you have your KZbin channel, why only those properties in data argument like name, signalData, i mean ofcourse signalData is important but why you can't omit the data which is not important for the moment, why make it perfect in starting itself, go slowly, than add extra data like name, etc, i know from and signalData is important, add only which is utmost required for video chat functionality rather than making it more perfect, make it perfect but little later after explanation, take your time, create 1 or 2 hour tutorial but with the "why" behind thr codes that need actual explanation, No offence, I just needed proper understanding, all the game is about understanding, which data is passing to which socket listener, the idea and logic behind this is what important for us to build the chat app ourselves, so that without anyone's guidance, we can build it. The thing you are explaining is good, but required to explain on more things, try to understand. That's it. Otherwise, Thank you for the tutorial.

[@ivan-Croatian]

Yet another tutorial that does not work.

[@frontendzonedotcom]

very nice copy cat

[@st.deykun]

A nice code review video and a terrible tutorial.

[@piyushpaikroy3579]

Hey buddy really helpful tutorial. Can you please provide your socials so that we can connect? Well I am really lucky as I found your channel. Bro its so underrated.

[@DarwinTutorials]

Thanks for the kind words I'm @nikcochran on twitter.