How To Create A Video Chat App With WebRTC

With everyone being forced to work and socialize from home video chat has become incredibly important. Over the last few months Zoom has been consistently criticized for their poor security and privacy, so I decided to make my own Zoom clone. In this video I show you everything you need to know to create your very own video chat application which supports chat rooms, video chat, and much more.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/Z...
PeerJs Library: peerjs.com
🧠 Concepts Covered:
- How to use WebRTC
- How to setup Socket.io
- The easiest way to create rooms in Socket.io
- How to setup secure video chat connections
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#WebRTC #WDS #JavaScript

[@sarpedonmontecarlo8397]

a simple, comprehensive, useful and well structured tutorial with nice and clean code, and an ASMR'ish voice along the way which was an amazing learning and experience for me! thanks to all in Web Dev Simplified, Cheers to all of you guys!

[@fxstreamer238]

"comprehensive" LMFAO . You didnt comprehend sht about webrtc with this video.

[@jerryjeremy4038]

This guy is so dedicated at helping devs like me. Thanks bro

[@llampwall]

I like how you just set up from nothing. No dev environment stuff, no starter kit, just npm init. Makes me think about stuff in a lower level way. Makes me realize a lot of stuff is simpler than I’m making it.

[@IgorogI1000]

Yeah, man. I feel you... With these videos I understand the concept of MVP

[@PabloGnesutta]

The stuff is not simpler than you are making it... You are just relying on libraries that do all the work for you and end up not understanding how the technology you use works at all

[@PabloGnesutta]

How is this at all making you think in a lower level way? It can't get higher level than this!

[@fxstreamer238]

main stream nonsense to make the video longer apparently always appeals to people like you. how many times he has to create a server with npm init and express? The guy used to be a good youtuber but as he grew his channel he became robotic . focusing on trivial tasks like DOM and server creation and repeating the arguments as he is typing and calling it "explanation" . Rather than talking about the bone of WebRTC. ICe candidates SDP , NAT difficulties for symmetrical routers, TURN and STUN servers. Hell he didnt even mention that peerJS has limitations .

[@KandMe1]

Just wanted to add a thank you and just to say yours is probably the first decent tutorial on coding I ever followed. Took my one evening to download and start to figure out the IDE but now I am going fine with it. It was a challenge but it's like your teaching us to climb and tree the others taught how to flutter about from leaf to leaf.

[@ibikunleshuaib7187]

I had intended writing a blog post today but this is way more interesting project to do today. Thanks Kyle.

[@workingTchr]

Information is such an incredibly important thing. And presenting it in a helpful way to those who do not yet have it deserves massive remuneration. Until then, thank you.

[@zenotekscientificsupplies6084]

After watching this, I could not resist subscribing to your channel immediately. You were awesome

[@ChristopherEdwards0]

You're videos have helped me so much in my own programming and web development, and I want to say thank you. Projects like these take concepts and shows us real world applications for them,and by following along, we get to experiment and learn along with you.

[@DeltaStudios1]

it would be interesting to see more flushed out UI for something like this. Great video Kyle, cheers man!

[@felipepontilho3921]

This is AWESOME! Now I have a cool study project for the weekend. Thank you, Kyle. You rock!!! 🤘👍🏻👏🏼👏🏼👏🏼

[@harshitsantosh825]

Thanks for demystifying WebRTC. I was searching for such kind of video since March 2020. No one taught the full execution of the project. Thanks a lot man.

[@PabloGnesutta]

This does not demistify webrtc. In fact there is no single line of webrtc implementation code. It just shows how to use peers js which does all the work for you

[@suchaimmuchwow9776]

This just uses TCP sockets, not WebRTC. I dont know why it says WebRTC on the title ? Maybe to confuse new learners.

[@paulgodley1297]

This was absolutely brilliant. It clearly shows the concepts and paradigms. Good job!

[@sthefanocarvalho2823]

You are awesome! Your detailed explanations make the process very clear. Thank you for all the good content.

[@waddkara]

Thank you man you and Brad taught me all I know in web development

[@tazubacyrus5361]

Brad is another great guy. I can't even compare him to the years I spent in college.How i wish i had known him before. I wouldn't have wasted my years in college.

[@dummypg6129]

I can say i am good with python, and it really amazes me when I am watching node tutorials. I dont even need it for something, i am just watching it.

[@unknown-frames]

