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.
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
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 .
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!
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.
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
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.
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
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.
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❤️.
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.
Thanks Kyle!, but got a contribution to you this time. Makes me happy to be able to help. I can confirm, after a lot of work that Kyle's code has a major flaw in it, that will make it not work in many occasions. Here is the problem, when you call the nonsynchronous function that returns the user stream, the promise takes an unpredictable amount of time to return, what that does to you is to create a situation where the remote client can receive a call from the originator client without the remote have had set up the peer.on('call', ....{...}) listener function. Then the 'call' event gets lost and the behavior will be highly dependent on your environment, since it is dependant on how long it takes for the promise to return. I looked all over the internet and could find what was going on, so I ended up having to figure it out the difficult way. Now I changed the code so that you call the event handler first async peer.on('call" and then from inside the handler I call the navigator.mediaDevices.getUserMedia function. And then everything works. For those of you that want more details, please go to github, where I placed the complete code of a working example (today 7/19/2021) of an incomplete app that handles n rooms. No idea what the limit of n is for now. It is not production ready, but it allows you to open as many windows as you want between browser tabs. I based it on another tutorial, that didn't work either!, and explain everything in the readme.md file Good luck and happy programming! and thanks to Kyle for this video. I got me started!
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.
that was beautiful, I've been searching for this video for weeks now (note the date!) and none of the videos I found explained it so simply/so well much thanks - if anyone has problems getting it to run somewhere other than localhost, it's because you need https for mediaDevices now (except for localhost)
@@pozaking96 it took me pretty much since I've written that comment to implement it, but i finally got it working... trying to route it through an nginx reverse proxy ended in nogo... lets see, sorry if i miss anything watch for edits ;) first and mainly, on the require('http') you of course need to set it to https and give a cert and key (man has that process changed in the 2-3 years since I've done it last!) once you get the certs (if you don't know how, google it, it's a whole other 3 page essay) it's basically the same {} object as for the peerjs (far below) with these lines: (replacing the require('http').server(app); line) const fs = require('fs'); const server = require('https').createServer({ key: fs.readFileSync('/path/to/my/ssl/cert/key'); cert: fs.readFileSync('/path/to/my/ssl/cert/cer'); }, app); second, I'm not sure if the peer server needs it, but just in case I modified the top of script.js's peerjs parameters to include secure:true third, likewise unsure if mandatory but certainly better than running two node instances, I edited server.js to incorporate a peerJS server with the following lines: const PeerServer = require("peer").PeerServer; var peer_server = PeerServer({ port: 3001, ssl: { key: fs.readFileSync('/path/to/my/ssl/cert/key'), cert: fs.readFileSync('/path/to/my/ssl/cert/cer') }, allow_discover: true; //not sure why }); console.log('*** peer server running on port 3001'); fourth, countless more changes including adding in a mute button and using different ports, source input changing and aliases... I don't think any were related to the SSL but let me know if it doesn't work... and you can see that it should at virc.ceneezer.com - note it's still in testing mode, my script.js should probably not be copied, fair warning ;)
@@six1free yay, after some syntax errors I made it work with your hints... I just want to add: The semicolons did not work for me(at least within the objects). Delete all and replace with comma where needed(Key-Value pairs within objects) And... to get a self-signed certificate(yes it's not trusted... but works at least for my purpose) you can google a 3-pager or just linuxize.com/post/creating-a-self-signed-ssl-certificate/ or just make sure you have openssl installed and run: openssl req -newkey rsa:4096 \ -x509 \ -sha256 \ -days 3650 \ -nodes \ -out cer \ -keyout key Copy then the cer and key files where you want to have them (ssl folder?) and adapt the lines in server.js pointing to these relative to your server.js -> ie key: fs.readFileSync('ssl/key'), thanks for your help again
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.
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 🙏
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.
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!
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.
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 😊
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
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 ?????
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?
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!
@@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
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.
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.
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)
I am not able to see the 2nd grid when the second person connects. How to solve this? I have actually compared the source code line-by-line. Everything is the same, but still facing this issue.
So, if this is a peer-to-peer model, it means that each user streams its video to each other user? And if there are 10 users, each user would stream to 10 other users? That woudln't kill user's internet? 🤔
True, that's why commercial applications still exists which takes care of optimization. Peer to peer works as long as it doesnt scale out of peers capacity, other alternative model exists to adress these issues.
@@Jorgeee You can never hide an IP, you can only ensure that others cannot access the data through your IP P2P technology is like a branch. The more users branch off the source stream, the better the network and signal quality my opinion I came to
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
Good Video! A warning to Junior Devs. It only works well for peer to peer, If you do it with more users, your internet connection and those in the room will die.
I have no idea why, but, everything else I tried went well except the cameras in the call. I still like it though. You helped made me program a camera!
@@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...
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?
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 ?????
@@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
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?
@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👍👍
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?
looks like the room is the MD5 code of the name of the room you typed in. I love how the video goes away when you close the other browser. I saw another guy do this using javascript using html video link and a js script.
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 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.
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.
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.
It's not working for me. When I join into the room from a different browser, that video is not being added to the previous browser window. I have tried coding myself and also cloning your git repo. Neither worked. Please help!
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.
Yeah, man. I feel you...
With these videos I understand the concept of MVP
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
How is this at all making you think in a lower level way? It can't get higher level than this!
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 .
This guy is so dedicated at helping devs like me. Thanks bro
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!
"comprehensive" LMFAO . You didnt comprehend sht about webrtc with this video.
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.
I had intended writing a blog post today but this is way more interesting project to do today. Thanks Kyle.
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
Sal7_one webRTC had been in a bad state in all browsers back then if I remember well...
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.
After watching this, I could not resist subscribing to your channel immediately. You were awesome
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
What's better than 1 single kyle simplifying the web. That's 4.
legendary
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.
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
This just uses TCP sockets, not WebRTC. I dont know why it says WebRTC on the title ? Maybe to confuse new learners.
since you prefer using shorthand like npm 'i' for 'install' you might wanna use '-D' instead of '--save-dev' :)
Thanks
@Wafi Hartono Laughed at this one :)
@Wafi Hartono you're missing out then 😂
@Wafi Hartono actually its D, because the D is big ;)
If you have latest version then you need not have to add save it will automatically add all dependencies related with it.
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.
it would be interesting to see more flushed out UI for something like this. Great video Kyle, cheers man!
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❤️.
Thank you man you and Brad taught me all I know in web development
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.
Thanks Kyle!, but got a contribution to you this time. Makes me happy to be able to help.
I can confirm, after a lot of work that Kyle's code has a major flaw in it, that will make it not work in many occasions. Here is the problem, when you call the nonsynchronous function that returns the user stream, the promise takes an unpredictable amount of time to return, what that does to you is to create a situation where the remote client can receive a call from the originator client without the remote have had set up the peer.on('call', ....{...}) listener function. Then the 'call' event gets lost and the behavior will be highly dependent on your environment, since it is dependant on how long it takes for the promise to return. I looked all over the internet and could find what was going on, so I ended up having to figure it out the difficult way. Now I changed the code so that you call the event handler first async peer.on('call" and then from inside the handler I call the navigator.mediaDevices.getUserMedia function. And then everything works. For those of you that want more details, please go to github, where I placed the complete code of a working example (today 7/19/2021) of an incomplete app that handles n rooms. No idea what the limit of n is for now. It is not production ready, but it allows you to open as many windows as you want between browser tabs. I based it on another tutorial, that didn't work either!, and explain everything in the readme.md file Good luck and happy programming! and thanks to Kyle for this video. I got me started!
link to github??
Life Savior. Thanks a lot!
Cant find your github repo/profile, can you share it please?
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.
Zoom has been really quiet since this video came out 💀
This video came out like 5 minutes ago :/
@@ArpanCodes you must be the king of the parties with that sense of humor
they have 24 hours to respond, no cap 😂
@@ArpanCodes
😂😂
@Arpan Codes 😂😂😂
man!!! This guy's got a sense of humor for explanation.
This was absolutely brilliant. It clearly shows the concepts and paradigms. Good job!
I do not subscribe for more videos, I do subscribe to support this guys that share knowledge
This is AWESOME! Now I have a cool study project for the weekend. Thank you, Kyle. You rock!!! 🤘👍🏻👏🏼👏🏼👏🏼
that was beautiful, I've been searching for this video for weeks now (note the date!) and none of the videos I found explained it so simply/so well much thanks - if anyone has problems getting it to run somewhere other than localhost, it's because you need https for mediaDevices now (except for localhost)
can you explain it more in detail, what we need to change to run it with https?
@@pozaking96 it took me pretty much since I've written that comment to implement it, but i finally got it working... trying to route it through an nginx reverse proxy ended in nogo... lets see, sorry if i miss anything watch for edits ;)
first and mainly, on the require('http') you of course need to set it to https and give a cert and key (man has that process changed in the 2-3 years since I've done it last!) once you get the certs (if you don't know how, google it, it's a whole other 3 page essay) it's basically the same {} object as for the peerjs (far below) with these lines: (replacing the require('http').server(app); line)
const fs = require('fs');
const server = require('https').createServer({
key: fs.readFileSync('/path/to/my/ssl/cert/key');
cert: fs.readFileSync('/path/to/my/ssl/cert/cer');
}, app);
second, I'm not sure if the peer server needs it, but just in case I modified the top of script.js's peerjs parameters to include secure:true
third, likewise unsure if mandatory but certainly better than running two node instances, I edited server.js to incorporate a peerJS server with the following lines:
const PeerServer = require("peer").PeerServer;
var peer_server = PeerServer({
port: 3001,
ssl: {
key: fs.readFileSync('/path/to/my/ssl/cert/key'),
cert: fs.readFileSync('/path/to/my/ssl/cert/cer')
},
allow_discover: true; //not sure why
});
console.log('*** peer server running on port 3001');
fourth, countless more changes including adding in a mute button and using different ports, source input changing and aliases... I don't think any were related to the SSL but let me know if it doesn't work... and you can see that it should at virc.ceneezer.com - note it's still in testing mode, my script.js should probably not be copied, fair warning ;)
@@six1free thank you so much for your answer ! Will try it out later today!
@@six1free yay, after some syntax errors I made it work with your hints... I just want to add:
The semicolons did not work for me(at least within the objects). Delete all and replace with comma where needed(Key-Value pairs within objects)
And... to get a self-signed certificate(yes it's not trusted... but works at least for my purpose) you can google a 3-pager or just linuxize.com/post/creating-a-self-signed-ssl-certificate/ or just make sure you have openssl installed and run:
openssl req -newkey rsa:4096 \
-x509 \
-sha256 \
-days 3650 \
-nodes \
-out cer \
-keyout key
Copy then the cer and key files where you want to have them (ssl folder?) and adapt the lines in server.js pointing to these relative to your server.js -> ie
key: fs.readFileSync('ssl/key'),
thanks for your help again
@@miku1982 might have been a few typeos, it was re-typed not copypastad - glad you got it
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
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.
Read the mdn webrtc docs
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 🙏
I just want to let you know that you are carrying my Comp Science degree
I wish, as a society, we had a way to reimburse people who make valuable creations like this, for their work.
you just made me lots of money with this video, thanks brother!
Welcome to web dev simplified “tImEs FoUr” 😂
He is an awesome teacher. I wish I had him in my university :)
Wow, exactly what I needed! Thanks Kyle!
Thanks!
WOW! Thank you so much for the support! I am really glad that you enjoyed the video.
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.
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!
guy you are incredible. I came to know about your channel after the video you published on brads channel . great job.
@Tazuba Cyrus
Please, please send me that video URL!!! I am ready to PAY for that.
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.
You cracked it bro amazing 🌟
i was just going to watch for around 3 minutes but ended up watching the whole thing
-y same
0:21 to 0:34 - INNOVATIVE INTRO :)
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 😊
Amazing! The image quality is even better than Zoom!
Best intro ever 😂
So fun😂😂😂😂😂ny I am so 😂😂😂😂😂 sorry I need to edit it sOrYy
I love your neat and clean way of coding and clean setup
alternative title: i made a more secure zoom clone in 28 minutes
I was just about to comment: "Probably more secure as well" :^)
How
@@prakharpandey6009 Step one: actually do something about security.
Step two: there is none, you're now more secure than Zoom.
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
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 ?????
Oh my short... You know how long I've been looking for a solution like this? Thanks man
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!
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?
I dont think heroku supports running two servers on different ports
WebRTC is one of the least documented feature of modern browsers. I doesn't surprise me this video did so well.
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!
This is not a tutorial on webrtc. Is a tutorial on peers js
@@PabloGnesutta Not the inner parts of webRTC but it uses the technology thru peer server
@@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
@@PabloGnesutta true
I literally have been thinking about something like this the past week . Get out of my head! 😂
Seriously, i wanted to design this one too but I never knew where to start.
This video is crazy simple and easy to follow. Thanks alot
Would love to see more real world apps cloned. Thanks.
This code will make the world a better place!
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.
Best intro ever
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.
Amazing Bro!! not as much people know about webrtc, great job!
He doesn't either. Just using a high level library to do all the work
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.
this is a really helpful tutorial kyle.. you are great, Please add a screen share option from one to many users
This should be renamed to: “How to be an instant millionaire in just one or three videos.
Troy Serapio Zoom will be furious!
Hi I also created this type of app : call.rekhagujar.repl.co please visit
@@RekhaGujar83 uP
@@RekhaGujar83 Its really nice
@@RekhaGujar83 please help me...I am getting only one screen after using this
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)
I am not able to see the 2nd grid when the second person connects. How to solve this? I have actually compared the source code line-by-line. Everything is the same, but still facing this issue.
Please anyone reply i am also facing the same issue
I think maybe u didnt connected the peer server
@@yashkhare7308 yes, even I get the different ids which are connected but not the 2 videos in the same page.
Same i am also not getting 2 videos in the same page but in console the user is getting connected
Yeah, same issue
You're a great teacher. I really enjoyed it and learned stuff. Thanks for putting this together.
So, if this is a peer-to-peer model, it means that each user streams its video to each other user?
And if there are 10 users, each user would stream to 10 other users?
That woudln't kill user's internet? 🤔
True, that's why commercial applications still exists which takes care of optimization. Peer to peer works as long as it doesnt scale out of peers capacity, other alternative model exists to adress these issues.
That's true,zoom is not using peer to peer
That wouldn't kill the user's internet? P2P is mama that's why zoom is shit
Milan Drazic p2p isn’t very secure since you can pull ips from connected people, also if someone has shit internet it can fuck up thr whole room
@@Jorgeee You can never hide an IP, you can only ensure that others cannot access the data through your IP
P2P technology is like a branch. The more users branch off the source stream, the better the network and signal quality
my opinion I came to
Exactly what I’ve been looking for. Thanks man :)
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
have you got any clue?
Good Video! A warning to Junior Devs. It only works well for peer to peer, If you do it with more users, your internet connection and those in the room will die.
On start of the video you had your phone connected to the server. How did you do that?
I understood nothing, but still it’s very exciting! :)
Can you do an electron.js tutorial or some machine learning topics using js?
You are awesome, Intelligent, smart also..i like the way you teach
How would you deploy this and add in some functionality for users to create rooms?
10.12.2022 At 14:58 just omit 'broadcast', type instead 'socket.to(roomId).emit('user-connected', userId)'
Thanks
I have no idea why, but, everything else I tried went well except the cameras in the call. I still like it though. You helped made me program a camera!
did you manage to solve it?
I'm having some trouble using it across devices, is there any chance of you doing a tutorial for deployment?
Add the port number to the IP address generated by your router
@@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...
Incredibly easy and well explained. Subscribed! 👍
18:17 When I goto console it is not shown "User connected ..id".
How did you fix it?
@@김은진-w3g I've tried but couldn't find the solution than I just ignored it and proceeded forward
Thank you! I always love your video and appreciate your works!
Thanks Kyle, If you could assist in getting this hosted somewhere than it would be very helpful
It's insane how easy this is °__°
Love how he crams into a half-hour exercise what would be a whole course over on NetNinja's channel 😄
Amazing instructor! Well explained!
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?
Same here, cant see video
I left instructions in a reply to my main comment... rather long, in short it needs to be SSL
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 ?????
@@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
@@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.
this is indeed simplified web development, gracias!
this apps works on just local machines. Can you guide to deploy and make it work on all machines?
you need to add STUN / TURN server
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?
@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👍👍
Nice tutorial dev, thanks dev
JIO has already made an exact zoom clone 😂
App name?
@@guidingtechbd jio meet
Searched for this comment as soon as I read the video title lol
@Sentinel Jio is an Indian company that has even copied whatsapp theme for its jiochat app, I don't know why they are doing this but anyway
@@garvnanwani9835 Plot twist: Kyle works for Jio
Best vid on zoom clone!!
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?
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?
@@theroboticscodedepot7736 same here , did you solve it ?
@@eraramchandra1338 - I had to abandon my efforts as other work took precedent.
looks like the room is the MD5 code of the name of the room you typed in. I love how the video goes away when you close the other browser. I saw another guy do this using javascript using html video link and a js script.
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?
Hey, do you know how to implement using STUN or TURN server?
hi, you are a great teacher and explainer.
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 ?
Yes it will thats why big corporation have some kind of compression algorithm depending on the network ig.
@@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.
@@TheMasterAram I had no clue about that.
@@TheMasterAram Do you have any reference link for this? I interested to check it out.
Your explanations are perfect :) Thanks for sharing.
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.
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.
Thanks mate
I was mistaken, great tutorial just needs npm start when you close the project, thank you for this video and apologies for the last comment
breaking changes to socket. Please do an update.
got any solutions?
Awesome Development video. Thanks, brother
0:24 _proof you're _*_REAL_*_ Kyle_
Vro, you are a life saver❤
It's not working for me. When I join into the room from a different browser, that video is not being added to the previous browser window. I have tried coding myself and also cloning your git repo. Neither worked. Please help!
You found the solution about that , i have the same problem
@@marouaneaitbolbarod4807 I also have the same issue