This helped me a lot really!. I am on a webRTC project, this is the best tutorial I saw to get basic undestanding. Thanks a lot

[@Prakhar281993]

Thank you, that's what I have been waiting for.

[@codingmasteryt2021]

Wow, exactly what I needed! Thanks Kyle!

[@allanregista4422]

Been watching for your vids for quite while, but as soon as i see this video i subbed. Man, you're truly amazing, u made some thing complicated far less terrifying an less horror.. thumbs up 👍👍👍 may god bless you brother 🙏

[@dekcode2824]

You're a great teacher. I really enjoyed it and learned stuff. Thanks for putting this together.

[@GiannisKarmas]

Can you please do a simple-peer version of this? Just an addition on the main differences would suffice. Webrtc is difficult to understand by nature and having more examples would make things so much cleaner. Many thanks 😊

[@josealuis607]

Zoom has been really quiet since this video came out 💀

[@ArpanCodes]

This video came out like 5 minutes ago :/

[@josealuis607]

@@ArpanCodes you must be the king of the parties with that sense of humor

[@leomarquez2349]

they have 24 hours to respond, no cap 😂

[@Anonymous-kw7ls]

@@ArpanCodes 😂😂

[@godloven.6564]

@Arpan Codes 😂😂😂

[@timoernst]

Incredibly easy and well explained. Subscribed! 👍

[@xaapt]

Thanks a lot. After I've been watching hours of theoretical video, this API is much simpler and clear to jump in and start something with that

[@Salehalanazi-7]

This is incredible. I would've killed for content like this 5 years ago, similar to the coronavirus search extension it really broke my fear of Chrome extensions and eventually I made a Chrome extension that checks if tweets are spam with ML api and hides tweets. Thanks Kyle

[@AndreasDelleske]

Sal7_one webRTC had been in a bad state in all browsers back then if I remember well...

[@xavi_6767]

What's better than 1 single kyle simplifying the web. That's 4.

[@boluwarinoladipo8509]

legendary

[@shoaibkiyani9813]

He is an awesome teacher. I wish I had him in my university :)

[@traveler292]

Exactly what I’ve been looking for. Thanks man :)

[@joshblf]

Great video. It would have been nice to show a diagram of how all the libraries work together to get the big picture while building it though.

[@Mapko0]

You should do a episode 2 of this and address the client memory leak problems and other issues that may occur. Kudos to you for the presentation and simplification of the code. keep it up.

[@PabloGnesutta]

Read the mdn webrtc docs

[@WebWonders1]

I love your neat and clean way of coding and clean setup

[@scorpion32]

This is such a good project idea, thank you!

[@mvrdara]

Would love to see more real world apps cloned. Thanks.

[@ethanleo3365]

This is a really great tutorial to me to understand how to create a video chat application. However, I would like to point out that this video only goes through the basics which is that of setting up the connection between users and I do wish that you could make a tutorials (or a series hopefully) on creating a video conferencing application that includes functionalities such as creating a room, inviting users where users are actual users that people can create themselves rather than using peer.js to handle the users. Another thing I wish to see is if you could actually show how to go about implementing mute/unmute and enable/disable video functionality. Also, perhaps you could also show how to handle deployment too. Other than that, the video is quite a straightforward and useful video for the basics. I do appreciate this tutorial and I hope that you can take in my suggestion.

[@SantoshGupta-tv4mp]

Men you are great .I have already seen this code in youtube channel Cleaver programming . They were shit talking nonsense which never make sense why we are doing some particular code . I was so confused and started searching for webRTC , peer , socket and what not. But then I seen your video by God grace and everything is making sense now . Thank you very much sir❤️.

[@nemigam223]

Amazing instructor! Well explained!

[@mostafabohram]

Best intro ever 😂

[@bananavrrr]

So fun😂😂😂😂😂ny I am so 😂😂😂😂😂 sorry I need to edit it sOrYy

[@seo5856]

Thank you! I always love your video and appreciate your works!

[@killian9843]

This video is crazy simple and easy to follow. Thanks alot

[@tannerbarcelos6880]

I literally have been thinking about something like this the past week . Get out of my head! 😂

[@IshanKesharwani]

Seriously, i wanted to design this one too but I never knew where to start.

[@ArpanCodes]

since you prefer using shorthand like npm 'i' for 'install' you might wanna use '-D' instead of '--save-dev' :)

[@nocturno7887]

Thanks

[@koreanbroadcastarchive306]

@Wafi Hartono Laughed at this one :)

[@ArpanCodes]

@Wafi Hartono you're missing out then 😂

[@vincentjonathan4529]

@Wafi Hartono actually its D, because the D is big ;)

[@dnynu]

If you have latest version then you need not have to add save it will automatically add all dependencies related with it.

[@eulersson]

Your explanations are perfect :) Thanks for sharing.

[@vontrae]

you just made me lots of money with this video, thanks brother!

[@oskarmarkin5674]

Welcome to web dev simplified “tImEs FoUr” 😂

[@rs-zl7re]

Good tutorial as usually but too advance for me now, I just started learning CSS, HTML and Javascript. Probabaly I would get it when I start a project.

[@juanmoctezuma9225]

this is indeed simplified web development, gracias!

[@CodingFire]

You cracked it bro amazing 🌟

[@PilotGT]

Great video. Thanks for posting! Would love to see a follow-up video that shows how to deploy the app to heroku, netlify, etc. Again, well done!

[@theroboticscodedepot7736]

I made some progress on this by setting my domain name to point to my routers public IP address. Then I have my router port forwarding port 8080 traffic to my computer behind the router. I also changed the port in the serve.js file to use port 8080. Now it all works if I use local host but when I access using my domain name I get redirected to the roomId but no video shows. Does it need another protocol open for the video traffic like UDP?

[@aidenw6862]

I dont think heroku supports running two servers on different ports

[@vanajmoorthy4018]

How would you deploy this and add in some functionality for users to create rooms?

[@thikboii5689]

thank you bro, this is useful and educative!

[@tazubacyrus5361]

guy you are incredible. I came to know about your channel after the video you published on brads channel . great job.

[@dimitargetsov9690]

@Tazuba Cyrus Please, please send me that video URL!!! I am ready to PAY for that.

[@mrhonrer]

I just want to let you know that you are carrying my Comp Science degree

[@workingTchr]

I wish, as a society, we had a way to reimburse people who make valuable creations like this, for their work.

[@imronmaulana4070]

Nice tutorial dev, thanks dev

[@Kujeful]

Very good tutorial on WebRTC, thank you so much! I've been meaning to pour over material on this, and your video just saved a whole lot of time in that. Thank you!

[@PabloGnesutta]

This is not a tutorial on webrtc. Is a tutorial on peers js

[@hugomcm1]

@@PabloGnesutta Not the inner parts of webRTC but it uses the technology thru peer server

[@PabloGnesutta]

@@hugomcm1 yeah but it's like saying that your are creating a web application with c++ because you are using javascript which runs on top of a browser which is made on c++... It's misleading. In this video you don't learn anything about webrtc

[@hugomcm1]

@@PabloGnesutta true

[@rickyzheng572]

Can you do an electron.js tutorial or some machine learning topics using js?

[@RNMERIA]

Thanks Kyle, If you could assist in getting this hosted somewhere than it would be very helpful

[@JamCluster]

Amazing Bro!! not as much people know about webrtc, great job!

[@PabloGnesutta]

He doesn't either. Just using a high level library to do all the work

[@jiyan2000]

Thanks for the tutorial. This is really helpful

[@JahangirJadi]

On start of the video you had your phone connected to the server. How did you do that?

[@aaronbaraiya3692]

i was just going to watch for around 3 minutes but ended up watching the whole thing

[@thunderboltxtra2811]

-y same

[@mandarinnu]

This is so cool, just what I need!

[@sirlucasm]

amazing video! Thank you for this! I loved it

[@willaddison9234]

This is awesome, thank you so much. Do you have any tutorials of now how to get this published to a live server so we can make it public?

[@theroboticscodedepot7736]

I made some progress on this by setting my domain name to point to my routers public IP address. Then I have my router port forwarding port 8080 traffic to my computer behind the router. I also changed the port in the serve.js file to use port 8080. Now it all works if I use local host but when I access using my domain name I get redirected to the roomId but no video shows. Does it need another protocol open for the video traffic like UDP?

[@eraramchandra1338]

@@theroboticscodedepot7736 same here , did you solve it ?

[@theroboticscodedepot7736]

@@eraramchandra1338 - I had to abandon my efforts as other work took precedent.

[@yajassardana3495]

Hey, won't this app break down/ not work when trying to connect accross different networks, as you're deploying without using STUN or TURN servers?

[@tanmayaeron8230]

Hey, do you know how to implement using STUN or TURN server?

[@kitgary]

Amazing! The image quality is even better than Zoom!

[@ymfeijo]

Absolutely amazing!

[@963design8]

I got an issue at the moment peerjs try to connect i fot ERR CONNECTION REFUSED, i am running the code as it is on github and only shows your current camera, no incomming video is shown.

[@lokeshgs7866]

Awesome Development video. Thanks, brother

[@rajeshvadavia61]

hi, you are a great teacher and explainer.

[@manugalaxy14]

For new people watching this video: Testing this on mobile devices might not work as navigator.mediaDevices will be undefined on android phones even if you test it on localhost as it requires a "secure context" meaning you need to test it using a HTTPS context.

[@bananaliquorable]

Hello Manu! Right. ran into this problem yesterday night. Tried to setup secure context for localhost, but chrome doesn't seem to bite! Could you send me in the right direction? thanks so much!

[@aviralsaxena2650]

Can you make the app to accept only those participants whose email are registered in the database ( This can prevent zoom bombing).

[@mybotar9497]

Use Passport with a database (MongoDb is easy to work with) to authenticate. @Kyle has a very good video explaining that.

[@sanket.hosalli]

man!!! This guy's got a sense of humor for explanation.

[@circuithijacker]

Amazing Video! Great content!

[@austinfrbs]

I'm having some trouble using it across devices, is there any chance of you doing a tutorial for deployment?

[@mosesatanda3530]

Add the port number to the IP address generated by your router

[@jeffreyjansen]

@@mosesatanda3530 can you explain this a bit more. Seems that a lot of people struggle with the deployment of this app. Me myself tried Heroku but that didn’t work...

[@rishavkumar8718]

A bug a coming. Let say user1 connected first and then user2 connected, if user1 disconnects then video element of user1 is not getting removed from user 2 (a blank non-streaming box will be there). How to fix that? Thanks for the video though, very helpful

[@lokeshsharma3907]

have you got any clue?

[@ArtVandelayInc]

Great video, top-notch quality

[@2dobby534]

Thank you, clever programmer has very long lecture. But you have very simple nice lecture. I like it.

[@sp--nt1gg]

0:24 _proof you're _*_REAL_*_ Kyle_

[@qwertzu112sge]

Hey Kyle, thanks for the great video! But I've got a problem now: Since just talking to myself on localhost is pretty cool for a while, I wantd to deploy it to my server, so I can talk to myself via my sever, so the rent for it pays off. But I cant get it to run. peerJS detects the client connection and disconnection, but i cant get to see a video. Ports 3000 and 3001 are open. Both Firefox and Chrome dont work. Do you know what might cause this problem? Do I have to open any more ports?

[@VVldi]

Same here, cant see video

[@six1free]

I left instructions in a reply to my main comment... rather long, in short it needs to be SSL

[@amruthap6334]

i have tried and also downloaded your code but still the second user is not adding in the page. what should i do ???? PLease help. btw i m working on firefox. is that the problem ?????

[@six1free]

@@amruthap6334 it should not be.. if you're using my code, describe the console output (F12) if you're only using my script.js that's why, it won't work with his server.js - too many additions, my server.js is in the same public folder, but you'll likely need to comment out the mysql blocks and modify the .ejs a little

[@n.vindresh925]

@@amruthap6334 hey this is kiranmai we have the same problem too but we didn't understand what he said.if you got it please explain me.

[@LifeIsGood1992]

very informative and helpful thank you!!

[@rockycool18]

Hey buddy you explain it the best way , would be nicer to know the security considerations and how this system will work in different network setups (like through NAT, firewall, proxies etc)

[@hakienet3897]

alternative title: i made a more secure zoom clone in 28 minutes

[@FinlayDaG33k]

I was just about to comment: "Probably more secure as well" :^)

[@prakharpandey6009]

How

[@FinlayDaG33k]

@@prakharpandey6009 Step one: actually do something about security. Step two: there is none, you're now more secure than Zoom.

[@peacockmangolotus3483]

Indian apps started to arise in the play store. Do you know the alternate apps created by Indians for camscanner, share it, here is a list of them at poornichefacts.blogspot.com/2020/07/banning-that-paved-road-to-success-for.html

[@amruthap6334]

i have tried and also downloaded your code but still the second user is not adding in the page. what should i do ???? PLease help. btw i m working on firefox. is that the problem ?????

[@christian-schubert]

Love how he crams into a half-hour exercise what would be a whole course over on NetNinja's channel 😄

[@mvh1521]

loved this vid! I think it would be a great idea to make a follow up vid where you add some extra functions like mute button etc

[@Th3Younesse]

thanks you so much this video really helped me with implementing peerjs in nextjs

[@echo-ps9685]

a question, wouldn't this overload the user's internet as all of the users are sending their stream to many other users resulting in a redundant upload, and with each new user the upload will suffer even more ?

[@ashishmaurya3113]

Yes it will thats why big corporation have some kind of compression algorithm depending on the network ig.

[@TheMasterAram]

@@ashishmaurya3113 alternatively they don't use p2p, instead they reroute all the streams into an aggregator, which returns one stream that contains all the other streams.

[@ashishmaurya3113]

@@TheMasterAram I had no clue about that.

[@estevezben454]

@@TheMasterAram Do you have any reference link for this? I interested to check it out.

[@MohammadGabr]

This is an excellent video. But I would like to ask about how I can measure the max user load of the server so I can scale it up

[@mepaul22]

To measure anything capacity, offcourse you have to test drive.keep connecting new clients to your server until you realize all clients are choked and the server too that would be the max user load capacity of your server.

[@kisalminura3842]

Thanks. A great tutorial and explanation!

[@rohankumarshah5679]

I just love the channel!

[@sundeepamrutia]

How can we host it? How many user can we expect to connect? Is it good for small business?

[@shubhamsharma0099]

How can i host it on firebase that it will work on Realtime internet. Pls reply

[@troys1426]

This should be renamed to: “How to be an instant millionaire in just one or three videos.

[@AndreasDelleske]

Troy Serapio Zoom will be furious!

[@RekhaGujar83]

Hi I also created this type of app : call.rekhagujar.repl.co please visit

[@ADeeSHUPA]

@@RekhaGujar83 uP

[@troys1426]

@@RekhaGujar83 Its really nice

[@AmanSingh-xo5hf]

@@RekhaGujar83 please help me...I am getting only one screen after using this

[@user-vw6rt8re8x]

Thanks video! It's really helpful for me

[@ericgarcia1912]

Great 👍 job I really love your tutorials

[@khanhammadkhan451]

18:17 When I goto console it is not shown "User connected ..id".

[@user-xl4yt8ek5d]

How did you fix it?

[@khanhammadkhan451]

@@user-xl4yt8ek5d I've tried but couldn't find the solution than I just ignored it and proceeded forward

[@radheafre8862]

this apps works on just local machines. Can you guide to deploy and make it work on all machines?

[@FatihErikci]

you need to add STUN / TURN server

[@theroboticscodedepot7736]

I made some progress on this by setting my domain name to point to my routers public IP address. Then I have my router port forwarding port 8080 traffic to my computer behind the router. I also changed the port in the serve.js file to use port 8080. Now it all works if I use local host but when I access using my domain name I get redirected to the roomId but no video shows. Does it need another protocol open for the video traffic like UDP?

[@ThatMinecraftGuy_YT]

@The Robotics Code Depot i also have the same quesion and you need an ssl certificate, otherwise it won't work and you can set up an ssl certificate verry easily trough cloudflare. and yea, you need to port forword the protocol UDP and TCP on the port that nodemon runs on, mine is 80👍👍

[@SumitSahoo]

Great content, will try it out soon :)

[@elabinnovations]

Correct time, learning more about socket.io Thanks

[@sinopulence]

breaking changes to socket. Please do an update.

[@anishkarthik4309]

got any solutions?

[@rafaelgpontes]

Hey, this was an amazing on-point tutorial. I had to remove the defer from for it to work here for me. It kept saying that io was not defined on my script.js file. I think "defer" introduces a race condition bug. If it happens to load before the script file, it works. Otherwise, an io not defined expetion is thrown.

[@Genspirit45]

You likely put your script.js above your socket.io script or did not defer your script.js. You typically want to defer any non-essential javascript as it will block loading the website if it runs right away causing it to load slower for the user.

[@riyastp1835]

Thanks mate

[@mbmalek92]

this is a really helpful tutorial kyle.. you are great, Please add a screen share option from one to many users